unplugin-auto-import 和 unplugin-vue-components 的正确使用方式_npm install -d unplugin-vue-components unplugin-au

在整合element-plus的时候，自动导入模块与引用到这两个插件的简单介绍，详情见官网：unplugin-vue-components和unplugin-auto-import
在使用过程中

1. 安装

npm install -D unplugin-vue-components unplugin-auto-import
1

结合官方文档，在详细说一下具体的使用心得（以vite为例）

vite

// 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: [
    vue(),
    AutoImport({
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: ['vue', 'vue-router', 'vue-i18n'],
      include: [
        /\.[tj]sx?$/,
        /\.vue$/,
        /\.vue\?vue/,
      ],
      resolvers: [
        // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
        ElementPlusResolver(),
        // 自动导入图标组件
        IconsResolver({})
      ],
      vueTemplate: true, // 是否在 vue 模板中自动导入
      dts: path.resolve(pathSrc, 'types', 'auto-imports.d.ts') // (false) 配置文件生成位置，默认是根目录 /auto-imports.d.ts
    }),
    Components({
      include: [
        /\.[tj]sx?$/,
        /\.vue$/,
        /\.vue\?vue/,
      ],
      // 只要项目中，在components目录下的文件，会自动导入到components.d.ts中，这样，页面或者组件中就不用再次引入了，也无需在`main.js`通过app.component全局注册了
      dirs: ['src/components', 'src/**/components',],
      extensions: ['vue', 'jsx', 'tsx', 'ts', 'js'],
      resolvers: [
        // 自动注册图标组件
        IconsResolver({
          enabledCollections: ['ep'] //@iconify-json/ep 是 Element Plus 的图标库
        }),
        // 自动导入 Element Plus 组件
        ElementPlusResolver()
      ],
      dts: path.resolve(pathSrc, 'types', 'components.d.ts') // (false) 配置文件生成位置，默认是根目录 /components.d.ts
    }),
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

然后项目启动之后，就会在types目录下生成两个文件

效果

<script lang="ts" setup>
// 当前行也可以省略不写
import { getCurrentInstance, ref } from 'vue'
// 无需再次引入，可以省略当前行代码
const {proxy} = getCurrentInstance()

import PasswordForm from './components/passwordForm.vue'
....
1
2
3
4
5
6
7
8

效果如图

但是这里面会有eslint的提示，官方这么解释的

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/119032