只是轉(zhuǎn)載攘残，怕找不到救欧，轉(zhuǎn)載自http://www.reibang.com/p/de3cf460e792? 作者路萬奇與青川君
利用 Vue cli 腳手架工具快速創(chuàng)建 工程化的 Vue 項(xiàng)目
前置要求
首先你的電腦上需要安裝 node 和 npm
node 可以在 node.js 官網(wǎng)磷杏，按照你的系統(tǒng)版本劫流，按需下載难衰，非常方便钦无，所以這里就不再多啰嗦啦！
npm是全球都在用的前端資源倉(cāng)庫(kù)８窍（這是我對(duì)它的稱呼失暂，哈哈！）
npm 對(duì)于前端開發(fā)者來說是取之不盡用之不竭的寶庫(kù)鳄虱，你會(huì)從其他大神所開發(fā)的開源組件中學(xué)到很多知識(shí)和技巧弟塞！
不僅僅 vue 的全家桶套裝都有在 npm 上，更是因?yàn)閷W(xué)會(huì)使用 npm 對(duì)一個(gè)前端開發(fā)者來說是必備技能拙已，所以趕快 Get 吧决记！
npm install -g vuenpm install -g @vue/cli
-g 選項(xiàng)是什么意思？
-g 指的是 global 倍踪，意思是全局安裝系宫，即不只在你的開發(fā)項(xiàng)目文件夾那一個(gè)小小的封閉環(huán)境里安裝，是在你電腦的整個(gè) npm 環(huán)境中安裝哦建车！
由于我們要使用最新的 vue cli 腳手架工具扩借，而官方的提示已經(jīng)不推薦
npm install -g vue-cli
這個(gè)庫(kù)的安裝方式了。所以我們選擇官方提示的 @vue/cli 吧癞志！
WebStorm 與 Visual Studio 選誰呢往枷？
眾所周知，WebStorm 是一個(gè)非常棒的 IDE 開發(fā)工具凄杯，它的優(yōu)點(diǎn)就在于它很全面错洁，什么框架的東西它都會(huì)首先去適配去支持...? 當(dāng)然，Vue作者尤雨溪也推薦使用 Visual Studio Code...
所以其實(shí)二者都是不錯(cuò)的選擇戒突，看你更喜歡豐富強(qiáng)壯的IDE 還是 輕便快捷的 文本編輯器啦屯碴！
然而在 Vue CLi 這件事情上... 它做的也太絕了吧！
它居然自己把 Vue CLi 工具 集成到了軟件界面里膊存！不過對(duì)使用它的人來說這是非常方便的... 但作為博客展示就不太好看了...
所以导而，我們還是選擇了用 Visual Studio Code + PowerShell ( Linux 平臺(tái)下用終端 shell 也是一樣的 ) 展示如何在命令行界面下用 Vue CLi 腳手架工具初始化一個(gè) 工程化的 Vue 項(xiàng)目。
Vue Cli 配置各個(gè)選項(xiàng)怎么填隔崎？
Step 1：通過 Visual Studio Code打開一個(gè)文件夾今艺，并打開 PowerShell 終端
如果你已經(jīng)完成了之前前置要求的配置，那么此時(shí)你應(yīng)該可以使用 vue 命令選項(xiàng)了爵卒。
在終端中輸入：
vue create your_project_name
" your_project_name " 就是你想設(shè)置的項(xiàng)目文件夾名虚缎，這個(gè)文件夾將會(huì)由 Vue CLi 工具來創(chuàng)建
start_new_fromCLI.png
Step 2：第一項(xiàng)，不選取默認(rèn)設(shè)置钓株，我們一步步自己來配置实牡；
將箭頭移動(dòng)到 Manually select features 然后回車陌僵；
select_manually_toSetUp.png
Step 3：第二項(xiàng)，來選一下我們將為我們的項(xiàng)目引入那些 工具创坞、組件包：
用空格來選擇需要的組件包碗短，Babel 和 Linter / Formatter 是默認(rèn)選好的，那我們也就不動(dòng)它們了题涨。
我們選擇一下三項(xiàng)：
Router： Vue 全家桶中的路由工具偎谁，是學(xué)習(xí) Vue 時(shí)一定要學(xué)的一環(huán)。
Vuex： Vue 全家桶中的狀態(tài)管理工具携栋，也是必學(xué)的工具之一搭盾。
CSS Pre-processors： css 的預(yù)處理工具；
import_tools.png
Step 4：接下來婉支，我們將繼續(xù)對(duì)我們選擇的這些工具組件進(jìn)行一下配置選項(xiàng)的選擇：
那么先是關(guān)于 Router 的：
yes_for_routerHistory.png
?? ? ? ? 該項(xiàng)詢問：是否使用歷史模式鸯隅？此處我們選擇：Yes就好啦 ~
Step 5：然后是選擇采用哪種 CSS 預(yù)處理裝置；
choose_SASS-SCSS.png
?? ? ? ? 我們?cè)谶@里選擇 Sass / SCSS 向挖；
Step 6：之后我們選擇 ESLint 的模式：
choose_Airbnb_ESLint.png
對(duì)于 ESLint 模式蝌以，我接觸的教程都比較推薦：Airbnb或者是Standard模式。
Step 7：最后我們選擇
是在保存時(shí)進(jìn)行語法檢查
是在 commit 提交時(shí)進(jìn)行語法檢查和修正
choose_ESLintWhenSave.png
此處我們選擇 **保存時(shí) 進(jìn)行語法檢查**
Step 8：工具的選項(xiàng)配置完成了何之，vue CLi 會(huì)詢問：是否保存你此次的配置跟畅？
請(qǐng)一定選擇 No！因?yàn)楸４嬉馕吨窈笏械?vue cli 都將以此來配置項(xiàng)目了溶推！
no_forSaveCLICofig.png
之后就是等待了... ...
如果網(wǎng)絡(luò)情況不好徊件，沒有架設(shè)梯子，下載太慢甚至卡掉了的話蒜危，不妨切換到淘寶 npm 國(guó)內(nèi)鏡像源會(huì)快一些虱痕。
CLIloadingNpmInstall.png
因?yàn)槲覀兪窃谟?VS Code 打開的這個(gè)文件夾目錄下進(jìn)行的創(chuàng)建，所以此時(shí)左側(cè)的文件夾視圖中會(huì)出現(xiàn)你剛才輸入的項(xiàng)目文件夾名辐赞，打開之后部翘，你將發(fā)現(xiàn)是以下這樣的目錄結(jié)構(gòu)：
CLIFinished.png
目錄中有很多都是 項(xiàng)目開發(fā)完成后 打包時(shí)的一些打包工具的配置文件，暫時(shí)我們不做介紹响委；
但是 packge.json 是必須要了解的新思，它存放了本項(xiàng)目最基本也是最重要的一些包依賴信息：我們打開看一看：
open_packageJSON.png
此處的 version 是 npm 為你的項(xiàng)目初始化了一個(gè)版本號(hào)，一般都是從這樣一個(gè) 0.1.0 開始的赘风；
dependencies：是本項(xiàng)目必須依賴的組件夹囚、工具包。無論開發(fā)環(huán)境還是生產(chǎn)環(huán)境邀窃。
同樣是 dependencies崔兴，但下面這一個(gè) 加了一個(gè) dev 在前面：
這是在開發(fā)時(shí)我們需要用到的組件、工具。比如一些打包程序敲茄，在生產(chǎn)環(huán)境當(dāng)然是不用的
然后就是 最重要的三個(gè)命令啦！：
serve ：進(jìn)行開發(fā)環(huán)境的運(yùn)行山析，并且 vue 是支持熱加載的堰燎，你的代碼內(nèi)容一更改，頁(yè)面內(nèi)容就會(huì)相應(yīng)地立刻做出反應(yīng)笋轨，發(fā)生改變秆剪。
bulid ：進(jìn)行打包，然后會(huì)在根目錄生成一個(gè)dist文件夾爵政，里面是 index.html 和 打包好的 css仅讽、js 文件，你的 vue 項(xiàng)目就可以很容易地發(fā)布到服務(wù)器了 ~ 據(jù)此我們之后還會(huì)有比較詳細(xì)的部署發(fā)布教程 ...
lint ：進(jìn)行項(xiàng)目代碼內(nèi)容的語法檢查 钾挟。
那么現(xiàn)在我們就把項(xiàng)目 跑起來 試一下吧洁灵！
runSERVEdone.png
等待 出現(xiàn) 編譯成功 ( Compiled successfully ... ) 和 DONE 的字樣時(shí)，就可以按照提示的地址掺出，在瀏覽器中看到初始化好的 Vue 示例項(xiàng)目了徽千！
作者：路萬奇與青川君
鏈接：http://www.reibang.com/p/de3cf460e792
來源：簡(jiǎn)書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)汤锨，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處双抽。
