框架组件自动按需导入工具，不使用不会导入，可减少项目体积

unplugin-vue-components

1.安装

npm i unplugin-vue-components -save-dev

2.配置

我这里用的是Vue CLI，所以要在vue.config.js文件中添加配置，官网中有写不同打包工具的配置写法
框架我使用的是Element Plus，使用前去官网查看自己的框架是否支持，主流框架都是支持的
引入：

// 组件自动加载
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

在configureWebpack.plugins中添加：

// 自动按需加载
Components({
	resolvers: [ElementPlusResolver()],
}),

3.使用

我们之前使用全局引入或者是单个引入现在都不需要了。
【插件推荐】vue3框架组件自动导入unplugin-vue-components
运行
【插件推荐】vue3框架组件自动导入unplugin-vue-components
这个时候所有element的组件都可以自动引入了，我们直接在vue中使用就可以了

4.自动引入项目组件

我们除了会引入框架的组件也会有我们自定义的组件，unplugin-vue-components同样支持我们自定义的组件的自动导入，只需要我们把组件放到src/components（默认读取路径）文件夹中即可
【插件推荐】vue3框架组件自动导入unplugin-vue-components
我在这个文件夹中新建了一个名为HelloWord的组件
【插件推荐】vue3框架组件自动导入unplugin-vue-components
然后我们就可以直接引入使用了
【插件推荐】vue3框架组件自动导入unplugin-vue-components
然后运行看看
【插件推荐】vue3框架组件自动导入unplugin-vue-components
成功了！！

5.自定义组件路径或多个组件路径配置

在项目当中可能我们不一定会把组件放在src/components（默认读取路径）路径下，或者我们可能有多个放组件的地方，我们只需要在配置中添加dirs属性即可

Components({
  dirs: ['src/components'],//可存在多个
  resolvers: [ElementPlusResolver()],
}),

更多配置前往官网查看unplugin-vue-components

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。