【vue3】 自动引入实现

在vue3中用到ref、reactive等等时，我们总是需要引入组件然后使用，非常的麻烦，怎么能自动引入？

1.安装插件

插件(两个组件, 都是 antfu( vite 核心团队成员 ) 写的)

npm i unplugin-auto-import unplugin-vue-components -D

使用, 下面是最简单的使用方法
vue component 文档
auto-import

2.配置

vite.config.js

// https://vitejs.dev/config/
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue', 'vue-router'],
    }),
    Components({
      resolvers: [ElementPlusResolver({ ssr: false, directives: false })],
      dirs: ['src/layout/components', 'src/components'],
      dts: true,
    }),
  ]
})

3.执行命令

npm run dev, 执行完成之后, 会生成两个文件 auto-imports.d, components.d