本文以 Naive-ui 框架中组件及方法的自动导入为例:
安装相关依赖
npm install naive-ui
npm install -D unplugin-auto-import
npm install -D unplugin-vue-components
vite.config.js 代码中的使用方法
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
AutoImport({
imports: [
{
'naive-ui': ['useDialog', 'useMessage', 'useNotification', 'useLoadingBar', 'createDiscreteApi']
}
],
// vue3 组件 js 语句中自动引入组件
resolvers: [NaiveUiResolver()]
}),
// vue3 组件中自动引入组件
Components({
resolvers: [NaiveUiResolver()]
})
],
})