1. 筆者操作系統是Win7,所以搭建的是Win7環境的Node.js
下載地址:http://nodejs.org/dist/v9.7.1/
2. 下載完成后,安裝node.js,盡量避免安裝C盤
3. 安裝完成,檢查node版本
4. 安裝完成,檢查npm版本
5. 基於 Node.js 安裝cnpm(淘寶鏡像)
npm install -g cnpm --registry=https://registry.npm.taobao.org
6. 創建緩存及全局文件夾
7. 修改npm配置路徑,指向我們新創建的文件夾
npm config set prefix "D:\Program Files\nodejs\node_global" npm config set cache "D:\Program Files\nodejs\node_cache"
8. 為使任何地方都可以使用命令,我們添加環境變量(計算機-屬性-高級系統設置)
(1)在PATH后添加新路徑,注意分號
D:\Program Files\nodejs\node_global
(2)增加系統變量NODE_PATH
D:\Program Files\nodejs\node_modules
至此,Node.js安裝完畢!!!
9. 安裝Vue
cnpm install vue -g
10. 安裝Vue命令行工具(vue-cli 腳手架)
cnpm install vue-cli -g
11. 安裝完成腳手架,我們可以使用命令來創建Vue項目
(1)命令行,進行你在存儲Vue項目的文件夾
(2)創建名為:firstvue 項目,注意不能含大寫字母
vue init webpack-simple firtstvue
創建完成后,項目文件夾目錄如下:
(3)創建名為:vue123 的項目(大家注意文件夾目錄的不同)
vue init webpack vue123
目錄文件作用如下:
(4)安裝項目依賴包
安裝該工程依賴的模塊,這些模塊將被安裝在:mytest\node_module目錄下,node_module文件夾會被新建,而且根據package.json的配置下載該項目的modules
cnpm install
(5)運行項目
cnpm run dev
(6)瀏覽器訪問:http://localhost:8080
至此Vue開發環境搭建完畢!!!