一、安装 nodejs 环境
推荐最新稳定版本nodejs
方式一：直接下载并安装 nodejs
https://nodejs.org/en
方式二：使用 nodejs 版本管理工具 nvm 下载安装 nodejs
注意：如果本机已经安装了 nodejs 版本，请先卸载再进行 nvm 安装
- nvm 下载地址
https://github.com/coreybutler/nvm-windows/releases
- 使用 nvm 安装 nodejs
nvm install 16.16.0
如果总是安装失败，建议将下载镜像源指向淘宝（这步也很重要，否则在安装 node 的时候会出现卡死，npm 安装不成功的情况），打开 nvm 安装包下的 settings.txt 文件，在最后添加以下代码：
node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/
- 切换到指定版本的 nodejs
nvm use 16.16.0
- nvm 常用命令
nvm list 查看已有的版本列表
nvm use 16.16.0 切换nodejs版本
nvm install 16.16.0 下载nodejs
nvm uninstall 16.16.0 卸载nodejs
npm install -g cnpm --registry=https://registry.npmmirror.com 安装cnpm淘宝镜像
二、创建vue3项目
方式一：通过 @vue/cli 创建项目 （webpack）
注意：node 版本必须在 v9 以上，如果本机项目依赖 v9 版本以下 nodejs，建议使用 nodejs 版本管理工具 nvm
- 全局安装@vue/cli 脚手架
npm install -g @vue/cli
安装成功后，查看 vue 版本
vue -V
- 初始化 vue3x 项目
vue create vue3-app
选项
1. Manually select features (手动选择)
2. Babel + Router + Vux + Css Pre-processors + Linter / Formatter
3. 3.x
4. Y
5. Sass/SCSS(with dart-sass)
6. Eslint + Prettier
7. Lint on save + Lint and fix on commit
8. In dedicated config files
9. Y （保存为默认设置）
- 启动项目
cd vue3-app
npm run serve
方式二：通过 vite 创建项目（vite构建 + rollup打包）
注意：node 版本必须在 v16.0.0 以上， npm版本必须在 v8.0.0 以上
- 创建vue3项目
npm init vue@latest
选项
✔ Project name: … vue3-app-vite
✔ Add TypeScript? … No
✔ Add JSX Support? … No
✔ Add Vue Router for Single Page Application development? … No
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No
✔ Add Cypress for both Unit and End-to-End testing? … No
✔ Add ESLint for code quality? … Yes
✔ Add Prettier for code formatting? … Yes
- 安装依赖并启动项目
cd vue3-app-vite
npm install
npm run dev
三、eslint+prettier 实现代码自动格式化
1. 在vscode中安装Eslint、Prettier - Code formatter 插件
2. 在vscode中将默认格式化插件设置成 Prettier - Code formatter
步骤：右键 --> 使用...格式化文档 --> 配置默认格式化程序...
3. 添加 .prettierrc.json 配置并执行全局eslint校验
解决页面初始化 prettier 爆红问题，如果配置后不生效需重启编辑器
- 在项目根目录新建 .prettierrc.json 文件，代码如下
原因是在不同系统下的行尾换行符不同，我们这里忽略此检查，否则全局飘红
{
"endOfLine": "auto",
"printWidth": 200
}
- 执行全局eslint校验
npm run lint
- 在 .eslintrc.cjs 中添加自定义 rules 规则 和 env 配置
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')
module.exports = {
root: true,
env: {
node: true // 识别 nodejs 配置
},
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/eslint-config-prettier/skip-formatting'
],
parserOptions: {
ecmaVersion: 'latest'
},
rules: {
'vue/multi-word-component-names': 'off', // 默认vue文件必须大驼峰命名，off 关闭文件名称校验
}
}
4. 对vue3项目进行全局eslint检验和Prettier格式化
vue3 项目 package.json
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
"format": "prettier --write src/"
},
- 全局 eslint 检验
npm run lint
- 全局 Prettier 格式化
npm run format
