vue-cli 是一個(gè)官方發(fā)布 vue.js 項(xiàng)目腳手架演痒，使用 vue-cli 可以快速創(chuàng)建 vue 項(xiàng)目置尔。
1. 安裝nodejs和淘寶鏡像cnpm
下載安裝nodejs，下載后雙擊按步驟安裝即可肠鲫。安裝之后通過node命令
node -v來查看是否安裝成功。
npm：nodejs已經(jīng)集成了npm或粮，node安裝會(huì)默認(rèn)裝好npm导饲。可通過npm -v命令來查看是否安裝成功氯材。
cnpm：因?yàn)閚ode的npm安裝插件比較慢渣锦，國內(nèi)建議使用淘寶鏡像cnpm工具。即先使用npm安裝cnpm工具：npm i -g cnpm --registry=https://registry.npm.taobao.org氢哮，然后使用cnpm來安裝其他插件袋毙。可通過cnpm -v命令來查看是否安裝成功冗尤。
備注：建議不要用 cnpm 安裝听盖，會(huì)有各種詭異的bug，可通過重新指定 registry 來解決 npm 安裝速度慢的問題
npm install --registry=https://registry.npm.taobao.org
注意：使用Vue腳手架創(chuàng)建Vue項(xiàng)目時(shí)裂七，node版本至少是node6皆看，否則創(chuàng)建項(xiàng)目時(shí)會(huì)報(bào)錯(cuò)。
2. 安裝腳手架工具vue-cli
cnpm install -g vue-cli
3. 創(chuàng)建Vue項(xiàng)目并啟動(dòng)
(1) 創(chuàng)建一個(gè)基于 webpack 模板的項(xiàng)目
- 通過cd命令進(jìn)入你想放置項(xiàng)目的文件夾背零，在命令窗口執(zhí)行命令
vue init webpack來創(chuàng)建vue項(xiàng)目腰吟，之后輸入相關(guān)信息（如：項(xiàng)目名稱、項(xiàng)目描述徙瓶、作者毛雇、打包方式、是否使用ESLint規(guī)范代碼等等侦镇，根據(jù)需要自行考慮yes還是no）即可完成創(chuàng)建
創(chuàng)建項(xiàng)目并輸入相關(guān)信息.png -
創(chuàng)建成功后灵疮，項(xiàng)目文件目錄如下所示
項(xiàng)目文件目錄.png
vue-test
├── build/ # 腳本目錄：webpack 編譯任務(wù)配置文件:(開發(fā)環(huán)境與生產(chǎn)環(huán)境)
│ └── ...
├── config/ # 配置目錄
│ ├── index.js # 項(xiàng)目核心配置
│ └── ...
├ ── node_module/ # 依賴的node工具包目錄：項(xiàng)目中安裝的依賴模塊
├── src/ # 源碼文件目錄：自己的項(xiàng)目文件都需要放到 src 文件夾下
│ ├── main.js # 程序入口JS文件
│ ├── App.vue # 程序入口vue組件
│ ├── components/ # 組件目錄
│ │ └── ...
│ └── assets/ # 資源文件目錄：一般放一些靜態(tài)資源文件
│ └── ...
├── static/ # 靜態(tài)資源文件目錄 (直接拷貝到dist/static/里面)
├── test/ # 測試文件目錄
│ └── unit/ # 單元測試
│ │ ├── specs/ # 測試規(guī)范
│ │ ├── index.js # 測試入口文件
│ │ └── karma.conf.js # 測試運(yùn)行配置文件
│ └── e2e/ # 端到端測試
│ │ ├── specs/ # 測試規(guī)范
│ │ ├── custom-assertions/ # 端到端測試自定義斷言
│ │ ├── runner.js # 運(yùn)行測試的腳本
│ │ └── nightwatch.conf.js # 運(yùn)行測試的配置文件
├── .babelrc # babel 配置文件
├── .editorconfig # 編輯配置文件
├── .eslintignore #
├── .eslintrc.js # ES語法檢查配置
├── .gitignore # 用來過濾一些版本控制的文件，比如node_modules文件夾
├── .postcssrc.js #
├── index.html # 入口頁面
├── package.json # 項(xiàng)目描述文件：記載著一些命令和依賴還有簡要的項(xiàng)目描述信息
├── package-lock.json #
└── README.md #介紹自己這個(gè)項(xiàng)目的壳繁，可參照 github上star多的項(xiàng)目始藕。
dist : 打包輸出目錄蒲稳，只需部署這個(gè)目錄到生產(chǎn)環(huán)境。
(2) 安裝項(xiàng)目依賴：在項(xiàng)目所在路徑下伍派，輸入命令cnpm install
因?yàn)樽詣?dòng)構(gòu)建過程中已存在package.json文件江耀，所以這里直接安裝依賴就行。
(3) 啟動(dòng)項(xiàng)目（啟動(dòng)開發(fā)環(huán)境）：在項(xiàng)目所在路徑下诉植，輸入命令npm run dev來啟動(dòng)開發(fā)環(huán)境
備注：執(zhí)行cnpm run dev命令后祥国，瀏覽器會(huì)自動(dòng)打開默認(rèn)網(wǎng)址展示“歡迎頁面”，若沒有自動(dòng)打開晾腔，原因可能是目錄中config下的index.js文件中autoOpenBrowser的值是false舌稀，改為true就能自動(dòng)打開了。
(4) 打開默認(rèn)網(wǎng)址
若默認(rèn)網(wǎng)址沒有加載出頁面灼擂，有可能是本地的 8080 端口被占用了（默認(rèn)服務(wù)啟動(dòng)的是本地的8080端口）壁查，可參考解決端口占用問題將占用8080端口的進(jìn)程殺死，或通過修改配置文件 config>index.js里的端口號來解決剔应。
修改默認(rèn)端口號.png
4. 項(xiàng)目打包（打包生產(chǎn)環(huán)境的代碼）并上線部署
項(xiàng)目開發(fā)完成之后睡腿，輸入
npm run build來打包生產(chǎn)環(huán)境的代碼，打包成功會(huì)生成dist文件夾（里面有index.html文件和static文件夾）峻贮；項(xiàng)目上線時(shí)席怪，只需要將 dist 文件夾放到服務(wù)器就行了。
備注：Vue項(xiàng)目創(chuàng)建(使用Vue腳手架工具)纤控、啟動(dòng)并打包部署 類似 Angular項(xiàng)目創(chuàng)建(使用Angular腳手架工具)挂捻、啟動(dòng)到打包部署，可對比學(xué)習(xí)船万。
