最近一段時間vue js非常流行雅潭，伴隨著vue2.0版本的發(fā)布曙博，一套前端基于node環(huán)境下的自動化環(huán)境構建方法隨之出現(xiàn)，自己最近嘗試用vue-cli著構建一個基于vue的環(huán)境，我盡可能的將每一個知識點講清楚
1匆背、npm:引自百度百科
? ? ? NPM是隨同NodeJS一起安裝的包管理工具蒜危，能解決NodeJS代碼部署上的很多問題虱痕，常見的使用場景有以下幾種：1、允許用戶從NPM服務器下載別人編寫的第三方包到本地使用辐赞。2部翘、允許用戶從NPM服務器下載并安裝別人編寫的命令行程序到本地使用。3响委、允許用戶將自己編寫的包或命令行程序上傳到NPM服務器供別人使用
? ? ? 我的理解就是npm是一個基于命令行的形式來進行軟件的下載和上傳? 很方便新思，免去了我們去到官網上去下載。一般我們只需要下載安裝nodejs即可赘风，里面包含有npm夹囚，下載安裝完成之后記得配置環(huán)境變量，這個就不詳細說了
2邀窃、vue-cli
概念：我的理解就是一個官方的腳手架荸哟，下載安裝這個之后你可以通過簡單的幾個命令就能搭建一個基于node環(huán)境的一個前端項目，由于新版的vue-cli已經集成了webpack 所以下載了這個腳手架之后就不需要在下載webpack了
言歸正傳瞬捕，我來說說自己搭建的一個流程吧敲茄，其中也會遇到好多問題，都是一步一步百度查看的山析，血淚啊 哈哈~~
1堰燎、在已經下載安裝了node js后，我們要把下載的包（或者說是文件）安裝在哪里了笋轨，比如我執(zhí)行npm install vue-cli? 安裝成功后我該在哪里找到他了秆剪，如果我們沒有對npm的配置進行自己的設置，那么他默認情況下就會在當前目錄下找node_modules 這個目錄爵政，然后把下載下來的包放在這里面仅讽，突然感覺這樣有點亂，不好管理钾挟，所以開始的時候就更改npm的默認安裝目錄洁灵，設置方法如下
如下圖，我想把以后下載全局安裝的包就放在node目錄下? ，創(chuàng)建兩個文件 node_cache 和node_global?
,然后進入cmd中執(zhí)行 ?
npm config set prefix "XXX\nodejs\node_global"
npm config set cache "XXX\nodejs\node_cache"
兩個命令后 你可以通過 npm config list 來查看你剛剛更改的配置
執(zhí)行完這個步驟之后接下來我們要進行環(huán)境變量的配置了徽千，如果這不沒有操作的話苫费，會影響到之后的許多操作哦，所以這部很重要
打開環(huán)境變量配置界面双抽，
新建NODE_PATH：D:\Program Files\nodejs\node_global\node_modules 這個就是我們開始創(chuàng)建用來存全局安裝包的目錄 然后在系統(tǒng)變量下進行如下配置
找到path變量 增加一個配置 D:\Program Files\nodejs\node_global\
ok百框，執(zhí)行完上面幾個步驟之后接下來我們就可以使用npm進行包的安裝
? ? ? ?我在使用npm的時候發(fā)現(xiàn)如果我們用他默認的服務器地址的話 下載的速度太慢 因為服務器是在國外哈? ，一般的解決方法是安裝一個淘寶鏡像牍汹，但是我嫌麻煩铐维，我直接把npm的服務地址改成淘寶這塊的效果是一樣的 下載速度很快，具體配置如下慎菲，進入cmd 輸入 npm config set registry "https://registry.npm.taobao.org" ?嫁蛇，設置完成之后 我們就可以使用淘寶的服務了 速度很快的。
1.開始安裝vue-cli
執(zhí)行 npm install vue-cli -g 命令 這時候npm就開始下載
安裝完成之后露该，執(zhí)行vue -V 記得哦 v是大寫的 這時候會出現(xiàn)相應的版本號睬棚，這代表你已經安裝成功了，如果提示該方法不是系統(tǒng)命令有决，說明之前環(huán)境變量配的有問題闸拿，好好檢查下
2、利用腳手架vue-cli進行項目模塊的搭建
首先創(chuàng)建一個用來存放項目的文件夾书幕，然后進入cmd命令界面 進行如下操作
vue init webpack +你的項目名字
執(zhí)行以上命令后會讓你填寫項目的一些信息 這個是我自己填寫的 ?大家可以先按照這樣來寫新荤，英文很簡單，我就不一一解釋了
3.按照vue-cli的提示一步一步進行操作台汇，其中有可能會出現(xiàn)問題苛骨，我用的是window7 系統(tǒng)，然后我在進行npm install 的時候會出現(xiàn)下面這個問題
我也是搞了半天苟呐，百度了一下 發(fā)現(xiàn)這個是window7特有的問題? 解決方法如下
npm install phantomjs-prebuilt@2.1.15 --ignore-scripts?
ok痒芝，執(zhí)行完成之后整個項目算是搭建完成了，我來運行下進入我們剛剛創(chuàng)建的項目目錄下
即webpack 后你的項目文件
cmd中執(zhí)行 npm run start? 然后打開瀏覽器牵素，輸入localhost:8080 這樣就可以看到如下效果了
然后項目目錄如下
好了严衬，希望我這個能幫助新手少走彎路 ?手好酸哦 哈哈
