vue3集成Element-plus實(shí)現(xiàn)按需自動(dòng)引入組件的方法匯總

3403771864 發(fā)布于2022-11-20 14:06 / 1441人閱讀

　　本篇文章就是介紹關(guān)于vue3集成Element-plus實(shí)現(xiàn)按需自動(dòng)引入組件的相關(guān)資料,為了讓大家詳細(xì)了解，附有詳細(xì)內(nèi)容。

　　element-plus正是element-ui針對(duì)于vue3開(kāi)發(fā)的一個(gè)UI組件庫(kù)，

　　它的使用方式和很多其他的組件庫(kù)是一樣的，其他類似于ant-design-vue、NaiveUI、VantUI都是差不多的；安裝element-plus

　　首先下載element-plus

　　npm install element-plus

　　1、第一種方式，使用全局引入

　　引入element-plus的方式是全局引入，代表的含義是所有的組件和插件都會(huì)被自動(dòng)注冊(cè)，

　　優(yōu)點(diǎn)：上手快

　　缺點(diǎn)：會(huì)增大包的體積

　　在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、第二種方式，使用局部引入

　　局部引入也就是在開(kāi)發(fā)中用到某個(gè)組件對(duì)某個(gè)組件進(jìn)行引入，

　　<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>

　　要注意的是在開(kāi)發(fā)時(shí)每次使用都要手動(dòng)在組件中引入對(duì)應(yīng)的css樣式，這樣使用時(shí)就會(huì)很麻煩

　　3、按需自動(dòng)引入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屬性完全一致，最后會(huì)進(jìn)行合并
　　configureWebpack: {
　　resolve: {
　　alias: {
　　components: '@/components'
　　}
　　},
　　//配置webpack自動(dòng)按需引入element-plus，
　　plugins: [
　　AutoImport({
　　resolvers: [ElementPlusResolver()]
　　}),
　　Components({
　　resolvers: [ElementPlusResolver()]
　　})
　　]
　　}
　　}

　　按需自動(dòng)引入配置完之后，在組件中可直接使用，不需要引用和注冊(cè) 這里已經(jīng)實(shí)現(xiàn)了按需自動(dòng)移入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>

　　效果：