vue3集成Element-plus实现按需自动引入组件的方法总结 vue3集成Element-plus实现按需自动

1、第一种方式，使用全局引入
2、第二种方式，使用局部引入
3、按需自动引入element-plus推荐
总结

element-plus正是element-ui针对于vue3开发的一个UI组件库，
它的使用方式和很多其他的组件库是一样的，其他类似于ant-design-vue、NaiveUI、VantUI都是差不多的；安装element-plus

首先下载element-plus

npm install element-plus

1、第一种方式，使用全局引入引入element-plus的方式是全局引入，代表的含义是所有的组件和插件都会被自动注册，
优点：上手快
缺点：会增大包的体积
在main.ts文件中

import { createApp } from 'vue'// 全局引入import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'import App from './App.vue'import router from './router'import store from './store' const app = createApp(App)app.use(router)app.use(store)app.use(ElementPlus)app.mount('#app')

2、第二种方式，使用局部引入局部引入也就是在开发中用到某个组件对某个组件进行引入，

但是这样我们在开发时每次使用都要手动在组件中引入对应的css样式，使用起来会比较麻烦

3、按需自动引入element-plus推荐需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

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

安装完成之后在vue.config.js文件中配置

// vue.config.jsconst AutoImport = require('unplugin-auto-import/webpack')const Components = require('unplugin-vue-components/webpack')const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')module.exports = {outputDir: './build',// 和webpapck属性完全一致，最后会进行合并configureWebpack: {resolve: {alias: {components: '@/components'}},//配置webpack自动按需引入element-plus，plugins: [AutoImport({resolvers: [ElementPlusResolver()]}),Components({resolvers: [ElementPlusResolver()]})]}}

按需自动引入配置完之后，在组件中可直接使用，不需要引用和注册这里已经实现了按需自动移入Element-plus组件组件中直接使用：

【vue3集成Element-plus实现按需自动引入组件的方法总结】效果：