创建项目 #

创建一个 Vue3+Vite 项目 #

首先我们要创建一个 Vue3+Vite 项目，目前 Vue 官方创建项目时默认就是 Vite 构建了，所以直接按照官网来就可以，如下：

确保你安装了最新版本的 Node.js，然后在命令行中运行以下命令

npm init vue@latest

# or

pnpm create vue@latest

PS： 我这边使用的是 pnpm ，它的优缺点我就不说了，大家自行百度吧，不过后面所有的命令中我都会写 npm 和 pnpm 两种，大家想用啥都无所谓的，工具而已，但是 pnpm 真的很香。

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示，我们的选择如下：

✔ Project name（项目名）: toolsdog
✔ Add TypeScript（添加TS）? : No
✔ Add JSX Support（添加JSX支持）? : No
✔ Add Vue Router for Single Page Application development（添加Vue-router）? : Yes
✔ Add Pinia for state management（添加状态管理Pinia）? : Yes
✔ Add Vitest for Unit testing（为单元测试添加Vitest）? : No
✔ Add Cypress for both Unit and End-to-End testing（为单元测试与端到端测试添加Cypress）? : No
✔ Add ESLint for code quality（为代码质量添加ESLint）? : Yes
✔ Add Prettier for code formatting（为代码格式添加Prettier）? : Yes

Scaffolding project in ./tooldog...
Done.

OK，解释一下

没有使用 TS 只是单纯的不太喜欢 TS，虽然有很多优点，但是个人认为它是一种束缚，大家想用的话选个 Yes 也可以，我们这里选了 No。

JSX 如果要使用的话，不如直接使用 React，所以我们选了 No。

做项目 VueRouter 必选，不解释。

状态管理也是必选，目前官方都不推荐 Vuex 而是 Pinia 了，后续大家用起来也是逃不过真香定律的。

Unit（单元测试）和 E2E（端到端测试），做组件库之类的是需要搞的，但一般对做项目来说，会很少留给我们写 Unit 和 E2E 的时间，所以我们先不选了，后续有时间写再单独安装（没有这个可能 🤥）。

最后的 ESLint 和 Prettier，一个保证质量，一个保证风格，必选，我们都选择 Yes 就好了。

这里都很基础，没有什么特殊要说的，不过我留意到很多新手前端甚至很多有些经验的前端都搞不懂 ESLint 和 Prettier 的区别，所以这里我们单独提一下。

2022年了，搞清楚 ESLint 和 Prettier 吧 #

先看 ESLint，它是一个 Lint 工具，Lint 工具专注于检测并修复错误。

ESLint 不仅能够检测代码中的错误，而且在许多情况下，可以为我们自动纠正错误。我们可以通过安装 ESlint 的相关插件，在各种 IDE 编译器下进行应用，通过实时检测代码格式问题或者是语法问题，可以使得程序员在编码时犯更少的错误，当然也可以通过命令行或者插件去自动修复问题。说白了，ESLint 这种 Lint 工具它是一个基本的静态代码分析器，使用 Lint 工具不会使我们的代码免受任何业务逻辑缺陷的影响，反而它会确保我们的代码在语法上准确并遵循一些最佳实践。

再来看 Prettier，它就是一个代码格式化工具，代码格式化工具并不会校验代码中的语法错误，而是在代码易读性上面下功夫。

Prettier 翻译过来是漂亮，其实意思就很明显了，就是让你的代码更漂亮，核心就是格式化代码，确保我们的代码遵守一些一致的格式化规则，比如像制表符宽度、单双引号、尾随逗号、行尾分号等等。这样的格式化规则可以确保我们的代码即使由不同的开发人员开发，或者是在不同的编辑器中也能保持一致，以此来保证整个项目中代码风格的一致性。

所以，为了满足程序的标准化，减少由于手动排版代码带来的时间消费，我们通常会将 ESLint 和 Prettier 一起应用，同时处理代码语法错误和代码风格格式化。它们两个的核心是并不冲突的，可能有人会问，我配置的 ESLint 和 Prettier 怎么经常冲突？

举个例子，我们在 ESLint 配置了一个代码规则，禁止代码尾部使用分号，但是如果我们项目中还用了 Prettier 做代码格式化，并且 Prettier 中配置了代码末尾自动加分号的规则，那就凉了，只要你在代码末尾使用了分号，ESLint 检测到就会给你警告（具体是报错还是警告基于你的 Lint 配置），那一般 ESLint 会默认自动给我们修复这个简单警告去掉代码后面分号，但是这个时候 Prettier 在格式化代码的时候检测到没有分号就会再给我们加上分号。。。

所以，即使有冲突，冲突的也是我们自己的配置，而不是ESLint 、 Prettier 本身有冲突，这点我们在配置的时候注意一下就好了。

如果看到这里还有人觉得这两个东西功能重复，用一个就好了。。。那你可能需要再看一次上文内容并且好好思考下这两个东西的核心是什么，他们只是在配置规则上少量重复，有一点点交集罢了。

毕竟 Prettier 不能为你检测因为摸鱼而产生的代码上的一些小问题，ESLint 也不能让你整个团队的代码风格保持一致，不是吗？

跑一下项目 #

上面我们初始化好了项目，那接下来先来启起来项目：

# 移动到项目根目录
cd toolsdog
# 安装依赖
npm install
# 启动项目
npm run dev

#or

cd toolsdog
pnpm install
pnpm dev

如果你的项目跑起来了，打开浏览器，应该就可以看到下面界面：

当然，还有一些同学是启不起来的，估计很多的报错是这个：

Error: Cannot find module 'node:url'

这是因为我们创建的项目下载的包里用了 node 较高版本的语法，比如

// vite.config.js 中引入 node url 模块时使用了 'node:url'
// 详见：https://nodejs.org/dist/latest-v16.x/docs/api/url.html#url
import { fileURLToPath, URL } from 'node:url'

Vue 官方文档上明确说了开始项目之前，请确保安装了最新版本的 NodeJS，我们的 node 版本要在 v16+ ，所以出现这种问题你的电脑 node 版本可能有些老了，赶快 node -v 查看一下自己电脑的 node 版本吧！

**PS：**对于经验不多的同学，可能认为换个版本太麻烦，所以，下面还是简单介绍下切换 node 版本包括切换 npm 镜像源，这是很基础的常识，新同学要敲黑板了。

nvm管理&切换Node版本 #

切换不同版本的 node 对前端来说是很常见的事情（比如那个可恶的 node-sass，就不支持 node16+ 。。。），如果每次都删除重装，那也太麻烦了，我们可以直接使用 nvm 工具去管理多个版本的 node，想使用哪个版本，安装好直接切换使用即可。

Windows 同学安装 nvm

使用 win 的同学需注意，安装 nvm 之前需要先卸载掉 node，所以安装前可以先查看下当前本机 node 版本，下载好 nvm 后再通过 nvm 安装上这个版本 node，防止突然换了其他版本 node 后对当前电脑上的项目造成一些影响。

使用 win 的同学安装起来可以很简单，打开 nvm-windows，找到最新版本。

如上图

nvm-noinstall.zip # 绿色免安装版，使用时需进行配置
nvm-setup.zip     # 全自动安装版，推荐使用

新手同学建议直接下载一键自动安装版就行，想挑战一下自己，也可以下载绿色免安装版本，不过需要自己配置一些环境变量（希望不会有这种大聪明，有简单的方式就用简单的嘛）。

下载下来 nvm-setup.zip 解压后，直接双击一路 next 安装即可，需要注意安装时选择安装地址，只要你选的安装地址目录没有中文和空格，一般不会出现问题的。

安装好后，打开 cmd 输入 nvm 回车显示 nvm 帮助命令提示即安装成功！

Mac 同学安装 nvm

Mac 同学如果装了 brew，那直接使用它安装即可

brew install nvm

如果没有 brew，使用官方 sh 脚本安装也可以，查看官方最新版脚本

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

当然，无论你用那种安装，安装好了之后都得去配置环境变量。

写环境变量前我们需要创建一下 .nvm 文件

mkdir ~/.nvm

可能我们安装 nvm 时自动创建了 .nvm 文件，但有些不会自动创建，mkdir 一下更安全，如果已经存在了，就会报该文件已存在，无伤大雅。

然后是写入环境变量。

brew 安装方式需要写入的环境变量：

export NVM_DIR="$HOME/.nvm"
  [ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh"  # This loads nvm
  [ -s "/usr/local/opt/nvm/etc/bash_completion.d/nvm" ] && . "/usr/local/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion

脚本安装方式需要写入的环境变量：

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

我们需要把上述对应的环境变量配置写入配置文件中，mac 的配置文件有 2 个，分别是 .bash_profile & .zshrc ，那它们有什么区别呢？

.bash_profile 和 .zshrc 文件均在 ～ 根目录下。

当我们修改 .bash_profile 配置文件，运行 source ~/.bash_profile 重新加载配置文件后，此配置文件只在当前窗口生效，电脑一重启就无了。

而我们修改 .zshrc 配置文件 ，运行 source ~/.zshrc 重新加载配置文件后，这个配置是永久生效的，因为我们的电脑每次重启时都会自动去执行一次 source ~/.zshrc 命令。

一般 mac 用户都会在 ~/.zshrc 文件末尾添加一句 source ~/.bash_profile 命令，这其实就是为了确保 .bash_profile 中的修改也可以随着.zshrc 配置文件的运行而永久生效。

所以，你如果也在 ~/.zshrc 文件末尾写了执行 ~/.bash_profile 的命令，那你在写环境变量时，写到任意一个配置文件里都可以，否则的话就老老实实在 ~/.zshrc 文件写入环境变量吧！！！

我们直接在终端通过 vim 去编辑配置文件

vim ~/.zshrc

不同的安装方式去 copy 上面对应的环境变量配置，写入到配置文件就行了。

写入成功后，按 esc 键，然后输入 :wq 保存并退出 vim 修改，此为 vim 命令，不懂的同学自行 Google。

最后重新加载配置文件

source ~/.zshrc

注意需要重启终端哦，重启后终端输入 nvm 回车显示 nvm 帮助命令提示即安装成功！

nvm 常用命令

nvm ls-remote # 查看node所有版本
nvm install node # 安装最新node可用版本
nvm version/nvm current # 查看当前nvm使用node版本
nvm list available # 查看可安装node版本
nvm list/nvm ls # 查看已安装版本
nvm install <version> # 安装指定node版本
nvm uninstall <version> # 卸载指定node版本
nvm use <version> # 切换使用指定版本node
nvm use [version] [arch] # 切换指定node版本和位数
nvm reinstall-packages <version> # 在当前版本node环境下，重新全局安装指定版本号的npm包

nvm on # 打开nodejs控制
nvm off # 关闭nodejs控制
nvm alias <name> <version> # 给不同的版本号添加别名
nvm unalias <name> # 删除已定义别名
nvm proxy # 查看设置与代理
nvm node_mirror [url] # 设置setting.txt中的node_mirror，如果不设置的默认是 https://nodejs.org/dist/
nvm npm_mirror [url] # 设置setting.txt中的npm_mirror,如果不设置的话默认的是： https://github.com/npm/npm/archive/.
nvm root [path] # 设置和查看root路径

如上， nvm 安装完成后我们查看下 node 版本，然后安装上想要使用的 node 版本就可以了，那针对我们这次 Vue3+Vite 项目，需要使用到 node 的 16+ 版本，那么我们可以直接选择安装 16+ 大版本中最新最稳定的小版本，即 v16.17.0 (Latest LTS: Gallium)。

之前还有同学问我 Latest、LTS、 Gallium 这些都是啥意思，这。。。好吧，给新同学们解释下。。

软件工程中，我们对一个项目的整个生命周期是没有一套常规定义的，所以不同的项目用的标识是有区别的，到如今，大致项目用的其实也差不多了，比较常用的几个我简单列了，如下：

Dev # 开发版，频繁出新功能，另外还修复了一些Bug和不稳定因素
Alpha # 软件或系统的内部测试版本，会有不少Bug，仅内部人员使用浏览器
Beta # 软件或系统的测试版本，这一版本一般是在Alpha版本后，会有不少新功能，同时也有很多Bug
Gamma # 软件或系统接近于成熟的版本，只须要作一些小的改进就能发行测试
RC # 发行候选版本，和Beta版最大的差别在于Beta阶段会一直加入新的功能，但是到了RC版本，几乎不会加入新功能，主要在于除错。RC版本是最终发放给用户的最接近正式版的版本，发行后改正bug就是正式版，正式版之前的最后一个测试版。
Release # 正式发布版本，最终交付用户使用的一个版本，该版本也称为标准版，也可用符号 ® 表示
GA # 也代表正式发布版本，这个版本也是正式版本，国外大多都是用GA来说明Release版本
Stable # 稳定版，在开源软件中，都有stable版，就是开源软件的最终发行版，此版本一般基于Beta版，已知Bug都被修复，一般情况下更新较慢
LTS # 长期支持版，这一版本会持续进行支持，最早用在 Ubuntu

所以，LTS 就是长期支持版，在 node 中它代表此版本会长期进行支持，很稳定，放心使用的意思。当然，这么多标识是没有必要死记硬背的，记住个大概就行，有看到不懂就万能 Coogle 嘛。

而 Latest 就是字面理解的最新版本的意思。

最后的 Gallium 其实就是 node 发版对应的一个代号，这个就比较随意了，就是个情怀，比如大家耳熟能详的 Vue ，扒一扒发版记录，它的每次发版都有代号：

Vue3.0 # One Piece：海贼王
Vue2.7 # Naruto：火影忍者
Vue2.6 # Macross：超时空要塞
Vue2.5 # Level E：灵异E接触
Vue2.4 # Kill la Kill：斩服少女
Vue2.3 # JoJo's Bizarre Adventure：JoJo的奇妙冒险
Vue2.2 # Initial D：头文字D 
Vue2.1 # Hunter X Hunter：全职猎人
Vue2.0 # Ghost in the Shell：攻壳机动队
Vue1.0 # Evangelion：新世纪福音战士
Vue0.12 # Dragon Ball：龙珠
Vue0.11 # Cowboy Bebop：星际牛仔
Vue0.10 # Blade Runner：银翼杀手
Vue0.9  # Animatrix：黑客帝国动画版

所以，你了解了吗？如果你运行项目报了上述错误，那么在安装并使用上高版本 node 之后，重启编辑器再次运行项目，应该就可以看到启动成功了！

nrm管理&切换镜像源 #

除了管理 node 版本外，npm 镜像源的管理在开发中也是比较常用的，那假如你没有翻出墙的话，可能安装某些依赖会很慢甚至失败，你可以尝试切换一下 npm 镜像源，或者你的公司有 npm 私服，你也可以设置一个公司私服的源地址，使用 nrm 能够很好的管理和切换这些源

全局安装

npm install -g nrm

当你安装完成后，可以使用 nrm ls 命令查看当前可用的源

如上，这是我电脑 nrm 管理的镜像源列表，最后一个是我公司内网的所以打码了，除了最后一个都是安装 nrm 自带的，你可以使用 nrm use <registry> 命令很方便的去切换源，npm 默认就是列表中名为 npm 的源，如果你下载不下来一些工具，可以切换为 taobao 源，当然安装完成后最好切回来，因为除了 npm 源，其他源在下载某些包时，都可能会出现一些莫名的问题。

常用命令

nrm -h /nrm -help  # 查看 nrm 帮助（相关命令、信息）
nrm -V             # 查看当前 nrm 版本
nrm ls             # 查看当前 nrm 中可用的镜像源地址
nrm current        # 查看当前使用镜像源

nrm use <registry> # 切换为某个镜像源 registry-镜像源名
nrm add <registry> <url> # 添加一个镜像源 registry-镜像源名 url-镜像源地址
nrm del <registry>  # 删除一个镜像源
nrm test <registry> # 测试该镜像源下载响应时间

PS： 当然还有像 yrm 等其他管理源的工具，但工具不在多，而是够用就行。