使用 cli 腳手架構建 vue 項目工程，執行的命令以及遇到的相關的問題
1. 下載並安裝 node#
測試一下是否成功安裝，
$ node -v
// 返回下載的版本號
2. 安裝 webpack 環境#
$ npm install webpack -g
// 如果失敗，可能是因為用戶沒有權限
// 使用下面這種，管理員權限
$ sudo npm install webpack -g
如果返回版本號代表成功，如果沒有，則需要輸入下面的命令
$ npm install webpack webpack-cli -g
webpack 4.X 開始，需要安裝 webpack-cli 依賴
3. 全局安裝 vue-cli#
$ npm install --global vue-cli
// 如果失敗，使用sudo
$ sudo npm install --global vue-cli
安裝完成之後，輸入
$ vue -V
如果返回版本號，說明安裝成功
4. 構建項目#
前面那些命令執行完之後，就可以構建 ci 項目了，找到我們想要放置項目的文件夾，進入終端，cd 到這個文件夾
輸入命令：
$ vue init webpack vuedemo
// 名字自己根據要求起,vuedemo
- Project name (vuedomo)： ----- 項目名稱，直接回車，按照括號中默認名字（注意這裡的名字不能有大寫字母，如果有會報錯 Sorry, name can no longer contain capital letters）
- Project description (A Vue.js project)： ---- 項目描述，也可直接點擊回車，使用默認名字
- Author ()： ---- 作者，輸入你的大名
- Runtime + Compiler: recommended for most users 運行加編譯，既然已經說了推薦，就選它了
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 僅運行時，已經有推薦了就選擇第一個了 - Install vue-router? (Y/n) 是否安裝 vue-router，這是官方的路由，大多數情況下都使用，這裡就輸入 “y” 後回車即可。
- Use ESLint to lint your code? (Y/n) 是否使用 ESLint 管理代碼，ESLint 是一個代碼風格管理工具，是用來統一代碼風格的，一般項目中都會使用。
- 接下來也是選擇題 Pick an ESLint preset (Use arrow keys) 選擇一個 ESLint 預設，編寫 vue 項目時的代碼風格，直接 y 回車
- Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試，我選擇安裝 y 回車
- Setup e2e tests with Nightwatch (Y/n)? 是否安裝 e2e 測試 ，我選擇安裝 y 回車
然後就是緩慢的構建過程，等到構建完成，cd 進入構建的項目
$ cd vuedemo
然後安裝需要的依賴
$ npm install
5. 運行項目#
運行命令，看看是否能夠成功運行項目
$ npm run dev
根據提示，瀏覽器輸入http://localhost:8080
如果端口打不開，可能是因為被佔用了，需要修改配置文件，config > index.js
查看項目工程目錄
6. 其他#
一些其他相關的指令
$ npm run build
// 項目完成之後打包
打包完成之後，會在根目錄下生成一個 dist 文件夾，需要修改配置文件的路徑，可以在本地查看
項目上線發布，直接上傳 dist 到伺服器即可