VUE-Windows系統下搭建vue環境

1、安裝node.js（https://nodejs.org/en/）

 

 

下載完畢後，能夠安裝node，建議不要安裝在系統盤（如C：）。注意記下路徑。。

 

 

 

此處默認安裝這4項便可，點擊Next按鈕。

 

 

 

 

2、設置nodejs prefix（全局）和cache（緩存）路徑

一、在nodejs安裝路徑下，新建node_global和node_cache兩個文件夾

 

 

 完成後，win+R 驗證是否安裝成功：輸入npm，顯示以下就表示安裝成功。

 

 

 

二、設置緩存文件夾

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

 

設置全局模塊存放路徑

npm config set prefix "G:\Program Files\nodejs\node_global"

 

 

設置成功後，以後用命令npm install XXX -g安裝之後模塊就在G:\Program Files\nodejs\node_global裏

 

 

3、基於 Node.js 安裝cnpm（淘寶鏡像）

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

 

 

 

 

4、設置環境變量（很是重要）

說明：設置環境變量可使得任意目錄下均可以使用cnpm、vue等命令，而不須要輸入全路徑

一、鼠標右鍵"此電腦"，選擇「屬性」菜單，在彈出的「系統」對話框中左側選擇「高級系統設置」，彈出「系統屬性」對話框。

二、修改系統變量PATH，增長 G:\Program Files\nodejs\node_global

 

 

 三、新增系統變量NODE_PATH：G:\Program Files\nodejs\node_modules

 

 

 

5、安裝Vue

從新開啓cmd：cnpm install vue -g

 

 

 

6、安裝vue命令行工具，即vue-cli 腳手架

cnpm install vue-cli -g

 

 

 

 

 7、新項目的建立

1.打開存放新建項目的文件夾

打開開始菜單，輸入 CMD，或使用快捷鍵 win+R，輸入 CMD，敲回車，彈出命令提示符。打開你將要新建的項目目錄

 

 

 

2.根據模版建立新項目

在當前目錄下輸入「vue init webpack-simple 項目名稱（使用英文）」。

vue init webpack-simple VueQualityVideo

 

 

 初始化完成後的項目目錄結構以下：

 

 

 

 

 

三、安裝工程依賴模塊

定位到VueQualityVideo的工程目錄下，安裝該工程依賴的模塊，這些模塊將被安裝在：VueQualityVideo\node_module目錄下，node_module文件夾會被新建，並且根據package.json的配置下載該項目的modules

 

cd mytest

cnpm install

 

 

 

 

四、運行該項目，測試一下該項目是否可以正常工做，這種方式是用nodejs來啓動。

cnpm run dev

 

 

 

 

 

 到此，VUE環境搭建、項目初始化建立完成！！

 

  

參考：https://www.cnblogs.com/zhaomeizi/p/8483597.html