摆脱手动依赖引入，自动引入依赖

作者:Yuan Tang

更新于:9 个月前

字数统计:1.1k 字

阅读时长:4 分钟

学习目标

unplugin-vue-components 和 unplugin-auto-import 基本使用
透彻运用 unplugin-vue-components 和 unplugin-auto-import 来自动引入各种内容

基本使用

unplugin-auto-import

项目中的js模块可以用 unplugin-auto-import 来自动引入。

项目本地编写的一些具方法自动引入
一些第三方库的自动引入

在 vite.config.js 文件中引入，配置插件。

import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: [
        // auto-import内置vue、vue-router、react这些常见基本库的引入规则
        'vue'
      ]
    })
  ]
})

插件内置了 vue 的规则，所以可以直接写。后续文件中无需手动引入 ref 等模块，可直接使用。

如果是想用自己封装的函数方法，需要做如下配置：

import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: [
        // auto-import内置vue、vue-router、react这些常见基本库的引入规则
        'vue',
      ],
      // 配置那些本地目录，支持自动引入
      dirs: [
        	'./src/utils/**'
      ]
    })
  ]
})

如果想要自动引入第三方库如 axios 、loadsh 等，没有内置支持的，则需要自己编写规则。

import AutoImport from 'unplugin-auto-components/vite'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: [
        'vue',
        {
          // 放自定义的自动引入库
          loadsh: [
            // 哪些方法能自动引入
            'concat'
          ]
        }
      ],
      // 配置那些本地目录，支持自动引入
      dirs: [
        	'./src/utils/**'
      ]
    })
  ]
})

上方配置本质上是通过 import {concat} from 'loadsh' 引入的，因此可以设置别名。

import AutoImport from 'unplugin-auto-components/vite'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: [
        {
          // 放自定义的自动引入库
          loadsh: [
            // 哪些方法能自动引入
            'concat',
            ['compact', 'cp']
          ]
        }
      ]
    })
  ]
})

这么修改它就会设置上别名，本质上是 import {compact as cp} from 'loadsh' 。

像 axios 这种全部导入默认部分的，实际上导入的是 default ，因此可以通过设置别名的方式自动引入。

import AutoImport from 'unplugin-auto-components/vite'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: [
        {
          // 放自定义的自动引入库
          loadsh: [
            // 哪些方法能自动引入
            'concat',
            ['compact', 'cp']
          ],
          axios: [
            ['default', 'axios']
          ]
        }
      ]
    })
  ]
})

最终编译出来的效果等价于 import axios from 'axios' 。

unplugin-vue-components

Vue项目组件 unplugin-auto-import 虽可用来自动引入，但很多 vue 项目组件是用 .vue 文件编写，unpluin-auto-import 做不到自动引入，所以有这么一个专门为 vue 准备的自动引入库。而 react 纯粹的就是 js ，所以 react 可以直接使用 unplugin-auto-import 。

如何引入自动本地组件
自己开发的组件库如何做到自动支持自动引入

同样的，需要先去 vite.config.js 文件，做相关配置，以 element-plus 举例。

import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      // 便携组件库的自动引入规则。内置了主流的组件，如element、antd、vant等
      resolvers: [
        ElementPlusResolver()
      ]
    })
  ]
})

本地组件也想要实现自动引入，和 unplugin-auto 一样通过 dirs 配置。

import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      // 便携组件库的自动引入规则。内置了主流的组件，如element、antd、vant等
      resolvers: [
        ElementPlusResolver()
      ],
      // 存放组件的文件夹
      dirs: [
        './src/components',
      ]
    })
  ]
})

如果想要自定义 resolver 来支持自主开发的组件库，则需要配置一个方法，该方法可接收所使用的组件名称。判断名称是否是自主开发的组件（有固定的命名），符合条件 return 一个对象。该对象主要属性为：

Name：组件名称
from：来源文件夹路径
style：样式文件路径

import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      // 便携组件库的自动引入规则。内置了主流的组件，如element、antd、vant等
      resolvers: [
        ElementPlusResolver(),
        (componentName) => {
          if (componentName.includes('My')) {
            // 引入规则
            return {
              name: componentName,
              from: 'myui',
              sideEffects: `myui/${componentName}/style/index.css`
            }
          }
        }
      ],
      // 存放组件的文件夹
      dirs: [
        './src/components',
      ]
    })
  ]
})

后续编译后等价于引入组件和样式文件。

import { MyButton } from 'myui'
import 'myui/MyButton/style/index.css'

拓展

若想要了解如何开发自己的组件库，指路跳转：组件库搭建。

Contributors

Yuan Tang

摆脱手动依赖引入，自动引入依赖 ​

学习目标 ​

基本使用 ​

unplugin-auto-import ​

unplugin-vue-components ​

拓展 ​

Contributors ​