Node.js之Vue環境搭建及IDEA開發配置

環境搭建主要包括以下步驟

1. 安裝Node.js，配置環境變量。
2. 安裝cnpm，配置環境變量。
3. 安裝vue，vue.cli 腳手架。
4. 創建vue的第一個工程。
5. 配置IDEA，導入工程，配置運行。

1.node.js 下載：

　　http://nodejs.cn/download/

　　選擇.msi，會自動安裝npm。安裝完以后配置環境變量：

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

　　設置緩存文件夾：npm config set cache "D:\nodejs\node_cache"

　　設置全局模塊存放路徑：npm config set prefix "D:\nodejs\node_global"

　　在命令行輸入以下命令安裝express（注：“-g”表示安裝到global目錄下，就是上面設置的node_global中）：npm install express -g

2.安裝cnpm 

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

　　配置環境變量：

　　查看配置：

 　　如果不成功再看看路徑是否出了問題。

3.安裝vue，vue-cli

　　安裝vue：cnpm install vue -g

　　安裝vue命令行工具，即vue-cli 腳手架:cnpm install vue-cli -g

 　　安裝基本不會出現問題，安裝完就可以了

　　在全局下安裝：npm  install  webpack  -g            

　　安裝指定版本：npm  install  webpack@<version>   -g        例如：npm install  webpack@3.4.1  -g

　　webpack -v

4.創建第一個vue工程

　　在工程目錄下輸入“vue init webpack 項目名稱（使用英文）”。vue init webpack vue-test

　　這里可能會卡住，可以修改倉庫地址，或者直接退出來 用cnpm install。

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

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

　　cnpm install ：等待完成就行。

 　　運行該項目：cnpm run dev

5. IDEA 導入 Vue工程

　　安裝vue插件

　　配置 ES6，添加htm、vue

 

　　配置npm運行

 　　然后運行就可以顯示主頁了,其中項目結構如下：