Bootstrap

Vite+Vue3+Naive-ui 中组件和模块的自动化导入方法

本文以 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()]
    })
  ],
})

;