在日常开发中,vue3需要手动引入ref、reactive、onMounted等,这样比较麻烦,代码也会加多,所以这里使用了unplugin-auto-import 以及unplugin-vue-components插件进行自动导入
自动导入element-plus等组件
1、下载
npm install -D unplugin-vue-components unplugin-auto-import
2、配置
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
// ...
plugins: [
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})
自动导入ref等
plugins: [
vue(),
AutoImport({
// 自动导入 Vue 相关函数,如:ref, reactive, toRef 等
imports: ['vue'],
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
自此在日常开发中就不用手动引入了,非常方便