Vite项目插件

 1、unplugin-vue-components 自动导入组件

      1.1 安装

npm install unplugin-vue-components -D

      1.2 自动导入ui库,该插件内置了大多数流行库解析器 Element Plus Ant Design Vue Vant Element UI Headless UI 

// vite.config.js
import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import {
  ElementPlusResolver,
  VantResolver,
  AntDesignVueResolver,
} from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    Components({
      //导入自己的组件 指定组件位置，默认是src/components
      dirs: ['src/components', 'src/views'],
      // ui解析库
      resolvers: [
        ElementPlusResolver(),
        AntDesignVueResolver(),
        VantResolver(),
      ],
      //配置文件生成位置, 插件会生成一个自己组件路径的components.d.ts文件
      dts: 'src/components.d.ts'
      // 其他配置
      // ...
    })
  ]
})

2、unplugin-auto-import/vite 自动导入vue3的hooks

2.1 安装

npm i -D unplugin-auto-import

2.2 配置，默认在根目录生成auto-imports.d.ts文件，并将其添加到tsconfig.json include中

// vite.config.js
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      //自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: ['vue', 'vue-router', 'vue-i18n', '@vueuse/head', '@vueuse/core'],
      eslintrc: {
        // 默认 false, 生成一次即可，避免每次工程启动都生成，一旦生成配置文件之后，改成 false。
        // 否则这个文件每次会在重新加载的时候重新生成，这会导致 eslint 有时会找不到这个文件。当需要更新配置文件的时候，再重新打开
        enabled: false,
        // 默认就是 ./.eslintrc-auto-import.json
        // filepath: './.eslintrc-auto-import.json', 
        // globalsPropValue: true, // 默认 true
      },
      // auto-import.d.ts生成的位置，默认在根目录生成
      // dts: 'src/auto-import.d.ts'
    })
  ]
})

如果使用了eslint校验规则，在 vue 文件中会报一个 eslint 报错问题: 'ref' is not defined

则：配置 eslintrc.enabled 为 true，重启项目生成 .eslintrc-auto-import.json 文件（浏览器需要访问所有应用到 vue/element api 的页面才会生成所有自动导入 api 的文件 json），生成后改为 false。最后在 .eslintrc.js 文件 extends中引入生成的 json

3、vite-plugin-style-import  按需导入组件库样式

3.1安装

npm install vite-plugin-style-important -D

3.2 配置

// vite.config.js
import { defineConfig } from 'vite'
import styleImport, {
  AndDesignVueResolve,
  VantResolve,
  ElementPlusResolve,
} from 'vite-plugin-style-import'

export default defineConfig({
  plugins: [
    styleImport({
      resolves: [
        AndDesignVueResolve(),
        VantResolve(),
        ElementPlusResolve(),
      ],
      // 自定义规则
      libs: [
        {
          libraryName: 'ant-design-vue',
          esModule: true,
          resolveStyle: (name) => {
            return `ant-design-vue/es/${name}/style/index`
          }
        }
      ]
    })
  ],
  // 引用使用less的库要配置一下
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  }
})

4、vite-plugin-svg-icons

5、vite-plugin-monkey