vite 自动导入组件、API，包括element-plus、icon

一、下载

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

1. unplugin-auto-import:

自动导入Api,支持Vite, Webpack, Rollup and esbuild。

使用：

// import { computed, ref } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)

即不再需要手动引入Api。

2.unplugin-vue-components

为Vue自动按需导入组件，不再需要手动导入再声明

支持： Vite, Webpack, Vue CLI, Rollup, esbuild等

使用：

<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

<script>
// import HelloWorld from './src/components/HelloWorld.vue'

export default {
  name: 'App',
//  components: {
//    HelloWorld
//  }
}
</script>

 

 3.在Vite中配置实现自动导入组件，如element plus

// 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()],
    }),
  ],
})

 

4.自动导入components下的自定义组件

在上面代码里加入

 // vite.config.js
 Components({
        // dirs 指定组件所在位置，默认为 src/components
        // 可以让我们使用自己定义组件的时候免去 import 的麻烦
        dirs: ['src/components/', 'src/pages/lauch/components/'],
        // 配置需要将哪些后缀类型的文件进行自动按需引入，'vue'为默认值
        extensions: ['vue'],
        // 解析组件，这里以 Element Plus 为例
        resolvers: [ElementPlusResolver()],
        // 生成components.d.ts
        dts: true,
        // 遍历子目录
        deep: true
      }),

dts：true 或者为 'src/components.d.ts'时，则会自动生成components.d.ts

components.d.ts：
含义：**.d.ts为全局声明文件，只包含声明类型，并不包括功能实现。其中d的意思就是declare(声明)。
内容：

 

 

作用：鼠标放在自动导入的组件上面时给出提示：

 

 

5.自动导入API

    AutoImport({
        // 自动导入vue相关的Api
        imports: [
          'vue',
          'vue-router',
          '@vueuse/core',
          /* 自定义 */
          {
　　　　      // onBeforeRouteLeave 'vue-router’的这个Api未被自动导入，在这里补充
            'vue-router': ['onBeforeRouteLeave'],
            'lodash/isUndefined': [['default', 'isUndefined']],
            /* 自定义模块 */
            api: [['default', 'api']], 
            hooks: [['default', 'hooks']], 
            store: [['default', 'store']] 
          }
        ],
        // 生成auto-import.d.ts声明文件
        dts: 'src/auto-import.d.ts',
　　　  // 解析Api
        resolvers: [ElementPlusResolver()]
      }),

 

6.难点：自动导入element plus的icon

（1）先安装

npm install @element-plus/icons-vue unplugin-icons -D

参考element-plus-best-practices

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import IconResolver from 'unplugin-icons/resolver'
import Icons from 'unplugin-icons/vite'

 (2) 配置

      AutoImport({
        // 自动导入vue相关的Api
        imports: [
          'vue',
          'vue-router',
        ],
        dts: 'src/auto-import.d.ts',
        resolvers: [ElementPlusResolver(), IconResolver({ prefix: 'Icon' })
        ]
      }),

      Components({
        dirs: ['src/components/', 'src/pages/Dashboard/components/'],
        extensions: ['vue'],
        // 解析的 UI 组件库，这里以 Element Plus 为例
        resolvers: [ElementPlusResolver(), IconResolver({ enabledCollections: ['ep'] })],
        dts: true,
        deep: true
      }),
      Icons({ scale: 1, defaultClass: 'inline-block', autoInstall: true }),

（3）使用

<IEpSearch />
// 或
<i-ep-search />

一开始我是使用这种形式，发现不生效，最后使用了上述这种，生效！ 至于为什么这样写就能生效，希望知道的朋友指导一下~  

 

7.element plus 官方的另外一个写法

// main.js
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App).use(i18n).use(pinia)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

app.use(router).mount('#app')