使用unplugin-vue-components

最新推荐文章于 2024-10-10 19:06:50 发布

叫我少年

最新推荐文章于 2024-10-10 19:06:50 发布

阅读量836

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_35624605/article/details/131850723

版权

vue 专栏收录该内容

6 篇文章

订阅专栏

文章介绍了如何在开发过程中使用unplugin-vue-components插件，以减少应用程序的体积和加载时间。通过按需引入组件，只打包实际使用的代码。该插件支持Vite、Webpack等构建工具，以及Vue2和Vue3，内置对AntDesignVue等UI库的支持，并提供了TypeScript配置和解决命名冲突的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发应用程序时，我们通常会使用许多第三方组件库。然而，这些组件库通常包含大量的代码，而我们只需要其中的一小部分。这就导致了应用程序的体积变得非常大，加载时间变长。为了解决这个问题，我们可以使用unplugin-vue-components插件来实现按需引入

vite 使用 unplugin-vue-components 插件可以实现在开发过程中自动按需引入组件，减少打包体积

安装依赖

npm i unplugin-vue-components -D

💚 开箱即用的 Vue 2 和 Vue 3。
✨ 同时支持组件和指令。
⚡️ 支持 Vite、Webpack、Vue CLI、Rollup、esbuild 等，由 unplugin 提供支持。
🏝 可树可切换，仅注册您使用的组件。
🪐 文件夹名称作为命名空间。
🦾 完整的 TypeScript 支持。
🌈 适用于常用 UI 库的内置解析器。
😃 与不插入图标完美配合。

配置插件

在 vite.config.js 中配置插件

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

export default defineConfig({
  plugins: [
    Components({
      dts: true, //ts支持
      dirs: ['src/views', 'src/components'], // 自定义路径按需导入
      resolvers: [AntDesignVueResolver()] // antd直接使用组件,无需在任何地方导入组件
    })
  ],
})

命名冲突

[unplugin-vue-components] 的 naming conflicts

Components({
      resolvers: [AntDesignVueResolver()],
      // 加上下面这一行作为配置项即可
      directoryAsNamespace: true,
    }),

tsconfig.json配置

项目根目录自动生成一个components.d.ts文件;

// tsconifg.json
{
    "include": [
        "src/**/*.ts",
        "src/**/*.d.ts",
        "src/**/*.tsx",
        "src/**/*.vue",
        "./auto-imports.d.ts",
        "./components.d.ts"
      ]
}