Vue3+Vite 之 从0到1搭建系统 - Part 1

记录Vue3 + Vite 搭建系统的过程。Part 1: 创建项目以及配置。前置准备：Node环境18+

创建及初始化

使用命令行：

npm create vite@latest
// or
yarn create vite

// 输入项目名称
✔ Project name: my-vue-app
// 选择框架，选择vue
✔ Select a framework: vue 

// 选择ts 或 js 或 Customize with create-vue
// 选择js的则接着第三部分配置依赖
✔ Select a variant: JavaScript 

// 也可以选择 Customize with create-vue 【推荐】
// 可以直接选择需要配置的东西，减少许多步骤
✔ Select a variant: › Customize with create-vue ↗
✔ **是否使用 TypeScript 语法？** ... 否
✔ **是否启用 JSX 支持？** ... 是
✔ **是否引入 Vue Router 进行单页面应用开发？** ...是
✔ **是否引入 Pinia 用于状态管理？** ... 是
✔ **是否引入 Vitest 用于单元测试？** ... 是
✔ **是否要引入一款端到端（End to End）测试工具？** › 不需要
✔ **是否引入 ESLint 用于代码质量检测？** ... 是
✔ **是否引入 Prettier 用于代码格式化？** ... 是
✔ **是否引入 Vue DevTools 7 扩展用于调试? (试验阶段)** ... 否

也可以通过附加的命令行选项直接指定项目名称和你想要使用的模板：

# npm 7+, 需要额外加 --:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

# bun
bun create vite my-vue-app --template vue

详情可见Vite官方文档 接着可以按照步骤，按照依赖，运行项目

cd my-vue-app
npm install
npm run dev

项目文件结构

Select a variant 选择 JavaScript：

Select a variant 选择 Customize with create-vue

添加依赖配置

安装依赖

// 配置sass
npm i node-sass sass-loader sass -D

// 配置 eslint 并初始化
npm i -D eslint
npx eslint --init
// 根据自己风格选择：
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · vue
✔ Does your project use TypeScript? · javascript
✔ Where does your code run? · browser, node
✔ Which style guide do you want to follow? · standard
The config that you've selected requires the following dependencies

// 配置vite-plugin-eslint
// 用于配置vite运行时自动检测eslint规范
npm i -D vite-plugin-eslint
// 配置eslint-parser、prettier
npm i -D @babel/core @babel/eslint-parser
npm i -D prettier eslint-config-prettier eslint-plugin-prettier

// 出现报错补充安装
npm i @vue/eslint-config-standard
npm i eslint-plugin-n

Vite + Vue3 + EsLint + Prettier 超简单配置步骤

vite.config

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 添加的内容
import path from 'path'

export default defineConfig({
  server: {
      port: 9521,
      proxy: {
        // 代理
        // '/proxy'："http://localhost:10086"
      }
  },
  plugins: [
    vue()，
    eslintPlugin({
      // 增加下面的配置项,这样在运行时就能检查eslint规范
      include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue']
    })
  ],
  // 添加的内容：
  // 配置路径别名，用@替代./src
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  css: {
    // 引入scss配置
    /* webpack 对应配置 start
    loaderOptions: {
      sass: {
        prependData: `@import "@/assets/variable.scss";`
      }
    }
    * webpack 对应配置 end
    */
    // vite配置
    preprocessorOptions: {
      scss: {
        additionalData: '@import "../src/assets/variable.scss";',
        javascriptEnabled: true
      }
    }
  }
})

.eslintrc

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended', // 使用推荐的eslint
    'plugin:vue/vue3-recommended', // 使用插件支持vue3
    // 如果你没有安装第7步,以下两个包不要引入,否则报错
    'plugin:prettier/recommended',
    'eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 13,
    sourceType: 'module',
    ecmaFeatures: {
      modules: true,
      jsx: true
    },
    requireConfigFile: false,
    parser: '@babel/eslint-parser'
  },
  // eslint-plugin-vue
  plugins: [
    'vue', // 引入vue的插件 vue <==> eslint-plugin-vue
    // 这个包需要安装了第7步的三个包再引入
    'prettier' // 引入规范插件  prettier <==>  eslint-plugin-prettier
  ],
  globals: {
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly'
  },
  // 这里时配置规则的,自己看情况配置
  rules: {
    semi: ['warn', 'never'], // 禁止尾部使用分号
    'no-console': 'warn', // 禁止出现console
    'no-debugger': 'warn', // 禁止出现debugger
    'no-duplicate-case': 'warn', // 禁止出现重复case
    'no-empty': 'warn', // 禁止出现空语句块
    'no-extra-parens': 'warn', // 禁止不必要的括号
    'no-func-assign': 'warn', // 禁止对Function声明重新赋值
    'no-unreachable': 'warn', // 禁止出现[return|throw]之后的代码块
    'no-else-return': 'warn', // 禁止if语句中return语句之后有else块
    'no-empty-function': 'warn', // 禁止出现空的函数块
    'no-lone-blocks': 'warn', // 禁用不必要的嵌套块
    'no-multi-spaces': 'warn', // 禁止使用多个空格
    'no-redeclare': 'warn', // 禁止多次声明同一变量
    'no-return-assign': 'warn', // 禁止在return语句中使用赋值语句
    'no-return-await': 'warn', // 禁用不必要的[return/await]
    'no-self-compare': 'warn', // 禁止自身比较表达式
    'no-useless-catch': 'warn', // 禁止不必要的catch子句
    'no-useless-return': 'warn', // 禁止不必要的return语句
    'no-mixed-spaces-and-tabs': 'warn', // 禁止空格和tab的混合缩进
    'no-multiple-empty-lines': 'warn', // 禁止出现多行空行
    'no-trailing-spaces': 'warn', // 禁止一行结束后面不要有空格
    'no-useless-call': 'warn', // 禁止不必要的.call()和.apply()
    'no-var': 'warn', // 禁止出现var用let和const代替
    'no-delete-var': 'off', // 允许出现delete变量的使用
    'no-shadow': 'off', // 允许变量声明与外层作用域的变量同名
    'dot-notation': 'warn', // 要求尽可能地使用点号
    'default-case': 'warn', // 要求switch语句中有default分支
    eqeqeq: 'warn', // 要求使用 === 和 !==
    curly: 'warn', // 要求所有控制语句使用一致的括号风格
    'space-before-blocks': 'warn', // 要求在块之前使用一致的空格
    'space-in-parens': 'warn', // 要求在圆括号内使用一致的空格
    'space-infix-ops': 'warn', // 要求操作符周围有空格
    'space-unary-ops': 'warn', // 要求在一元操作符前后使用一致的空格
    'switch-colon-spacing': 'warn', // 要求在switch的冒号左右有空格
    'arrow-spacing': 'warn', // 要求箭头函数的箭头前后使用一致的空格
    'array-bracket-spacing': 'warn', // 要求数组方括号中使用一致的空格
    'brace-style': 'warn', // 要求在代码块中使用一致的大括号风格
    camelcase: 'warn', // 要求使用骆驼拼写法命名约定
    indent: ['warn', 4], // 要求使用JS一致缩进4个空格
    'max-depth': ['warn', 4], // 要求可嵌套的块的最大深度4
    'max-statements': ['warn', 100], // 要求函数块最多允许的的语句数量20
    'max-nested-callbacks': ['warn', 3], // 要求回调函数最大嵌套深度3
    'max-statements-per-line': ['warn', { max: 1 }], // 要求每一行中所允许的最大语句数量
    quotes: ['warn', 'single', 'avoid-escape'], // 要求统一使用单引号符号
    'vue/require-default-prop': 0, // 关闭属性参数必须默认值
    'comma-dangle': 0,
    'vue/singleline-html-element-content-newline': 0, // 关闭单行元素必须换行符
    'vue/multiline-html-element-content-newline': 0, // 关闭多行元素必须换行符
    // 要求每一行标签的最大属性不超五个
    'vue/max-attributes-per-line': ['warn', { singleline: 5 }],
    // 要求html标签的缩进为需要4个空格
    'vue/html-indent': [
      'warn',
      4,
      {
        attribute: 1,
        baseIndent: 1,
        closeBracket: 0,
        alignAttributesVertically: true,
        ignores: []
      }
    ],
    // 取消关闭标签不能自闭合的限制设置
    'vue/html-self-closing': [
      'error',
      {
        html: {
          void: 'always',
          normal: 'never',
          component: 'always'
        },
        svg: 'always',
        math: 'always'
      }
    ]
  }
}

.prettierrc

{
  "tabWidth": 2, // 缩进
  "semi": false,  // 句尾分号         
  "trailingComma": "none",
  "singleQuote": true, // 使用单引号
  "printWidth": 150, // 一行最多150个字符
  "arrowParens": "avoid", // 在单独的箭头函数参数周围包括括号
  "bracketSpacing": true, // 在对象文字中的括号之间打印空格
  "endOfLine": "auto", //
  "useTabs": false, // 使用制表符而不是空格缩进行
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "jsxBracketSameLine": false,
  "requirePragma": false,
  "insertPragma": false,
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "css"
}

后言

Eslint 和 Prettier 是前端比较常见的两种代码格式化工具，两者有重叠的部分，规则不一致时会出现报错。两者的区别在于

• Eslint是检查代码质量和风格的工具，会检查不合规范的地方，部分问题会自动修复
• Prettier是对代码进行格式化，不关注代码质量检查。

彻底搞懂ESLint与Prettier在vscode中的代码自动格式化