Vue3+Vite神器：按需引入自定义组件unplugin-vue-components

小五Five

已于 2023-04-28 14:36:39 修改

阅读量4.3k

点赞数 2

分类专栏： Vite vue 文章标签： vue.js 前端 javascript typescript 前端框架

于 2023-04-18 17:12:57 首次发布

本文链接：https://blog.csdn.net/weixin_42373175/article/details/130225348

版权

vue 同时被 2 个专栏收录

28 篇文章 2 订阅

订阅专栏

Vite

10 篇文章 1 订阅

订阅专栏

文章介绍了如何使用unplugin-vue-components插件在Vue项目中自动引入和注册全局组件，避免手动操作，同时减少打包体积。该插件支持按需加载，包括项目内部组件和第三方UI库如Vant。配置过程包括安装插件、在vite.config.ts中设置以及更新tsconfig.json。

摘要由CSDN通过智能技术生成

前言

我们做项目时，会封装大量的公共组件，如果我们每一个都去在maints里面引入，非常麻烦不说，代码也不优雅。所以更好的方法就是自动注册全局组件，在组件中直接使用就好。

一种方法是自己在components文件夹下新建index.ts文件来导入并注册，最后在main.ts引入，具体方法见我之前的文章：http://t.csdn.cn/t0xbi

今天介绍的另一种非常牛的方法：Vite按需引入自定义组件unplugin-vue-components。

简介

unplugin-vue-components插件可以在Vue文件中自动引入组件（包括项目自身的组件和各种组件库中的组件）。

这个插件好处在于，不需要自己去注册组件，不管是组件内的import还是main.ts里的注册！

此外！由于是按需引入，不像第一个方法那样整个components都全局注册，打包后体积也会更小！

使用步骤

1、安装插件

pnpm i unplugin-vue-components -D

2、vite中去使用：vite.config.ts中配置

...
// 这里
import Components from 'unplugin-vue-components/vite'

export default ({ mode } : ConfigEnv) : UserConfig => {
  return {
    ...
    plugins : [
      vue(),
      ...
      // 这里
      Components({ dts : true }),
    ],
  }
}

3、tsconfig.json中配置

配置完成后，运行代码，会在项目根目录自动生成一个components.d.ts文件。

需要在tsconfig.json的includes配置中加入此文件：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ES2020",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "removeComments": true,
    "esModuleInterop": true,
    "baseUrl": ".",
    "noImplicitThis": true,
    "noEmitOnError": true,
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["es2020", "dom","es5", "es6", "dom.iterable"],
    "skipLibCheck": true,
    "types": ["vite/client", "node"]
  },
  // 这里
  "include": ["src/**/*", "src/**/*.vue", "config/**/*", "./components.d.ts"],
  "exclude": ["node_modules", "dist", "dist-beta", "dist-production"]
}

第三方UI库用法

使用第三方UI组件库的时候也是用此插件实现按需引入，只需引入相关resolver函数，并在刚才的配置里添加就可以。

例如Vant：

其他UI组件库：

// vite.config.ts

...
import {
  ElementPlusResolver,
  AntDesignVueResolver,
  VantResolver,
  HeadlessUiResolver,
  ElementUiResolver
} from 'unplugin-vue-components/resolvers'
...



export default defineConfig({
  plugins: [
    Components({
      ...
      // ui库解析器
      resolvers: [
        ElementPlusResolver(),
        AntDesignVueResolver(),
        VantResolver(),
        HeadlessUiResolver(),
        ElementUiResolver()
      ]
      ...
    })
  ]
})

觉得有用的话，望点赞一下哦~