Vue3初學(xué)者詳細(xì)教程之zip安裝Node.js版本v16.6.0、vue/cli版本4.5.13、element-ui版本2.15.6、axios版本0.25.0

2年前作者：Meta39分類(lèi)：Toy博客閱讀(119)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了Vue3初學(xué)者詳細(xì)教程之zip安裝Node.js版本v16.6.0、vue/cli版本4.5.13、element-ui版本2.15.6、axios版本0.25.0。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

下載Node.js v16.6.0

《Node.js v16.6.0官網(wǎng)下載》

vue3需要的node版本,vue.js,node.js,npm

找個(gè)地方解壓

在node文件夾里面創(chuàng)建2個(gè)文件夾分別是node_cache和node_global

vue3需要的node版本,vue.js,node.js,npm
在解壓路徑文件夾cmd輸入以下命令創(chuàng)建2個(gè)文件夾

mkdir node_cache && mkdir node_global

新建系統(tǒng)變量NODE_HOME

vue3需要的node版本,vue.js,node.js,npm

編輯Path系統(tǒng)變量

vue3需要的node版本,vue.js,node.js,npm

%NODE_HOME%
%NODE_HOME%\node_global

測(cè)試nodejs環(huán)境變量是否生效

cmd運(yùn)行node -v命令，輸出版本號(hào)說(shuō)明成功

C:\Users\Meta> node -v
v16.6.0

以系統(tǒng)管理員的身份打開(kāi)cmd命令提示符窗口，設(shè)置node_cache和node_global文件夾成全局變量

npm config set cache "D:\softwareWork\node-v16.6.0-win-x64\node_cache"
npm config set prefix "D:\softwareWork\node-v16.6.0-win-x64\node_global"

以系統(tǒng)管理員的身份打開(kāi)cmd命令提示符窗口，設(shè)置國(guó)內(nèi)鏡像加速（不設(shè)置會(huì)下載很慢）

npm config set registry http://registry.npm.taobao.org

看看設(shè)置是否成功

npm config get registry

vue3需要的node版本,vue.js,node.js,npm

以系統(tǒng)管理員的身份打開(kāi)cmd命令提示符窗口，安裝Vue-cli版本4.5.13腳手架

cnpm install @vue/cli@4.5.13 -g
或(下面這個(gè)是沒(méi)有鏡像的)
npm install @vue/cli@4.5.13 -g

卸載Vue-cli命令

npm uninstall -g @vue/cli

查看vue-cli版本

vue -V

vue3需要的node版本,vue.js,node.js,npm

創(chuàng)建Vue3工程

在C盤(pán)以外的盤(pán)創(chuàng)個(gè)workspaceFront文件夾作為前端工作空間，如：D盤(pán)
以管理員的身份運(yùn)行cmd進(jìn)入到D:\workspaceFront執(zhí)行vue create vue3_test其中vue3_test是項(xiàng)目名稱(chēng)

D:
cd D:/workspaceFront
vue create vue3_test

以管理員的身份運(yùn)行vsCode，再把文件夾拖進(jìn)來(lái)
《vsCode官網(wǎng)下載》
根據(jù)自己的電腦系統(tǒng)需要下載32位或者64位的zip壓縮包，解壓后，發(fā)送exe文件快捷方式到桌面即可。
vue3需要的node版本,vue.js,node.js,npm

發(fā)送到桌面快捷方式

vue3需要的node版本,vue.js,node.js,npm

記住一定要以管理員的身份運(yùn)行vsCode，再把項(xiàng)目托進(jìn)來(lái)，否則npm命令很有可能說(shuō)找不到?。?！

vue3需要的node版本,vue.js,node.js,npm

啟動(dòng)Vue3項(xiàng)目

新建一個(gè)終端
vue3需要的node版本,vue.js,node.js,npm
在終端執(zhí)行npm run serve啟動(dòng)項(xiàng)目

npm run serve

啟動(dòng)成功則會(huì)輸出如下內(nèi)容
vue3需要的node版本,vue.js,node.js,npm
按住鍵盤(pán)的Ctrl鍵單擊上面的ip地址就會(huì)跳到瀏覽器打開(kāi)Vue項(xiàng)目index頁(yè)面

安裝/卸載指定版本的element-ui

安裝指定版本的element-ui

npm i element-ui@2.15.6

卸載element-ui

npm uninstall element-ui

安裝/卸載指定版本的axios

npm i axios@0.25.0

卸載axios

npm uninstall axios

無(wú)法識(shí)別npm

vue3需要的node版本,vue.js,node.js,npm
上面這種情況就是因?yàn)槟銢](méi)有用管理員的身份啟動(dòng)vsCode文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-728858.html

到了這里，關(guān)于Vue3初學(xué)者詳細(xì)教程之zip安裝Node.js版本v16.6.0、vue/cli版本4.5.13、element-ui版本2.15.6、axios版本0.25.0的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來(lái)自互聯(lián)網(wǎng)用戶(hù)投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

免費(fèi)的modelsim安裝教程（Intel modelsim altera 的初學(xué)者）
intel官方軟件的地址（https://www.intel.com/content/www/us/en/software/programmable/quartus-prime/model-sim.html）需要注冊(cè)。進(jìn)入下載頁(yè)面，沒(méi)有單獨(dú)的modelsim的下載項(xiàng)，需要先進(jìn)入quartus pro的下載頁(yè)面中：進(jìn)入之后，選擇individual Files，將關(guān)于modelsim有關(guān)的三個(gè)文件均下載下來(lái)，放在同一個(gè)文件
2024年02月07日
瀏覽(344)
vue3 組件響應(yīng)式v-model 失效，實(shí)踐踩坑，一文搞懂組件響應(yīng)式原理，對(duì)初學(xué)者友好
vue3的v-model已經(jīng)有了變化，假如你還不知道其中細(xì)節(jié)，看完這篇文章你就完全明白了，我以踩坑的場(chǎng)景來(lái)進(jìn)行解析。起因是在我的項(xiàng)目中需要一個(gè)輸入框組件，這個(gè)組件用來(lái)根據(jù)輸入異步查詢(xún)系統(tǒng)內(nèi)已有人員，而且在多個(gè)地方需要用到這個(gè)輸入框，所以必須要封裝成組件，但
2024年02月02日
瀏覽(23)
【虛幻引擎】UE4初學(xué)者系列教程(藍(lán)圖篇)-全中文新手入門(mén)教程（含藍(lán)圖節(jié)點(diǎn)詳細(xì)介紹，即時(shí)更新~）
藍(lán)圖篇目錄藍(lán)圖基礎(chǔ)邏輯知識(shí)點(diǎn)1：藍(lán)圖是可視化編程知識(shí)點(diǎn)2：藍(lán)圖是面向?qū)ο蟮木幾g型可視化編程語(yǔ)言知識(shí)點(diǎn)3：關(guān)卡藍(lán)圖和藍(lán)圖類(lèi)的區(qū)別知識(shí)點(diǎn)4：藍(lán)圖數(shù)據(jù)類(lèi)型知識(shí)點(diǎn)5：節(jié)點(diǎn)的介紹知識(shí)點(diǎn)6：引腳的介紹知識(shí)點(diǎn)7：節(jié)點(diǎn)的執(zhí)行順序知識(shí)點(diǎn)8：節(jié)點(diǎn)的類(lèi)型知識(shí)點(diǎn)9：節(jié)點(diǎn)
2024年02月04日
瀏覽(122)
【虛幻4】UE4初學(xué)者系列教程(藍(lán)圖篇)-全中文新手入門(mén)教程（含藍(lán)圖節(jié)點(diǎn)詳細(xì)介紹，即時(shí)更新~）
藍(lán)圖篇目錄藍(lán)圖基礎(chǔ)邏輯知識(shí)點(diǎn)1：藍(lán)圖是可視化編程知識(shí)點(diǎn)2：藍(lán)圖是面向?qū)ο蟮木幾g型可視化編程語(yǔ)言知識(shí)點(diǎn)3：關(guān)卡藍(lán)圖和藍(lán)圖類(lèi)的區(qū)別知識(shí)點(diǎn)4：藍(lán)圖數(shù)據(jù)類(lèi)型知識(shí)點(diǎn)5：節(jié)點(diǎn)的介紹知識(shí)點(diǎn)6：引腳的介紹知識(shí)點(diǎn)7：節(jié)點(diǎn)的執(zhí)行順序知識(shí)點(diǎn)8：節(jié)點(diǎn)的類(lèi)型知識(shí)點(diǎn)9：節(jié)點(diǎn)
2024年02月04日
瀏覽(95)
Centos7下部署nginx（三種方式安裝部署，圖文結(jié)合超詳細(xì)，適合初學(xué)者）
Nginx (engine x) 是一個(gè)高性能的HTTP和反向代理web服務(wù)器， Nginx是一款輕量級(jí)的Web 服務(wù)器/反向代理服務(wù)器及電子郵件（IMAP/POP3）代理服務(wù)器，在BSD-like 協(xié)議下發(fā)行。其特點(diǎn)是占有內(nèi)存少，并發(fā)能力強(qiáng)，事實(shí)上nginx的并發(fā)能力確實(shí)在同類(lèi)型的網(wǎng)頁(yè)服務(wù)器中表現(xiàn)較好，中國(guó)大陸使用
2024年02月05日
瀏覽(21)
[Hadoop高可用集群]數(shù)倉(cāng)工具之Hive的安裝部署（超級(jí)詳細(xì)，適用于初學(xué)者）
??作者：喜歡水星記 ??系列：Hadoop高可用集群 ??收藏：本文記錄我搭建過(guò)程供大家學(xué)習(xí)和自己之后復(fù)習(xí)，如果對(duì)您有用，希望能點(diǎn)贊收藏加關(guān)注 Hive是基于Hadoop的一個(gè)數(shù)據(jù)倉(cāng)庫(kù)工具，可以將結(jié)構(gòu)化的數(shù)據(jù)文件映射為一張數(shù)據(jù)庫(kù)表，并提供簡(jiǎn)單的sql查詢(xún)功能，可以將sql語(yǔ)句轉(zhuǎn)
2024年02月05日
瀏覽(23)
Centos系列：Centos7下部署nginx（三種方式安裝部署，圖文結(jié)合超詳細(xì)，適合初學(xué)者）
Nginx (engine x) 是一個(gè)高性能的HTTP和反向代理web服務(wù)器， Nginx是一款輕量級(jí)的Web 服務(wù)器/反向代理服務(wù)器及電子郵件（IMAP/POP3）代理服務(wù)器，在BSD-like 協(xié)議下發(fā)行。其特點(diǎn)是占有內(nèi)存少，并發(fā)能力強(qiáng)，事實(shí)上nginx的并發(fā)能力確實(shí)在同類(lèi)型的網(wǎng)頁(yè)服務(wù)器中表現(xiàn)較好，中國(guó)大陸使用
2024年04月26日
瀏覽(23)
QuantumultX 初學(xué)者傻瓜教程
我這里以“orz”大佬來(lái)介紹。大佬集成了分流、策略、去廣告、比價(jià)、boxjs等功能，并給了非常詳細(xì)的任務(wù)訂閱列表，非常方便。項(xiàng)目地址：https://github.com/Orz-3/QuantumultX TG頻道：https://t.me/Orzmini TG群組：https://t.me/Orz_mini 食用方法：就是把遠(yuǎn)程配置文件下到本地覆蓋再進(jìn)行設(shè)置
2024年02月08日
瀏覽(15)
Advanced Solidity初學(xué)者教程
目錄 Advanced Solidity 引言： 1. 數(shù)學(xué)和算術(shù) 2. 時(shí)間和時(shí)間單位 3. 結(jié)構(gòu)體 4. 修飾器 5. 枚舉 6. 繼承 7. 抽象合約 8. 接口 9. 庫(kù) 10. 存儲(chǔ)位置 Advanced Solidity（高級(jí)Solidity）是一種區(qū)塊鏈編程語(yǔ)言Solidity的深入應(yīng)用，通常用于構(gòu)建智能合約和去中心化應(yīng)用（DApps）。它涉及復(fù)雜的編程概念
2024年04月28日
瀏覽(21)
Midjourney初學(xué)者使用教程，簡(jiǎn)單易懂
?最近AI繪圖工具M(jìn)idjourney 引發(fā)了大眾的廣泛關(guān)注，同時(shí)“首批因?yàn)锳I失業(yè)的人已經(jīng)出現(xiàn)”也沖上了熱搜，讓無(wú)論原畫(huà)師、設(shè)計(jì)師還是普通人都急于了解這些AI工具以下就是我自己總結(jié)的初學(xué)者使用教程 1、網(wǎng)絡(luò)準(zhǔn)備 Midjourney官網(wǎng)地址：https://www.midjourney.com 官網(wǎng)可以直接打開(kāi)，但
2024年02月09日
瀏覽(39)