前言：前段時間學習了下vue，也算是能簡單開發了，今天就記錄下怎麼通過vue-cli來安裝vue。
因vue是基於node環境的，如果你還不會安裝的話，可以看下我的這個教程：安裝node.js和npm教程
以下內容是假設你已有了nodejs環境
1、安裝vue-cli3的包
npm install -g @vue/cli # OR yarn global add @vue/cli
檢查版本如下圖
2、創建一個vue的項目
vue create hello-world
你會被提示選取是按默認方式安裝還是手動安裝。你可以選第一個默認的包含了基本的 Babel + ESLint 設置，也可以選第二個“手動選擇特性”來選取需要的特性。這裏我們選擇手動。如下圖
在多選時，空格代表選中，enter代表進入下一個配置項，且你手動選擇的配置項還會存入到你電腦的 ~/.vuerc 文件中，這樣子你下次創建vue項目的時候，可以選擇你之前手動配置的配置，這點vue cli3做得很人性化哦,
各選項說明如下
- Babel : 將ES6編譯成ES5
- TypeScript: javascript類型的超集
- Progressive Web App (PWA) Support: 支持漸進式的網頁應用程序
- Router:vue-router 路由功能
- Vuex: 狀態管理
- CSS Pre-processors: CSS預處理
- Linter / Formatter: 開發規範
- Unit Testing: 單元測試
- E2E Testing: 端到端測試
一般選擇以下幾項就行了，如圖
確認後，詢問你安裝哪一種 CSS 預處理語言，你隨意選擇，我是一直用的less，
下一步後，問你選擇哪個自動化代碼格式化檢測，配合vscode編輯器的Prettier - Code formatter插件，我隨便選的最後一個，當然也可以選第三個標準配置
下一步後，第一個選項是問你是否保存剛纔的配置，選擇確定後你下次再創建新項目，就有你以前選擇的配置了，不用重新再配置一遍了，我選的第一個
下一步，下邊這倆意思問你像，babel,postcss,eslint這些配置文件放哪？
第一個是：放獨立文件放置
第二個是：放package.json裏
這裏推薦放單獨配置文件，選第一個
下一步，倒數第二行問你是否將以上這些將此保存爲未來項目的預配置嗎？，選擇是
最後一個是描述項目
最後確定就行了，安裝完成之後進入目錄，運行npm run serve 就行了
3、還有一種通過可視化安裝的方式
直接執行下面命令就OK了
vue ui
在瀏覽器中打開http://localhost:8000 ，在頁面中，我們可以看到如下的界面(我開啓了“夜間模式”，所以是黑色背景)。
創建項目
點擊在此創建新項目就可以開始新建項目。
2. 預設項目
3. 自定義功能
4. 配置
5. 完成
可以看到，UI其實跟命令是一樣的，只是可以可視化操作了。
以上就是本文的全部內容了。