【Vue教程系列:第一篇】Win7 搭建Vue開發環境


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開發環境搭建完畢!!!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM