三個(gè)概念

• npm：Nodejs下的包管理器。
• webpack：它主要的用途是通過(guò)CommonJS的語(yǔ)法把所有瀏覽器端需要發(fā)布的靜態(tài)資源做相應(yīng)的準(zhǔn)備，比如資源的合并和打包。
• vue-cli：用戶生成Vue工程模板。

一。下載安裝node

Node.js官網(wǎng)https://nodejs.org/en/。
本次安裝目錄為D:\nodejs。安裝后目錄如下：

1. 檢查安裝是否正常

進(jìn)入cmd輸入指令 echo %PATH%，如果已經(jīng)存在nodejs的安裝路徑，則安裝正常。還可以查看node的版本(node -v)和npm的版本(npm -v)

2. 創(chuàng)建npm本地倉(cāng)庫(kù)

在nodejs目錄下新建兩個(gè)目錄：node_cache 和 node_global

然后運(yùn)行以下2條命令
npm config set prefix “D:\nodejs\node_global”
npm config set cache “D:\nodejs\node_cache”
再運(yùn)行 npm list -global 查看目錄，可以看到目錄已經(jīng)改變了，目前為空。

注意：安裝后可能提示node或npm或vue不是內(nèi)部或外部命令，也不是可運(yùn)行的程序或批處理文件，關(guān)掉cmd命令行重新打開(kāi)即可

3. 配置鏡像站

輸入命令 npm config set registry=http://registry.npm.taobao.org，配置一個(gè)鏡像站，提升速度。
輸入命令 npm config list 顯示所有配置信息：

檢查一下鏡像站行不行：npm config get registry
看看能否獲得vue的信息：npm info vue

4.下載模塊

輸入指令 npm install npm -g 升級(jí)npm模塊。
再次查看global里面有什么模塊：npm list -global，發(fā)現(xiàn)已經(jīng)不為空了。

二。安裝vue

npm安裝vue.js：npm install vue -g
npm安裝vue-router：npm install vue-router -g
安裝vue腳手架：npm install vue-cli -g

1. 查看vue

輸入vue指令會(huì)提示 vue’ 不是內(nèi)部或外部命令，也不是可運(yùn)行的程序或批處理文件，原因是vue腳本不在path環(huán)境變量中，在自定義的global目錄下。
所以打開(kāi)環(huán)境變量編輯系統(tǒng)變量path，添加一個(gè) D:\nodejs\node_global：

重新查看 vue 和 vue -V：

2. 使用vue-cli搭建項(xiàng)目

進(jìn)入到D盤，切換到想要存放項(xiàng)目的根目錄，使用 vue init webpack vue01指令搭建項(xiàng)目：（vue01為自定義的項(xiàng)目名）

出現(xiàn)黃色的兩條指令說(shuō)明搭建成功了：

按照指令提示，進(jìn)入項(xiàng)目目錄 cd vue01，安裝npm npm install：

成功后使用指令 npm run dev 來(lái)運(yùn)行vue項(xiàng)目：

出現(xiàn) http://localhost:8080 說(shuō)明運(yùn)行成功。進(jìn)入這個(gè)網(wǎng)址就可看到自己的項(xiàng)目了。