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

啥子花道

于 2024-09-04 14:04:36 发布

阅读量120

点赞数 4

文章标签：自动化 vue.js 前端

本文链接：https://blog.csdn.net/2301_80826038/article/details/141891937

版权

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