vue3+ts+vite项目相关配置

一、unplugin-vue-components/vite

按需自动导入组件

安装：npm i -D unplugin-vue-components

配置vite：vite.config.ts

import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({ /* options */ }),
  ],
})

配置项：

import Components from 'unplugin-vue-components/vite'
import {
  AntDesignVueResolver,
  // ElementPlusResolver
} from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
   Components({
    resolvers: [
      AntDesignVueResolver({
        importStyle: 'less',
      }),
      // ElementPlusResolver({
      //   importStyle: false, // 默认css，测试时会报错，不认识扩展名.css
      // }),  
    ],
    dts: 'types/components.d.ts'  // 生成ts声明文件
  })
})

最后将生的components.d.ts文件，添加到ts的配置文件的include字段中：

"include": ["env.d.ts", "src/**/*", "src/**/*.vue", "types/components.d.ts"],

二、unplugin-auto-import

是为 Vite、Webpack、Rollup 和 esbuild 按需自动导入 API，支持TypeScript。
参考：https://www.npmjs.com/package...

例如：

import { computed, ref } from 'vue' // 配置后，可省略导入语句
const count = ref(0)
const doubled = computed(() => count.value * 2)

安装：npm i -D unplugin-auto-import

配置vite：vite.config.ts

import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({ /* options */ }),
  ],
})

常用配置：

AutoImport({
  // 目标文件，需要自动引的文件后缀，default [/\.[jt]sx?$/, /\.vue\??/]
  include: [
    /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
    /\.vue$/, /\.vue\?vue/, // .vue
    /\.md$/, // .md
  ],
  // 全局引入插件
  imports: [
    // presets
    // '库名', 
    'vue',
    'vue-router',
    // custom
    {
      '@vueuse/core': [
        // named imports
        'useMouse', // import { useMouse } from '@vueuse/core',
        // alias
        ['useFetch', 'useMyFetch'], // import { useFetch as useMyFetch } from '@vueuse/core',
      ],
      'axios': [
        // default imports
        ['default', 'axios'], // import { default as axios } from 'axios',
      ],
      '[package-name]': [
        '[import-names]',
        // alias
        ['[from]', '[alias]'],
      ],
    },
  ],
  // eslint报错解决
  eslintrc: {
    enabled: false, // Default `false`
    filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
    globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
  },
  // 函数解析器，例如element-plus的ElementPlusResolver
  // see https://github.com/antfu/unplugin-auto-import/pull/23/
  resolvers: [    
    /* ... */
  ],
  // ts声明文件生成位置和文件名称
  dts: 'types/components.d.ts', // 放在项目根目录下的types文件夹
})

eslintrc

是用来解决eslint报错问题的配置项。当enabled为true时，重新启动项目，会根据filepath生成一个eslint的配置文件。将这个文件引入到eslint的配置文件中，
// .eslintrc.js

module.exports = {
  extends: [
    './.eslintrc-auto-import.json',
  ],
}

配置完成后，eslint报错就会消失。
注意：生成配置文件之后，最好把enable设置为false。否则每次重新加载时会重新生成此文件，导致eslint有时找不到它。当需要更新配置文件时，再重新打开。

resolvers

引入解析器，比如ElementPlusResolver()，自动导入Element Plus相关函数，如：ElMessage, ElMessageBox... (带样式)

最后将生的auto-imports.d.ts文件，添加到ts的配置文件的include字段中：

"include": ["env.d.ts", "src/**/*", "src/**/*.vue", "types/components.d.ts", "types/auto-imports.d.ts"],

否则会报错：Cannot find name ‘ref’.（找不到名称“ref”）

三、unplugin-icons

按需自动导入图标
参考：https://www.npmjs.com/package...

安装：npm i -D unplugin-icons

配置vite：vite.config.ts

import Vue from '@vitejs/plugin-vue'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Vue(),
    Components({
      resolvers: IconsResolver({
        prefix: false, // 默认前缀是‘i’, 这里设置不使用前缀
        // ant design icons的collection：“ant-design”，加在每个icon名前
        // 使用：<ant-design-menu-outlined />     
      }),
    }),
    Icons({ 
      // It will install the icon set when you import them. 
      // The right package manager will be auto-detected (npm, yarn or pnpm).
      // 比如，在模板中使用了<ant-design-menu-outlined />
      // 会自动安装 "@iconify-json/ant-design": "^1.1.4"
      // https://iconify.design/有ant-design icons
      autoInstall: true
    }),
  ],
})

如果手动安装了@ant-design/icons-vue，只需配置resolveIcons: true
@ant-design/icons-vue会在<svg>外会包裹<span>, 并设置样式类。

Components({
      resolvers: [
        AntDesignVueResolver({      
          importStyle: 'less',
            /**
            * resolve `ant-design-vue' icons
            * requires package `@ant-design/icons-vue`
            * @default false
            */
            resolveIcons: true
        }),
 })