国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

如何搭建一個(gè)vue項(xiàng)目

2年前作者：xiezhr分類：Toy博客閱讀(31)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了如何搭建一個(gè)vue項(xiàng)目。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

目錄

一、nvm 安裝與使用
- 1.1、nvm簡(jiǎn)介
- 1.2、nvm下載
- 1.3、 nvm 安裝
二、nodejs安裝
- 2.1 nodejs簡(jiǎn)介
- 2.2 nodejs官網(wǎng)
- 2.3 查看nodejs 所有版本
- 2.4 選擇需要的版本進(jìn)行安裝
- 2.5 使用指定版本的node
- 2.6 查看當(dāng)前node版本
三、鏡像管理工具NRM 安裝
- 3.1 安裝NRM
- 3.2 nrm常用命令
四、創(chuàng)建vue項(xiàng)目
- 4.1 安裝vue-cli腳手架
- 4.2 查看腳手架版本
- 4.3 創(chuàng)建vue項(xiàng)目
  - 4.3.1 圖形化界面創(chuàng)建
  - 4.3.2 命令行創(chuàng)建
- 4.4 vue項(xiàng)目簡(jiǎn)介
- 4.5 運(yùn)行vue項(xiàng)目
五、項(xiàng)目開發(fā)工具推薦
六、安裝vue調(diào)試工具
- 6.1 調(diào)試工具下載地址
- 6.2 安裝調(diào)試工具

一、nvm 安裝與使用

1.1、nvm簡(jiǎn)介

nvm全名node.js version management，顧名思義是一個(gè)nodejs的版本管理工具。通過(guò)它可以安裝和切換不同版本的nodejs

1.2、nvm下載

①github下載
https://github.com/coreybutler/nvm-windows/releases
如何搭建一個(gè)vue項(xiàng)目
②百度網(wǎng)盤下載
鏈接：https://pan.baidu.com/s/18FZuhmw7OCFeLFpQmf7u6w
提取碼：lnaf

1.3、 nvm 安裝

① 雙擊nvm-setup.exe可執(zhí)行文件
如何搭建一個(gè)vue項(xiàng)目
② 選擇nvm安裝路徑

③選擇nodejs安裝路徑

④安裝

⑤檢查是否安裝成功

C:\Users\xiezhr>nvm version
1.1.9

④nvm 常用命令

 # 顯示可以安裝的所有nodejs版本
nvm list available 
 # 安裝指定版本的nodejs
nvm install <version> 
# 顯示已安裝版本列表
nvm list
# 使用指定版本node
nvm use [version]
# 卸載指定版本node
nvm uninstall <version>

二、nodejs安裝

2.1 nodejs簡(jiǎn)介

Node.js is an open-source, cross-platform JavaScript runtime environment.
Node.js是一個(gè)開源、跨平臺(tái)的JavaScript運(yùn)行時(shí)環(huán)境。

2.2 nodejs官網(wǎng)

https://nodejs.org/en/

如何搭建一個(gè)vue項(xiàng)目

2.3 查看nodejs 所有版本

nvm list available

C:\Users\xiezhr>nvm list available
|   CURRENT    |     LTS      |  OLD STABLE  | OLD UNSTABLE |
|--------------|--------------|--------------|--------------|
|   18.10.0    |   16.17.1    |   0.12.18    |   0.11.16    |
|    18.9.1    |   16.17.0    |   0.12.17    |   0.11.15    |
|    18.9.0    |   16.16.0    |   0.12.16    |   0.11.14    |
|    18.8.0    |   16.15.1    |   0.12.15    |   0.11.13    |
|    18.7.0    |   16.15.0    |   0.12.14    |   0.11.12    |
|    18.6.0    |   16.14.2    |   0.12.13    |   0.11.11    |
|    18.5.0    |   16.14.1    |   0.12.12    |   0.11.10    |
|    18.4.0    |   16.14.0    |   0.12.11    |    0.11.9    |
|    18.3.0    |   16.13.2    |   0.12.10    |    0.11.8    |
|    18.2.0    |   16.13.1    |    0.12.9    |    0.11.7    |
|    18.1.0    |   16.13.0    |    0.12.8    |    0.11.6    |
|    18.0.0    |   14.20.1    |    0.12.7    |    0.11.5    |
|    17.9.1    |   14.20.0    |    0.12.6    |    0.11.4    |
|    17.9.0    |   14.19.3    |    0.12.5    |    0.11.3    |
|    17.8.0    |   14.19.2    |    0.12.4    |    0.11.2    |
|    17.7.2    |   14.19.1    |    0.12.3    |    0.11.1    |
|    17.7.1    |   14.19.0    |    0.12.2    |    0.11.0    |
|    17.7.0    |   14.18.3    |    0.12.1    |    0.9.12    |
|    17.6.0    |   14.18.2    |    0.12.0    |    0.9.11    |
|    17.5.0    |   14.18.1    |   0.10.48    |    0.9.10    |

This is a partial list. For a complete list, visit https://nodejs.org/en/download/releases

2.4 選擇需要的版本進(jìn)行安裝

nvm install [version]

# 安裝16.17.1版本
C:\Users\xiezhr>nvm install 16.17.1
Downloading node.js version 16.17.1 (64-bit)...
Extracting...
Complete

Installation complete. If you want to use this version, type
nvm use 16.17.1

2.5 使用指定版本的node

C:\WINDOWS\system32>nvm use 16.17.1
Now using node v16.17.1 (64-bit)

注：在執(zhí)行上面命令中可能會(huì)報(bào)如下錯(cuò)，只需要將cmd切換到管理員登錄即可解決
如何搭建一個(gè)vue項(xiàng)目

2.6 查看當(dāng)前node版本

# 查看node版本
C:\Users\xiezhr>node -v
v16.17.1
# 查看npm版本
C:\Users\xiezhr>npm -v
8.15.0

三、鏡像管理工具NRM 安裝

3.1 安裝NRM

C:\Users\xiezhr>npm install -g nrm
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142

added 58 packages in 6s
npm notice
npm notice New minor version of npm available! 8.15.0 -> 8.19.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.19.2
npm notice Run npm install -g npm@8.19.2 to update!
npm notice

3.2 nrm常用命令

# 查看鏡像列表
nrm ls
# 查看當(dāng)前使用的鏡像
nrm current 
# 添加鏡像
nrm add <名稱> <遠(yuǎn)程地址或私服地址>
# 刪除鏡像
nrm del <名稱>
# 切換鏡像
nrm use <名稱> 
# 測(cè)試鏡像網(wǎng)絡(luò)傳輸速度
nrm test <名稱>
# 查看nrm版本號(hào)
nrm <-version | -V> 
# 查看nrm相關(guān)信息
nrm <-help | -h>
# 打開鏡像主頁(yè)
nrm home <名稱> [browser]
# 上傳npm包或命令程序
nrm publish [<tarball>|<folder>]

四、創(chuàng)建vue項(xiàng)目

4.1 安裝vue-cli腳手架

#安裝最新版本的腳手架
npm install -g @vue/cli   
#卸載腳手架
npm uninstall -g @vue/cli

如何搭建一個(gè)vue項(xiàng)目

4.2 查看腳手架版本

# 查看vue腳手架版本，注意V是大寫
vue -V

如何搭建一個(gè)vue項(xiàng)目

4.3 創(chuàng)建vue項(xiàng)目

4.3.1 圖形化界面創(chuàng)建

①命令行輸入

C:\Users\xiezhr>vue ui
??  Starting GUI...
??  Ready on http://localhost:8000

②瀏覽器輸入http://localhost:8000 后到創(chuàng)建界面
如何搭建一個(gè)vue項(xiàng)目
③選擇項(xiàng)目路徑創(chuàng)建項(xiàng)目

④輸入項(xiàng)目名稱

⑤選擇vue版本

⑥ 創(chuàng)建成功

4.3.2 命令行創(chuàng)建

① 切換到工作空間

cd E:\xiezhrspace\vue-study

如何搭建一個(gè)vue項(xiàng)目

② 執(zhí)行命令創(chuàng)建工程

vue create sec-vue

如何搭建一個(gè)vue項(xiàng)目

4.4 vue項(xiàng)目簡(jiǎn)介

如何搭建一個(gè)vue項(xiàng)目

4.5 運(yùn)行vue項(xiàng)目

cd 命令行切換到vue項(xiàng)目路徑下,上面創(chuàng)建了兩個(gè)vue項(xiàng)目，路徑分別為
E:\xiezhrspace\vue-study\first-vue
E:\xiezhrspace\vue-study\sec-vue
然后執(zhí)行以下命令

npm run serve

如何搭建一個(gè)vue項(xiàng)目
瀏覽器輸入http://localhost:8080 ，出現(xiàn)如下界面，那么說(shuō)明我們已成功搭建了一個(gè)vue項(xiàng)目~(●'?'●)

五、項(xiàng)目開發(fā)工具推薦

vscode
下載地址：https://code.visualstudio.com/
webstom
下載地址：https://www.jetbrains.com/webstorm/download/#section=windows
注冊(cè)工具（你懂的，哈哈~ 2021.3.1版本實(shí)測(cè)可用，其他版本的沒(méi)試過(guò)）：
鏈接：https://pan.baidu.com/s/1NKv0sJ68On10pKCkUeECZQ
提取碼：e2k5

六、安裝vue調(diào)試工具

6.1 調(diào)試工具下載地址

鏈接：https://pan.baidu.com/s/1TT5WC-A7SB_m7otMfMZPOw
提取碼：n3o0

如何搭建一個(gè)vue項(xiàng)目

6.2 安裝調(diào)試工具

① 點(diǎn)開谷歌瀏覽器的擴(kuò)展程序
如何搭建一個(gè)vue項(xiàng)目
②選擇開發(fā)者模式，并將下載好的crx 文件托拽進(jìn)來(lái)即可
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-445867.html

到了這里，關(guān)于如何搭建一個(gè)vue項(xiàng)目的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來(lái)自互聯(lián)網(wǎng)用戶投稿，該文觀點(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)用

如何從0到1搭建一個(gè)SpringBoot項(xiàng)目
SpringBoot是大家使用最多的一個(gè)Java框架了，今日就來(lái)詳細(xì)介紹一下如何去創(chuàng)建一個(gè)SpringBoot項(xiàng)目首先要來(lái)看你的IDEA版本，如果你的IDEA是【專業(yè)版】的，那么你就無(wú)需安裝任何的插件，直接就可以創(chuàng)建 SpringBoot 的項(xiàng)目了但如果你的IDEA版本是【社區(qū)版】的話，就需要考慮地仔細(xì)
2024年02月03日
瀏覽(19)
初級(jí) - 如何搭建一個(gè)Java Web項(xiàng)目 - 記錄
Intellij IDEA 一般可以通過(guò)兩種方式創(chuàng)建 Spring Boot 項(xiàng)目：使用 Maven 創(chuàng)建使用 Spring Initializr 創(chuàng)建 Tips: 標(biāo)題選項(xiàng)后的感嘆號(hào) ！的是重點(diǎn)配置這里筆者選擇的是 2.x 版本的 Spring Boot，不勾選 Download pre-built … 1. 取消download pre-built shared indexes自動(dòng)下載 Developer Tools 選項(xiàng) ！ 1. Spring
2024年02月07日
瀏覽(28)
mac下安裝vue cli腳手架并搭建一個(gè)簡(jiǎn)易項(xiàng)目
1、確定本電腦下node和npm版本是否為項(xiàng)目所需版本。 2、下載vue腳手架 3、創(chuàng)建項(xiàng)目如果有node，打開終端，輸入node -v和npm -v , 確保node和npm的版本，(這里可以根據(jù)自己的需求去選擇，如果對(duì)最新版本的內(nèi)容有要求，也可以選擇最新版本)如果沒(méi)有node，可以點(diǎn)擊nodejs官網(wǎng)去下載
2024年02月15日
瀏覽(100)
如何搭建一個(gè)簡(jiǎn)單的springCloudAlibaba項(xiàng)目，并實(shí)現(xiàn)基本的使用
微服務(wù)是一種軟件架構(gòu)風(fēng)格，它將一個(gè)大型應(yīng)用程序拆分成一組更小、獨(dú)立的服務(wù)，每個(gè)服務(wù)都可以獨(dú)立開發(fā)、部署和擴(kuò)展。每個(gè)服務(wù)都有自己的業(yè)務(wù)邏輯和數(shù)據(jù)庫(kù)，并且通過(guò)輕量級(jí)通信機(jī)制（如RESTful API）來(lái)相互通信。微服務(wù)架構(gòu)的優(yōu)點(diǎn)包括可擴(kuò)展性：由于每個(gè)服務(wù)都是獨(dú)
2024年01月21日
瀏覽(25)
如何使用vue ui創(chuàng)建一個(gè)項(xiàng)目？
首先打開cmd 輸入vue ui 等待瀏覽器打開一個(gè)窗口，按照下圖操作 ?在\\\"功能頁(yè)面\\\"中，各個(gè)插件代表以下意思： Babel：Babel是一個(gè)JavaScript編譯器，用于將ES6+代碼轉(zhuǎn)換為向后兼容的JavaScript版本，以確保代碼在舊版本的瀏覽器上正常運(yùn)行。 TypeScript：TypeScript是一種由微軟開發(fā)的靜態(tài)
2024年02月13日
瀏覽(28)
從0搭建Vue3組件庫(kù)(十):如何搭建一個(gè) Cli 腳手架
本篇文章將實(shí)現(xiàn)一個(gè)名為 create-easyest 腳手架的開發(fā),只需一個(gè)命令 npm init easyest 就可以將整個(gè)組件庫(kù)開發(fā)框架拉到本地。首先,我們?cè)?packages 目錄下新建 cli 目錄,同執(zhí)行 pnpm init 進(jìn)行初始化,然后將包名改為 create-easyest 這里需要知道的是當(dāng)我們執(zhí)行 npm init xxx 或者 npm create xxx 的
2024年02月08日
瀏覽(91)
如何開發(fā)和搭建一個(gè)優(yōu)質(zhì)的Web3.0/區(qū)塊鏈項(xiàng)目？
在區(qū)塊鏈?zhǔn)澜绾?加密領(lǐng)域中、Web3 絕對(duì)算得上是一個(gè)耀眼的明星了，現(xiàn)在的風(fēng)頭明顯蓋過(guò)前兩位老大哥了。相信許多人也都想嘗試熟悉或者參與區(qū)塊鏈，加密領(lǐng)域和 Wed3之中，今天我們就來(lái)談?wù)勅绾我攒浖_發(fā)的角度，來(lái)搭建一個(gè)優(yōu)質(zhì)的區(qū)塊鏈相關(guān)項(xiàng)目。如何創(chuàng)建一個(gè)優(yōu)質(zhì)
2024年01月16日
瀏覽(18)
webstorm運(yùn)行Vue項(xiàng)目環(huán)境配置(如何從0配置運(yùn)行一個(gè)寫好的vue項(xiàng)目)
?1.在Node官網(wǎng)上下載zip安裝包。網(wǎng)址： https://nodejs.org/dist/v16.14.0/ (需要哪個(gè)版本就把/v后的版本號(hào)改成哪個(gè)版本) ?2.下載完成后解壓至需要的文件夾下。 ?3.在此文件夾下新建兩個(gè)文件夾： node_cache：npm緩存路徑 node_global：npm全局安裝路徑 4.配置環(huán)境變量右擊我的電腦 - 點(diǎn)擊屬
2024年01月16日
瀏覽(19)
多個(gè)Vue項(xiàng)目如何共用一個(gè)node_modules
多個(gè)項(xiàng)目共同用一個(gè)項(xiàng)目的node_modules 問(wèn)題：多個(gè)vue項(xiàng)目的node_modules依賴包相同，怎么共用同一個(gè)node_modules依賴包？ 1.以管理員身份打開命令窗口cmd 2.輸入命令：mklink /d 需要鏈接的項(xiàng)目地址引用的源文件項(xiàng)目地址 1.如：源文件項(xiàng)目地址為：D:worksourceFilenode_modules 2.如：需要鏈
2024年02月04日
瀏覽(20)
如何使用Vue的ui界面創(chuàng)建一個(gè)新項(xiàng)目
第一步： win+r打開命令提示符，然后輸入cmd后回車。第二步：在命令行輸入命令vue ui(中間有空格)后回車，彈出ui界面。第三步：點(diǎn)擊創(chuàng)建，雙擊地址欄確定我們要保存框架的地址，回車確定該地址，然后點(diǎn)擊下面的 ? 第四步：完成第三步進(jìn)入以下界面：依次輸入項(xiàng)目名
2024年02月05日
瀏覽(95)