- 開始之前
相信大家在vue官網(wǎng)上（https://cn.vuejs.org/ ）學(xué)習(xí)完vue的一些基礎(chǔ)教程后，都蠢蠢欲動想要開始做點(diǎn)什么了吧，正如官網(wǎng)所說，前提是已經(jīng)了解過vue的基礎(chǔ)語法，核心思想，vue-loader，vue-router等基礎(chǔ)知識之后我們再開始使用腳手架vue-cli，這樣會有更好的體驗和成長，畢竟不能一口吃成胖子嘛。在我們開始構(gòu)建自己的Vue應(yīng)用時使用vue-cli腳手架是很有必要的，因為vue-cli中已經(jīng)為我們準(zhǔn)備了大部分我們會用到的工具，我們可以選擇不同類型的腳手架快速構(gòu)建不同的應(yīng)用。
- 別廢話，我只想來點(diǎn)實(shí)際的
首先我們得安裝npm來下載vue-cli，還沒下載npm的朋友最好下載nodeJs吧，安裝包里包含了npm。
nodeJ下載地址：https://nodejs.org/zh-cn/
接著進(jìn)入正題，打開cmd命令行，全局下載vue-cli，輸入：
npm install --global vue-cli
安裝完成后，切換到自己的項目路徑，開始初始化基于vue-cli的項目。 首先我們輸入vue list后可以看到vue-cli為我們創(chuàng)建項目提供了多個模板，其中有webpack完整版簡易版， browserify完整版簡易版，pwa漸進(jìn)式web框架和單純的vue配置模板：
我們以webpack為例，輸入：
vue init webpack myproject
myproject 項目名字自己取，接下來是安裝流程：
Project name (myproject) 括號中是默認(rèn)選項，你可以修改也可以直接回車確認(rèn)
Project description (A Vue.js project)項目描述，也可以直接回車跳過
Author (xxxxx)作者名稱
Runtime + Compiler: recommended for most users 運(yùn)行加編譯（推薦選項）
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 僅運(yùn)行時
選擇運(yùn)行時編譯的原因，可以翻回官網(wǎng)文檔： https://cn.vuejs.org/v2/guide/installation.html#運(yùn)行時-編譯器-vs-只包含運(yùn)行時
Install vue-router? (Y/n) 是否安裝vue-route，建議選擇Y，vue路由大多情況下都會使用上，特別是構(gòu)建單頁面應(yīng)用的時候。
Use ESLint to lint your code? (Y/n)是否使用ESlint來管理你的代碼風(fēng)格，建議選擇Y，養(yǎng)成良好的代碼風(fēng)格很重要，至于選擇哪種風(fēng)格因人而異（Standard，AirBNB，none），我一般使用Standard標(biāo)準(zhǔn)。
Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試，Y
Setup e2e tests with Nightwatch?(Y/n)是否安裝e2e測試，Y
安裝完成，接下來按照提示所說的指令輸入，即可完成構(gòu)建。
進(jìn)入我的項目
cd myproject
安裝所有的依賴模塊，這個過程相當(dāng)漫長，因為npm是國外服務(wù)器，我們可以選擇使用國內(nèi)npm鏡像資源，例如淘寶的，參考文章：http://riny.net/2014/cnpm/
npm install
構(gòu)建完成后，我們可以去run一下，看一下運(yùn)行后的效果：
npm run dev
此時會彈出我們項目頁面：
現(xiàn)在我們就可以進(jìn)行項目開發(fā)啦，開發(fā)過程中頁面會實(shí)時進(jìn)行渲染更新。
當(dāng)我們需要打包項目的時候，可以輸入：
npm run build
打包完成后，目錄中會生成一個dist文件夾，這個就是我們最后的項目輸出成品啦。
本文到這里就結(jié)束啦~
有疑問的話隨時可以在下方評論哦，假如覺得這篇文章能幫助到你的話就給我點(diǎn)個“喜歡”唄 : )
