一、工具簡介
這里我們簡單介紹一下文章中使用到的工具，使用這些工具可以提高我們開發(fā)效率。當(dāng)然了只有
nodejs是必須要安裝的，nvm 、Vite 、NRM這些都不是必須的，
1.1. nvm nodejs管理工具
nvm全名node.js version management，顧名思義是一個nodejs的版本管理工具。
通過它可以安裝和切換不同版本的nodejs
1.2 node.js js運行環(huán)境
Node.js 就不用多說了，官方解釋：Node.js is an open-source, cross-platform JavaScript runtime environment. 翻譯過來：Node.js是一個開源、跨平臺的JavaScript運行時環(huán)境。
1.3 Vite 前端構(gòu)建工具
Vite是尤雨溪團隊開發(fā)的，官方稱是下一代新型前端構(gòu)建工具，能夠顯著提升前端開發(fā)體驗。
上面稱是下一代，當(dāng)前一代當(dāng)然是我們熟悉的webpack
Vite 優(yōu)勢
- 開發(fā)環(huán)境中，無需打包操作，可快速的冷啟動。
- 輕量快速的熱重載（HMR）。
- 真正的按需編譯，不再等待整個應(yīng)用編譯完成
Vite 官網(wǎng)：https://cn.vitejs.dev/
1.4 NRM鏡像管理工具
nrm 全稱是：（npm registry manager） 是npm的鏡像管理工具
有時候國外的資源太慢，使用它就可以快速地在npm鏡像源間快速切換
二、安裝上面工具
2.1. nvm 安裝與使用
Node多版本管理NVM的安裝和使用 - 簡書 (jianshu.com)
2.2. nodejs安裝
2.2.1. 安裝包方式安裝
Nodejs--環(huán)境的安裝 - 簡書 (jianshu.com)
2.2.2. nvm方式安裝
上一小節(jié)中安裝好的
nvm，既然nvm是nodejs管理工具，我們這里就是用nvm查看node.js版本，安裝nodejs
1. 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. 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
3. nvm use [version]進(jìn)行node版本切換
C:\WINDOWS\system32>nvm use 16.17.1
Now using node v16.17.1 (64-bit)
小提示：在執(zhí)行上面命令中可能會報如下錯，只需要將cmd切換到管理員登錄即可解決
4. 查看當(dāng)前nodejs版本
當(dāng)我們按照上面的方法切換了nodejs版本后，可以用如下命令查看當(dāng)前nodejs版本信息
# 查看node版本
C:\Users\xiezhr>node -v
v16.17.1
# 查看npm版本
C:\Users\xiezhr>npm -v
8.15.0
2.3 鏡像管理工具NRM 安裝
2.3.1 安裝NRM
輸入
npm install -g nrm后回車即可全局安裝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
2.3.2 nrm鏡像管理工具使用
我們可以通過如下常用nrm命令管理npm鏡像
# 查看鏡像列表
nrm ls
# 查看當(dāng)前使用的鏡像
nrm current
# 添加鏡像
nrm add <名稱> <遠(yuǎn)程地址或私服地址>
# 刪除鏡像
nrm del <名稱>
# 切換鏡像
nrm use <名稱>
# 測試鏡像網(wǎng)絡(luò)傳輸速度
nrm test <名稱>
# 查看nrm版本號
nrm <-version | -V>
# 查看nrm相關(guān)信息
nrm <-help | -h>
# 打開鏡像主頁
nrm home <名稱> [browser]
# 上傳npm包或命令程序
nrm publish [<tarball>|<folder>]
查看鏡像列表
image.png
三、創(chuàng)建Vue3項目
我們到Vite官網(wǎng) https://cn.vitejs.dev/guide/根據(jù)官網(wǎng)一步步往下走即可
兼容性注意：Vite 需要 Node.js 版本 14.18+，16+。
然而，有些模板需要依賴更高的 Node 版本才能正常運行，當(dāng)你的包管理器發(fā)出警告時，請注意升級你的 Node 版本。
3.1. 使用npm 、yarn 、pnpm 其中一種命令搭建Vite 項目即可
pnpm 是集合了npm 和yarn 優(yōu)點的，在使用前需要先安裝
npm install pnpm -g
pnpm要求node版本至少16.14
This version of pnpm requires at least Node.js v16.14
使用 NPM:
npm create vite@latest
使用 Yarn:
yarn create vite
使用 PNPM:
pnpm create vite
3.2、輸入項目名稱（直接輸入項目名即可，del鍵不能刪）
3.3. 選擇項目框架
3.3. 選擇項目語言，回車
3.4. 進(jìn)入項目中重新打開cmd窗口，輸入pnpm install
3.5. pnpm run dev 運行項目
3.6. 項目頁面
