快速通过vite创建vue3项目

• node版本16.19.1,使用命令npm init vite@latest完成项目创建。
• 创建完成后，在vite.config文件设置路径别名等。注意点：如果path模块引入报错的话，试着执行
• npm install @types/node -D

vite.config 文件配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {resolve} from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve:{
    alias:{
      '@':resolve('./src')
    }
  },
  base:'./',
  server:{
    port:4000,
    open:true,//启动自动打开浏览器
    cors:true//允许跨域
  }
})

eslint+prettier进行代码格式化

npm install eslint @vue/cli-plugin-eslint eslint-plugin-vue prettier eslint-config-prettier eslint-plugin-prettier --save-dev //安装 ESLint 和 Prettier 以及相关插件

在根目录创建.eslintrc.js文件

// javascript 代码风格检查工具 eslint 配置文件。它定义了项目的语法环境、扩展和规则等信息，以便在编码过程中进行语法检查和风格统一
module.exports = {
  root: true,//root: true 表示这是 eslint 的根配置文件。
  env: { //env: { node: true } 声明该代码运行于 node.js 环境。
    node: true
  },
  extends: [ //extends 属性包含了一些预定义的规则集合，用于保证代码的质量和风格一致性。
    'plugin:vue/vue3-essential',// 使 eslint 支持 vue 3 模板。
    'eslint:recommended', //启用 eslint 推荐的规则。
    '@vue/typescript/recommended',//添加 typescript 相关的推荐规则集。
    '@vue/prettier', //是为了与 prettier 集成，保证代码格式的一致性。
    '@vue/prettier/@typescript-eslint' //是为了与 prettier 集成，保证代码格式的一致性。
  ],
  parserOptions: { //属性声明了使用的 ecmascript 版本。
    ecmaVersion: 2020
  },
  rules: { //属性定义了一些自定义的规则，如不允许在生产环境下使用 console 和 debugger 语句。
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  },
  overrides: [ //属性定义了针对某些特定文件或目录的覆盖规则，如指定 mocha 测试相关的语法环境。
    {
      files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
      env: {
        mocha: true
      }
    }
  ]
}

在 package.json 文件中添加以下配置：

{
     "eslintConfig": {
       "extends": [
         "plugin:vue/essential",
         "eslint:recommended",
         "plugin:@typescript-eslint/recommended",
         "prettier"
       ],
       "plugins": ["@typescript-eslint", "prettier"],
       "parserOptions": {
         "parser": "@typescript-eslint/parser"
       },
       "rules": {
         "no-console": "off",
         "no-debugger": "off",
         "prettier/prettier": "error"
       }
     },
     "prettier": {
       "singleQuote": true,
       "semi": true,
       "trailingComma": "all",
       "printWidth": 80,
       "tabWidth": 2
     }
   }

在VS Code 中配置保存时自动运行 ESLint

setting.json设置

{
  "eslint.enable": true, // 开启eslint检查
  "editor.codeActionsOnSave": {
    // 使用eslint来fix，包括格式化会自动fix和代码质量检查会给出错误提示
    "source.fixAll.eslint": true
  },
  "eslint.codeActionsOnSave.rules": null
}