create by db on 2019-1-10 16:28:10
Recently revised in 2019-1-14 23:19:07
Hello 小夥伴們，如果覺得本文還不錯，麻煩點個贊或者給個 star，你們的贊和 star 是我前進的動力！GitHub 地址
查閱網上諸多資料，並結合自己的學習經驗，寫下這篇Vue2.0學習筆記，以記錄自己的學習心得。現分享給大家，以供參考。
作為一隻前端菜鳥，這是我掘金分享的第四篇文章。如有不足，還請多多指教，謝謝大家。
前言
作為一款前端框架，Vue 因其易上手，輕量級，受到廣泛的應用。
vue-cli作為Vue的腳手架工具，整合了webpack環境及主要依賴，只需要幾分鐘的時間就可以執行起來一個專案。對於專案的搭建、打包、維護管理等都非常方便快捷。
此筆記旨在幫助Vue小白瞭解Vue2.0專案搭建過程，希望能幫到大家。
參考文獻：
- vue-cli搭建專案 | 思否-villelee
- windows下搭建vue開發環境 | 充電實踐
- 十分鐘上手-搭建vue開發環境（新手教程） | 簡書-祈澈菇涼
- vue-cli入門（一）——專案搭建 | 思否-Reachel
另：個人以為，學習vue最好的途徑還是官方文件
正文
搭建Vue開發環境
1、安裝node
Vue專案通常通過webpack工具來構建，而webpack命令的執行是依賴node.js的環境的，所以首先要安裝node.js。node.js的官方地址為：https://nodejs.org/en/download/，下載相應版本
安裝好node之後，以管理員身份開啟cmd管理工具，，輸入 node -v，回車，檢視node版本號，出現版本號則說明安裝成功。
node -v
2、安裝淘寶npm映象
由於npm是國外的，使用起來比較慢，我們這裡使用淘寶的cnpm映象來安裝vue.
淘寶的cnpm命令管理工具可以代替預設的npm管理工具。
輸入以下命令，回車；
npm install -g cnpm --registry=https://registry.npm.taobao.org
3、安裝全域性vue-cli腳手架
vue-cli是vue官方提供的一個命令列工具，可用於快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置，帶來現代化的前端開發流程。只需一分鐘即可啟動帶熱過載、儲存時靜態檢查以及可用於生產環境的構建配置的專案。
淘寶映象安裝成功之後，我們就可以安裝全域性vue-cli腳手架。
輸入以下命令，回車；
cnpm install --global vue-cli
驗證是否安裝成功，在命令列輸入vue -V，出來vue的版本號，則說明安裝成功；
建立vue專案
1、通過vue-cli建立一個vue專案
進入你需要建立在專案的資料夾，開啟命令列。
輸入以下命令，回車
vue init webpack test
這裡test指的是專案名，該命令執行後會建立一個名為test的目錄，也就是我們所搭建的專案。
接下來會要求你進行一些選項設定，其實就是初始化專案：
? Project name (test) // 專案名稱，按Enter確定就好
? Project name test
? Project description (A Vue.js project) // 專案描述，按Enter確定就好
? Project description A Vue.js project
? Author (villelee) // 作者，按Enter確定就好
? Author villelee
? Vue build (Use arrow keys) // 開始選項設定，按Enter確定就好
? Vue build standalone
? Install vue-router? (Y/n) Y // 安裝路由，需要的話可以選Y，不需要就選n
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) Y // 是否使用ESlint統一程式碼風格，編碼規範，建議選Y
? Use ESLint to lint your code? Yes
? Pick an ESLint preset (Use arrow keys)
> Standard (https://github.com/standard/standard)
? Pick an ESLint preset Airbnb
? Set up unit tests (Y/n) n // 是否安裝單元測試
? Set up unit tests No
? Setup e2e tests with Nightwatch? (Y/n) n // 是否安裝e2e測試編碼規範
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
? Should we run `npm install` for you after the project has been created? (recom
mended) npm
vue-cli · Generated "test".
複製程式碼最後出現如下程式碼
To get started:
cd test
npm run dev
複製程式碼說明已經初始化成功，vue-cli已經將專案搭建完成。
2、進入你的專案資料夾
專案搭建好了，現在就可以進入專案資料夾。
輸入以下命令，回車進入新建的專案。
cd test
3、通過cnpm在專案裡安裝依賴
因為各個模板之間都是相互依賴的，所以現在我們要安裝依賴。
輸入以下命令，回車安裝依賴
cnpm install
4、啟動專案
一切環境依賴安裝準備就緒，我們來測試一下自己新建的vue專案的執行情況。
輸入以下命令，回車啟動專案
npm run dev
結果會彈出一個瀏覽器訪問地址預設為localhost:8080，如下：
$ npm run dev
> test@1.0.0 dev D:\ptest\test
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
95% emitting DONE Compiled successfully in 5547ms11:59:13
I Your application is running here: http://localhost:8080
複製程式碼 在瀏覽器中開啟http://localhost:8080，就能看到你的專案了
專案打包
執行npm run build
執行後打包成功會在專案中生成dist資料夾
部署伺服器是把資料夾中的檔案丟上伺服器即可
總結
至此，我們的Vue專案就搭建完成了。萬里長征第一步，加油！
如需進一步瞭解關於vue專案結構的基礎知識，請戳Vue小白課（二）——專案結構解析（Vue2.x）
路漫漫其修遠兮，與諸君共勉。
祝大家2019更上一層樓！
後記：Hello 小夥伴們，如果覺得本文還不錯，記得點個贊或者給個 star，你們的贊和 star 是我編寫更多更豐富文章的動力！GitHub 地址
db 的文件庫 由 db 採用 知識共享 署名-非商業性使用-相同方式共享 4.0 國際 許可協議進行許可。
基於github.com/danygitgit上的作品創作。
本許可協議授權之外的使用許可權可以從 creativecommons.org/licenses/by… 處獲得。