unplugin-auto-import在vue3项目实践及报错处理

序言

在前端项目中，按需引入是优化项目的一个方向，在element-ui库中如果要按需引入组件需要安装babel-plugin-component，然后将 .babelrc 修改为：

    {
        "presets": [ ["es2015", { "modules": false } ] ],
        "plugins": [ [ "component",
            {
                "libraryName": "element-ui",
                "styleLibraryName": "theme-chalk"
            }]
        ]
    }  

还需要在 main.js 中引入要用到的组件：

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);

/* 或写为
* Vue.use(Button)
* Vue.use(Select)
*/

在项目不断的迭代中可能会写很长一串需要用的组件，到最后几乎和全局引入差不了多少。但是按需引入也始终会比全部引入少一些打包占用，可是太长的引入组件也伤脑筋。

真香警告⚠

随着 vue3 生态圈的不断发展，越来越多的支持插件让vue3 + vite项目越来越丝滑。element-plus + unplugin-auto-import 的组合方式使得在组件的使用上也更加灵活。

在element-plus中如果按需导入需要安装 首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import
或者
yarn add unplugin-vue-components unplugin-auto-import -D

其中unplugin-auto-import不仅仅是按需导入element-plus组件，还可以配置自动按需导入vue，vue-router或者vueuse等

vue3api调用时：

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

安装unplugin-auto-import后

const count = ref(0)
const doubled = computed(() => count.value * 2)

是不是方便很多。

el-icon里有着丰富的样式可供项目使用，但是丰富的组件也伴随着项目文件打包后的大小，所以 unplugin-auto-import 又站了出来，是的，它又出手了。它的让el-icon在使用时更灵活，让前端项目也更加简洁，只需要在 vite.config 里做好配置，剩下的就交给它处理。引用官方推荐的配置用法如下：

在vite项目里引入方式：

import type { Plugin } from "vite";

import path from "path";

import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import IconsResolver from "unplugin-icons/resolver";
import Icons from "unplugin-icons/vite";

const pathSrc = path.resolve(__dirname, "src");

import { configCompressPlugin } from "./compress";

import { configSvgIconsPlugin } from "./svgSprite";

export function createVitePlugins(mode: string, isBuild: boolean) {
  const vitePlugins: (Plugin | Plugin[])[] = [
    // have to
    vue(),
    // have to
    // vueJsx(),
    AutoImport({
      // Auto import functions from Vue, e.g. ref, reactive, toRef...
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: ["vue", "vue-router"],

      // dirs: ["src/utils/request.ts"],

      // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)
      // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
      resolvers: [
        ElementPlusResolver(),

        // Auto import icon components
        // 自动导入图标组件
        IconsResolver()
      ],

      dts: path.resolve(pathSrc, "auto-imports.d.ts")
    }),

    Components({
      resolvers: [
        // Auto register icon components
        // 自动注册图标组件
        IconsResolver({
          enabledCollections: ["ep"]
        }),
        // Auto register Element Plus components
        // 自动导入 Element Plus 组件
        ElementPlusResolver()
      ],

      dts: path.resolve(pathSrc, "components.d.ts")
    }),

    Icons({
      autoInstall: true
    })
  ];
  return vitePlugins;
}

在配置好组件后，node_modules会增加两个依赖文件夹

页面使用icon组件时:

    <i-ep-location></i-ep-location>

component.d.ts就自动导入了该组件

解决报错提示

通过以上的配置项目运行起来了，但是会出现一些错误提示，比如

原因是虽然前面已经通过 AutoImport 对项目自动做了引用，但是未做 eslint 和 ts 检测，下面就添加它们的配置。

第一步：

unplugin-auto-import 仓库 有做 eslintrc-auto-import.json 的配置参考

eslintrc: {
    enabled: false, // Default `false`
    filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
    globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
  }

添加设置，当配置 enabled: true 时，会根据 filepath 配置的路径生成一个 .eslintrc-auto-import.json 文件

第二步：

在tsconfig.json文件中 include 配置中加入 auto-imports.d.ts

"include": [
    "src/**/*.d.ts",
    "types/**/*.d.ts",
    "build/**/*.d.ts",
    "./auto-imports.d.ts"
  ]

配置保存后再看项目文件内就已无警告报错

总结

多数情况下关于 TS 指示的报错可能都跟 tsconfig 相关，或许是 *.d.ts，抑或许是其他原因，先看文档，再分析问题，最后再解决问题。

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情