第一步:安裝node
1、去官網(wǎng)下載node之后,推薦安裝穩(wěn)定版本(LTS)以及安裝路徑為系統(tǒng)盤(C)
node官網(wǎng)安裝地址
2、查看node安裝成功否
注釋:以下命令使用 命令提示符(管理員)權(quán)限,win10 對user權(quán)限的限制了訪問權(quán)限。
node -v 查看node版本
npm -v 查看npm版本
where node 查看node安裝位置 onuomy.cn 整理
注意:node 版本號大于npm版本號,基于之前安裝版本過低,后面會報錯。
安裝路徑非系統(tǒng)盤(例D盤),出現(xiàn)用戶目錄丟失問題解決
上圖標(biāo)注的文件目錄可能丟失,解決辦法:
主動創(chuàng)建目錄,更新npm配置為新建目錄路徑,例 D:\nodejs
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
npm 運(yùn)行慢,配置國內(nèi)淘寶鏡像包
npm config set registry https://registry.npm.taobao.org
后續(xù)包安裝命令 npm 即可改為 cnpm
第二步:配置node環(huán)境變量
我的電腦(屬性)->高級系統(tǒng)設(shè)置->環(huán)境變量編輯-保存
編輯path環(huán)境變量,新增node安裝路徑
onuomy.cn 整理
增加環(huán)境變量NODE_PATH 配置的內(nèi)容為node_modules 路徑
已經(jīng)搭建好框架的項(xiàng)目直接跳轉(zhuǎn) 步驟6 進(jìn)行項(xiàng)目啟動即可
第三步:安裝VUE
npm install vue -g
-g是指安裝到node_global全局目錄去
第四步:安裝Vue-cli
運(yùn)行 npm install vue-cli -g
安裝vue腳手架
第五步:webpack構(gòu)建項(xiàng)目
命令行進(jìn)入構(gòu)建項(xiàng)目的路徑 例:cd D:\vue-project
構(gòu)建vue項(xiàng)目名 vue01
運(yùn)行 vue init webpack vue01 構(gòu)建項(xiàng)目并配置相關(guān)項(xiàng)
項(xiàng)目構(gòu)建成功
第六步:項(xiàng)目啟動
運(yùn)行 npm install 下載項(xiàng)目依賴包
運(yùn)行 npm run dev 本地啟動
運(yùn)行成功,在瀏覽器驗(yàn)證
瀏覽器驗(yàn)證成功,就此基本VUE目錄框架搭建完成,開始模塊開發(fā)了~~
第七步:靈活改變運(yùn)行默認(rèn)端口8080,避免端口沖突
第八步:項(xiàng)目打包
運(yùn)行 npm run build 進(jìn)行線上打包
打包項(xiàng)目代碼,一般默認(rèn)從src目錄代碼壓縮混淆到dist目錄下。
好了,以上就是Win10系統(tǒng)下安裝Vue環(huán)境信配置各種環(huán)境變量,端口更改等一些步驟,相信會給一些用戶一些幫助的。