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

来源: https://www.ucloud.cn/yun/128378.html 作者: 3403771864 发布日期: 发布于2022-11-20 14:06

本篇文章就是介绍关于vue3集成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、第二种方式，使用局部引入

　　局部引入也就是在开发中用到某个组件对某个组件进行引入，

　　<template>
　　<div>
　　<el-button>Default</el-button>
　　<el-button type="primary">Primary</el-button>
　　<el-button type="success">Success</el-button>
　　<el-button type="info">Info</el-button>
　　<el-button type="warning">Warning</el-button>
　　<el-button type="danger">Danger</el-button>
　　<el-button>中文</el-button>
　　</div>
　　</template>
　　<script>
　　import { defineComponent } from 'vue'
　　// 局部引入
　　import { ElButton } from 'element-plus'
　　import 'element-plus/theme-chalk/el-button.css'
　　import 'element-plus/theme-chalk/base.css'
　　export default defineComponent({
　　components: { ElButton },
　　setup() {
　　return {}
　　}
　　})
　　</script>
　　<style></style>

　　要注意的是在开发时每次使用都要手动在组件中引入对应的css样式，这样使用时就会很麻烦

　　3、按需自动引入element-plus推荐

　　需要安装unplugin-vue-components和unplugin-auto-import这两款插件

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

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

　　// vue.config.js
　　const 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组件 组件中直接使用：

　　<template>
　　<div>
　　<el-button>Default</el-button>
　　<el-button type="primary">Primary</el-button>
　　<el-button type="success">Success</el-button>
　　<el-button type="info">Info</el-button>
　　<el-button type="warning">Warning</el-button>
　　<el-button type="danger">Danger</el-button>
　　<el-button>中文</el-button>
　　</div>
　　</template>
　　<script>
　　import { defineComponent } from 'vue'
　　export default defineComponent({
　　setup() {
　　return {}
　　}
　　})
　　</script>
　　<style></style>

　　效果：

　　欢迎大家观看更多精彩内容。