系統(tǒng)軟件園 - 專注分享最好的電腦系統(tǒng)軟件!免費(fèi)安全下載 系統(tǒng)軟件園首頁 | Win7激活工具 | 熱門專題
系統(tǒng)軟件園>您的位置:首頁 > > 系統(tǒng)教程 > Win10系統(tǒng)教程 >

Win10系統(tǒng)安裝Vue環(huán)境搭建(node安裝,變量配置)詳細(xì)教程

更新時間:2019-05-14 15:55:41| 編輯:本站整理 | 信息來源:本站整理|瀏覽數(shù):
今天小編要和大家分享的是在Win10系統(tǒng)下搭建Vue環(huán)境,包括node安裝、變量配置,Vue安裝,安裝Vue-cli、webpack構(gòu)建項(xiàng)目等幾個步驟,有需要的朋友可以學(xué)習(xí)一下哦。


第一步:安裝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)境變量,端口更改等一些步驟,相信會給一些用戶一些幫助的。


返回頂部


系統(tǒng)軟件園發(fā)布的系統(tǒng)鏡像及軟件均來至互聯(lián)網(wǎng),僅供學(xué)習(xí)和研究使用,不得用于任何商業(yè)用途并請在下載后24小時內(nèi)刪除,如果滿意請聯(lián)系版權(quán)方購買。
如果您發(fā)現(xiàn)本站侵害了您的版權(quán),請立即聯(lián)系我們,本站將第一時間進(jìn)行相關(guān)處理。聯(lián)系方式(見首頁)
版權(quán)聲明|下載聲明 Copyright @ 2016 系統(tǒng)軟件園