Vue 3 + Typescript + Vite

1. yarn create @vitejs/app
2. yarn add sass -D
3. 添加.editorconfig，配合插件EditorConfig VS Code
4. yarn add prettier -D，添加.prettierrc，配合插件Prettier - Code formatter
5. yarn add eslint -D，然后运行 npx eslint --init，如何失败则npm i @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue -D，配置.eslintrc.js，配合插件EsLint，此时.eslintrc.js 文件如下：

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: ['plugin:vue/essential', 'airbnb-base'],
  parserOptions: {
    ecmaVersion: 12,
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {}
}

6. yarn add eslint-plugin-prettier eslint-config-prettier -D，在.eslintrc.js 添加配置如下：

module.exports = {
  ...
  extends: [
    'plugin:vue/essential',
    'airbnb-base',
    'plugin:prettier/recommended' // 添加 prettier 插件
  ],
  ...
}

7. .eslintrc.js配置添加：

rules: {
  'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  'vue/no-multiple-template-root': 'off',
  semi: [2, 'never'],
},

9. 尝试:class="$style.msg"的写法，<style module>
10. 路径别名配置，同事也修改tsconfig.json和.eslintrc.js
11. import.meta.env.VITE_TOKEN像这样读取.env.development中的配置
12. vite打包后的资源目录修改
13. vite-plugin-compression gzip

import viteCompression from 'vite-plugin-compression'

plugins:[
  ...
  // gzip压缩
  viteCompression({
        //生成压缩包gz
        verbose: true,
        disable: false,
        threshold: 10240,
        algorithm: 'gzip',
        ext: '.gz',
    }),
]

14. yarn add vite-plugin-components -D，按需导入element-plus组件，yarn add element-plus，在vite.config.js中配置他们，vite-plugin-style-import貌似不怎么好用?
15. element-plus按需导入打包报错，tsconfig.json中配置"skipLibCheck": true

其他

This template should help get you started developing with Vue 3 and Typescript in Vite.

Recommended IDE Setup

• VSCode + Volar

Type Support For .vue Imports in TS

Since TypeScript cannot handle type information for .vue imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in .vue imports (for example to get props validation when using manual h(...) calls), you can enable Volar's .vue type support plugin by running Volar: Switch TS Plugin on/off from VSCode command palette.