从0使用Vite创建Vue3项目
一、工具简介
这里我们简单介绍一下文章中使用到的工具，使用这些工具可以提高我们开发效率。当然了只有
nodejs是必须要安装的，nvm 、Vite 、NRM这些都不是必须的，
1.1. nvm nodejs管理工具
nvm全名node.js version management，顾名思义是一个nodejs的版本管理工具。
通过它可以安装和切换不同版本的nodejs
1.2 node.js js运行环境
Node.js 就不用多说了，官方解释：Node.js is an open-source, cross-platform JavaScript runtime environment. 翻译过来：Node.js是一个开源、跨平台的JavaScript运行时环境。
1.3 Vite 前端构建工具
Vite是尤雨溪团队开发的，官方称是下一代新型前端构建工具，能够显著提升前端开发体验。
上面称是下一代，当前一代当然是我们熟悉的webpack
Vite 优势
- 开发环境中，无需打包操作，可快速的冷启动。
- 轻量快速的热重载（HMR）。
- 真正的按需编译，不再等待整个应用编译完成
Vite 官网：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--环境的安装 - 简书 (jianshu.com)
2.2.2. nvm方式安装
上一小节中安装好的
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]进行node版本切换
C:\WINDOWS\system32>nvm use 16.17.1
Now using node v16.17.1 (64-bit)
小提示：在执行上面命令中可能会报如下错，只需要将cmd切换到管理员登录即可解决
4. 查看当前nodejs版本
当我们按照上面的方法切换了nodejs版本后，可以用如下命令查看当前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
# 查看当前使用的镜像
nrm current
# 添加镜像
nrm add <名称> <远程地址或私服地址>
# 删除镜像
nrm del <名称>
# 切换镜像
nrm use <名称>
# 测试镜像网络传输速度
nrm test <名称>
# 查看nrm版本号
nrm <-version | -V>
# 查看nrm相关信息
nrm <-help | -h>
# 打开镜像主页
nrm home <名称> [browser]
# 上传npm包或命令程序
nrm publish [<tarball>|<folder>]
查看镜像列表
image.png
三、创建Vue3项目
我们到Vite官网 https://cn.vitejs.dev/guide/根据官网一步步往下走即可
兼容性注意：Vite 需要 Node.js 版本 14.18+，16+。
然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。
3.1. 使用npm 、yarn 、pnpm 其中一种命令搭建Vite 项目即可
pnpm 是集合了npm 和yarn 优点的，在使用前需要先安装
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键不能删）
image.png
3.3. 选择项目框架
image.png
3.3. 选择项目语言，回车
image.png
3.4. 进入项目中重新打开cmd窗口，输入pnpm install
image.png
3.5. pnpm run dev 运行项目
image.png
3.6. 项目页面
image.png
