win10下安裝，使用管理員身份進行，否則會有許可權限制。（如果執行失敗，動了一些不知道的東西，就把node js解除安裝掉，從第一步重新裝）

1.安裝nodejs，自帶npm環境。

npm -v 檢視是否成功

2.node有自帶的npm，可以直接在cmd中，找到nodeJs安裝的路徑下，進行命令列全域性安裝vue-cli。

（npm install --global vue-cli）

----想安裝速度快點，可以使用淘寶映象如下

----命令提示符執行 

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
 

　 注意：安裝完後最好檢視其版本號cnpm -v或關閉命令提示符重新開啟，安裝完直接使用有可能會出現錯誤；

3. 安裝 cnpm 和 vue-cli

安裝好了 node，我們可以直接全域性安裝 vue-cli：

npm install -global vue-cli

如果安裝失敗，可以使用 npm cache clean 清理快取,如果報錯，後面加--force強制執行，然後再重新輸入上述命令進行安裝。

如果在後面的安裝過程中，如有安裝失敗的情況，也需要先清理快取:npm cache clean --force。

這時候我再用 cnpm -v 檢視還是沒有成功，提示：cmd命令下cnpm顯示不是內部命令

開始按網上說的步驟，實測配置了環境變數，更改全域性路徑，就成功了，浪費了一天半的時間。(⊙o⊙)…我是win 10 system）

在NodeJs下建立“node_global”及“node_cache”兩個資料夾

npm config set prefix "c:\Program Files\nodejs\node_global"  #修改npm全域性目錄

npm config set cache "c:\Program Files\nodejs\node_cache"

下面這一步非常關鍵，我們需要設定系統變數。進入我的電腦→屬性→高階→環境變數。在系統變數下新建“NODE_PATH”，輸入“C:\Program Files\nodejs\node_global\node_modules”

  (1開啟命令列，輸入path，看到有已經配置好的環境路徑

  (2) 輸入node -v ，有Node.js的版本號。輸入npm -v  ，也有版本號。證明安裝和配置環境成功。

 (3)npm cache clean --force

 (5)配置cnpm：在命令列中輸入前確保是adminstrator 身份執行cmd。

npm install -g cnpm --registry=https://registry.npm.taobao.org

配置完成後輸入cnpm -v ，有cnpm版本號輸出，結果如下，

並且在D盤nodejs資料夾下的node_global的node_modules資料夾下有一個cnpm資料夾，證明配置cnpm成功

注意事項：

（1）在安裝過程中沒有安裝成功大多是許可權問題，只要用管理員身份來執行安裝檔案或者用管理員身份來執行命令列，在命令列中安裝即可

（2）在配置cnpm的過程中速度會有點慢，儘量在好的網路環境下配置

（3）以後使用-g全域性安裝下載的模組都將安裝在D盤nodejs資料夾下的node_global的node_modules資料夾下（即是新建的node_global的node_modules資料夾下）

（4）配置成功cnpm後，以後就可以使用cnpm命令來安裝模組，速度將會變快很多

4. 使用 cnpm 安裝 vue-cli 

cnpm install -g vue-cli

最新的 vue 專案模板中，都帶有 webpack 外掛，所以這裡可以不安裝 webpack

安裝完成後，可以使用 vue -V （注意 V 大寫）檢視是否安裝成功。

如果提示“無法識別 'vue' ” ，有可能是 npm 版本過低，可以使用 NPMnpm install -g npm 來更新版本

 安裝webpack =》cnpm install -g webpack

 安裝vue=》cnpm install vue

 安裝 vue-cli=》cnpm install -g vue-cli

npm命令

使用npm安裝外掛：命令提示符執行npm install <name> [-g] [--save-dev]

使用npm解除安裝外掛：npm uninstall <name> [-g] [--save-dev] PS：不要直接刪除本地外掛包 

使用npm更新外掛：npm update <name> [-g] [--save-dev] 

更新全部外掛：npm update [--save-dev] 

檢視npm幫助：npm help 

檢視當前目錄已安裝外掛：npm list

注：cnpm跟npm用法完全一致，只是在執行命令時將npm改為cnpm。

===============================================================

5. 建立工程

要建立專案，

1）首先我們要選定新建專案的存放目錄，然後在命令列中把目錄轉到選定的目錄。cd d:\sf project \

2）然後輸入：vue init webpack Vue-Project 失敗，

嘗試用如下命令，成功：vue init webpack-simple yunshi-approve y

步驟如下：

2.新建一個 .vue-templates ，一定要在檔名後面追加一個點 （否則無法建立）.vue-templates.

3. 把解壓出的資料夾放在目錄：C:\Users\l個人登入使用者名稱\.vue-templates\webpack-simple
注意，解壓的名字一定是：webpack-simple，如果不是，請重新命名。
4. 執行：vue init webpack-simple project --offline

配置完成後，可以看到目錄下多出了一個專案資料夾，裡面就是 vue-cli 建立的一個基於 webpack 的 vue.js 專案

然後進入專案目錄（cd vuetest），

使用 cnpm 安裝依賴: cnpm install

然後啟動專案: npm run dev

如果瀏覽器開啟之後，沒有加載出頁面，有可能是本地的 8080 埠被佔用，需要修改一下配置檔案 config>index.js

建議將埠號改為不常用的埠。另外我還將 build 的路徑字首修改為 ' ./ '（原本為 ' / '），是因為打包之後，外部引入 js 和 css 檔案時，如果路徑以 ' / ' 開頭，在本地是無法找到對應檔案的（伺服器上沒問題）。所以如果需要在本地開啟打包後的檔案，就得修改檔案路徑。

6、打包上線

自己的專案檔案都需要放到 src 資料夾下

專案開發完成之後，輸入 npm run build 來進行打包工作

打包完成後，會生成 dist 資料夾，如果已經修改了檔案路徑，可以直接開啟本地檔案檢視

專案上線時，只需要將 dist 資料夾放到伺服器就行了。

7. 執行專案：

• 1.cd project-name

• 2.npm install

• 3.npm run dev

• 4.在瀏覽器輸入localhost:8080