最近一段時(shí)間vue js非常流行，伴隨著vue2.0版本的發(fā)布，一套前端基于node環(huán)境下的自動(dòng)化環(huán)境構(gòu)建方法隨之出現(xiàn)，自己最近嘗試用vue-cli著構(gòu)建一個(gè)基于vue的環(huán)境，我盡可能的將每一個(gè)知識(shí)點(diǎn)講清楚
1、npm:引自百度百科
? ? ? NPM是隨同NodeJS一起安裝的包管理工具，能解決NodeJS代碼部署上的很多問(wèn)題，常見(jiàn)的使用場(chǎng)景有以下幾種：1、允許用戶從NPM服務(wù)器下載別人編寫的第三方包到本地使用。2、允許用戶從NPM服務(wù)器下載并安裝別人編寫的命令行程序到本地使用。3、允許用戶將自己編寫的包或命令行程序上傳到NPM服務(wù)器供別人使用
? ? ? 我的理解就是npm是一個(gè)基于命令行的形式來(lái)進(jìn)行軟件的下載和上傳? 很方便，免去了我們?nèi)サ焦倬W(wǎng)上去下載。一般我們只需要下載安裝nodejs即可，里面包含有npm，下載安裝完成之后記得配置環(huán)境變量，這個(gè)就不詳細(xì)說(shuō)了
2、vue-cli
概念：我的理解就是一個(gè)官方的腳手架，下載安裝這個(gè)之后你可以通過(guò)簡(jiǎn)單的幾個(gè)命令就能搭建一個(gè)基于node環(huán)境的一個(gè)前端項(xiàng)目，由于新版的vue-cli已經(jīng)集成了webpack 所以下載了這個(gè)腳手架之后就不需要在下載webpack了

言歸正傳，我來(lái)說(shuō)說(shuō)自己搭建的一個(gè)流程吧，其中也會(huì)遇到好多問(wèn)題，都是一步一步百度查看的，血淚啊 哈哈~~

1、在已經(jīng)下載安裝了node js后，我們要把下載的包（或者說(shuō)是文件）安裝在哪里了，比如我執(zhí)行npm install vue-cli? 安裝成功后我該在哪里找到他了，如果我們沒(méi)有對(duì)npm的配置進(jìn)行自己的設(shè)置，那么他默認(rèn)情況下就會(huì)在當(dāng)前目錄下找node_modules 這個(gè)目錄，然后把下載下來(lái)的包放在這里面，突然感覺(jué)這樣有點(diǎn)亂，不好管理，所以開(kāi)始的時(shí)候就更改npm的默認(rèn)安裝目錄，設(shè)置方法如下

如下圖，我想把以后下載全局安裝的包就放在node目錄下? ，創(chuàng)建兩個(gè)文件 node_cache 和node_global?

,然后進(jìn)入cmd中執(zhí)行 ?

npm config set prefix "XXX\nodejs\node_global"
npm config set cache "XXX\nodejs\node_cache"
兩個(gè)命令后 你可以通過(guò) npm config list 來(lái)查看你剛剛更改的配置

執(zhí)行完這個(gè)步驟之后接下來(lái)我們要進(jìn)行環(huán)境變量的配置了，如果這不沒(méi)有操作的話，會(huì)影響到之后的許多操作哦，所以這部很重要

打開(kāi)環(huán)境變量配置界面，

新建NODE_PATH：D:\Program Files\nodejs\node_global\node_modules 這個(gè)就是我們開(kāi)始創(chuàng)建用來(lái)存全局安裝包的目錄 然后在系統(tǒng)變量下進(jìn)行如下配置
找到path變量 增加一個(gè)配置 D:\Program Files\nodejs\node_global\
ok，執(zhí)行完上面幾個(gè)步驟之后接下來(lái)我們就可以使用npm進(jìn)行包的安裝
? ? ? ?我在使用npm的時(shí)候發(fā)現(xiàn)如果我們用他默認(rèn)的服務(wù)器地址的話 下載的速度太慢 因?yàn)榉?wù)器是在國(guó)外哈? ，一般的解決方法是安裝一個(gè)淘寶鏡像，但是我嫌麻煩，我直接把npm的服務(wù)地址改成淘寶這塊的效果是一樣的 下載速度很快，具體配置如下，進(jìn)入cmd 輸入 npm config set registry "https://registry.npm.taobao.org" ?，設(shè)置完成之后 我們就可以使用淘寶的服務(wù)了 速度很快的。
1.開(kāi)始安裝vue-cli
執(zhí)行 npm install vue-cli -g 命令 這時(shí)候npm就開(kāi)始下載

安裝完成之后，執(zhí)行vue -V 記得哦 v是大寫的 這時(shí)候會(huì)出現(xiàn)相應(yīng)的版本號(hào)，這代表你已經(jīng)安裝成功了，如果提示該方法不是系統(tǒng)命令，說(shuō)明之前環(huán)境變量配的有問(wèn)題，好好檢查下
2、利用腳手架vue-cli進(jìn)行項(xiàng)目模塊的搭建
首先創(chuàng)建一個(gè)用來(lái)存放項(xiàng)目的文件夾，然后進(jìn)入cmd命令界面 進(jìn)行如下操作

vue init webpack +你的項(xiàng)目名字

執(zhí)行以上命令后會(huì)讓你填寫項(xiàng)目的一些信息 這個(gè)是我自己填寫的 ?大家可以先按照這樣來(lái)寫，英文很簡(jiǎn)單，我就不一一解釋了

3.按照vue-cli的提示一步一步進(jìn)行操作，其中有可能會(huì)出現(xiàn)問(wèn)題，我用的是window7 系統(tǒng)，然后我在進(jìn)行npm install 的時(shí)候會(huì)出現(xiàn)下面這個(gè)問(wèn)題

我也是搞了半天，百度了一下 發(fā)現(xiàn)這個(gè)是window7特有的問(wèn)題? 解決方法如下
npm install phantomjs-prebuilt@2.1.15 --ignore-scripts?

ok，執(zhí)行完成之后整個(gè)項(xiàng)目算是搭建完成了，我來(lái)運(yùn)行下進(jìn)入我們剛剛創(chuàng)建的項(xiàng)目目錄下
即webpack 后你的項(xiàng)目文件
cmd中執(zhí)行 npm run start? 然后打開(kāi)瀏覽器，輸入localhost:8080 這樣就可以看到如下效果了

然后項(xiàng)目目錄如下

好了，希望我這個(gè)能幫助新手少走彎路 ?手好酸哦 哈哈