一、安装 nodejs 环境

推荐最新稳定版本nodejs

方式一：直接下载并安装 nodejs

https://nodejs.org/en

方式二：使用 nodejs 版本管理工具 nvm 下载安装 nodejs

注意：如果本机已经安装了 nodejs 版本，请先卸载再进行 nvm 安装

1. nvm 下载地址

https://github.com/coreybutler/nvm-windows/releases

2. 使用 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/

3. 切换到指定版本的 nodejs

nvm use 16.16.0

4. 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.npm.taobao.org   安装cnpm淘宝镜像

二、创建vue3项目

方式一：通过 @vue/cli 创建项目 （webpack）

注意：node 版本必须在 v9 以上，如果本机项目依赖 v9 版本以下 nodejs，建议使用 nodejs 版本管理工具 nvm

1. 全局安装@vue/cli 脚手架

npm install -g @vue/cli

安装成功后，查看 vue 版本

vue -V

2. 初始化 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 （保存为默认设置）

3. 启动项目

cd vue3-app
npm run serve

方式二：通过 vite 创建项目（vite构建 + rollup打包）

注意：node 版本必须在 v16.0.0 以上， npm版本必须在 v8.0.0 以上

1. 创建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

2. 安装依赖并启动项目

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 爆红问题，如果配置后不生效需重启编辑器

1. 在项目根目录新增 .prettierrc.json

{
  "endOfLine": "auto"
}

2. 执行全局eslint校验

npm run lint

3. 在 .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/"
  },

1. 全局 eslint 检验

npm run lint

2. 全局 Prettier 格式化

npm run format