Vue项目如何自动导入方法和按需引入组件

前言

在使用一些组件库比如ant-design-vue时，如果将整个组件库都引入到项目中，但是只是需要用到部分组件，最终在打包时项目会变得过于庞大，导致加载的速度变慢，因此需要用到按需加载，官方也给出了解决方案

但是按照官方的方案其实还是有不少坑的，还需做一些额外的配置，并且对于依赖的版本也有要求，vue3.0使用ant-design-vue进行按需加载原来这么简单

新的解决方案

这里使用是vue-cli 5.0生成一个vue3.0 + ts的项目

• 首先需要在devDependencies中安装两个插件

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

• 然后在 vue.config.js 中进行配置

文档 unplugin-auto-import unplugin-vue-components

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const {
  ElementPlusResolver, // element
  AntDesignVueResolver, // ant-design-vue
} = require('unplugin-vue-components/resolvers')
module.exports = {
  configureWebpack: {
    plugins: [
      // 自动导入方法
      AutoImport({
        include: [
          /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
          /\.vue$/,
          /\.vue\?vue/, // .vue
        ],
        imports: [
          'vue',
          'vue-router',
        ],
        resolvers: [ElementPlusResolver()],
        dts: 'typings/auto-imports.d.ts', // 自定义生成.d.ts位置
      }),
      // 自动导入组件
      Components({
        include: [/\.vue$/, /\.vue\?vue/],
        exclude: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/],
        resolvers: [
          ElementPlusResolver(), 
          AntDesignVueResolver()
        ],
        dts: 'typings/components.d.ts', // 自定义生成.d.ts位置
      }),
    ],
  },
}

• 配置tsconfig.json，由于这两个插件会自动生成声明文件，需要手动配置，去掉编辑器中的报错

{
  ...
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx",
    "typings/**/*.ts",
    "typings/**/*.d.ts"
  ],
  "exclude": ["node_modules"]
}

• 我在项目中同时使用了ant-design和element-plus 组件库，这样配置后在项目中就可以这么使用，按需引入组件和方法，不需要注册直接使用，真是大大的提升了开发的体验

<template>
  <a-button type="primary">{{ text }}</a-button>
  <el-button type="primary">{{ text }}</el-button>
</template>

<script setup lang="ts">
const route = useRoute()
const router = useRouter()
const text = ref<string>('button text')
</script>

值得一提的是这两个插件的作者是Vuejs的核心成员 Anthony Fu，VueUse的作者，看 github 一年的 contributions 数量就知道不简单，

如果想在vite + vue3.0的项目中使用可以看一下大佬的这个项目 vitesse