vite-vue3-template

Vite + Vue@3全家桶 + Element-Plus + Sass + ESLint With Prettier + lint-staged With husky

各个工具的版本号见package.json

• Vite

  • vitejs

• Vue@3全家桶

  • vue-next
  • vue-router-next
  • [email protected]

• Element-Plus

  • element-plus

  注：element-plus采用按需引入的方式。官方建议在引入样式式最好是全部引入，这个在最新的说明里面不存在。

  按需引入vite-plugin-style-import插件对最新的Element-Plus支持不太好，建议使用官方的自动导入

• Sass(Scss) vite内部对sass做了处理，我们直接安装sass依赖即可使用

  npm i sass -D
  

• ESLint + Prettier

  • eslint
  • prettier
  • eslint-config-prettier
  • eslint-plugin-prettier
  • eslint-plugin-vue

  对应代码：

  // .eslintrc.js
  plugins: ['vue', 'prettier'],
  extends: ['plugin:vue/vue3-recommended', 'prettier'],
  rules: {
    'prettier/prettier': [
      'error',
      {
        singleQuote: true, // 使用单引号
        arrowParens: 'always', // 箭头函数始终包含圆括号
        endOfLine: 'auto', // 自动识别换行是LF还是CRLF，默认prettier是LF
        trailingComma: 'none' // 最后不需要逗号
      },
    ],
  }
  

  endOfLine的官方文档的解释：链接地址

  trailingComma：链接地址

  VSCode设置里面加入保存文件时自动修复

  "editor.codeActionsOnSave": {"source.fixAll": true}
  

• lint-staged + husky

  • lint-staged
  • husky

  注意：husky 6 + lint-staged 11的使用方式跟前面的版本不再一样，老的配置方式不再适用，建议使用lint-staged的官方命令来自动安装相关配置 本模板已替换为husky 4 + lint-staged 9 执行命令 npx mrm@2 lint-staged，执行这个命令前请保证已配置了正确的ESLint。