vue3+vite 实现ref、element-plus组件等自动带入

最新推荐文章于 2025-03-20 02:10:28 发布

前端搬砖达人

最新推荐文章于 2025-03-20 02:10:28 发布

阅读量1.5k

点赞数 9

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/wyq12138/article/details/135650505

版权

本文介绍了如何在Vue3项目中通过unplugin-auto-import和unplugin-vue-components插件自动导入ref、reactive等Vue函数和element-plus等组件，减少手动引入的繁琐，提升开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在日常开发中,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()],
    }),
  ],