目錄element-plus集成1. 全局引入2. 局部引入（按需引入）2.1 手動(dòng)引入1.安裝插件：2.配置vue.config.js2.3 自動(dòng)導(dǎo)入組件以及樣式[推薦】1.安裝插件：2.配置vue.config.js（其他配置方式看官網(wǎng)）3 直接使用總結(jié)element-plus集成

Element Plus，一套為開(kāi)發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 3.0 的桌面端組件庫(kù)：

在Vue2中使用element-ui，而element-plus是element-ui針對(duì)于vue3開(kāi)發(fā)的一個(gè)UI組件庫(kù)；它的使用方式和很多其他的組件庫(kù)是一樣的，所以學(xué)會(huì)element-plus，其他類似于ant-design-vue、NaiveUI、VantUI都是差不多的；移動(dòng)端使用VantUI | MintUI安裝element-plusnpm install element-plus1. 全局引入

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

//main.tsimport { createApp } from 'vue';import App from './App.vue';import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'import router from './router'import store from './store'createApp(App).use(router).use(store).use(ElementPlus).mount('#app')2. 局部引入（按需引入）

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

2.1 手動(dòng)引入<template> <div id='app'> <el-row class='mb-4'><el-button disabled>Default</el-button><el-button type='primary' disabled>Primary</el-button><el-button type='success' disabled>Success</el-button><el-button type='info' disabled>Info</el-button><el-button type='warning' disabled>Warning</el-button><el-button type='danger' disabled>Danger</el-button> </el-row> </div></template><script lang='ts'>import { defineComponent } from 'vue'import { ElButton } from 'element-plus'export default defineComponent({ name: 'App', components: { ElButton }})</script><style lang='less'></style>

但是我們會(huì)發(fā)現(xiàn)是沒(méi)有對(duì)應(yīng)的樣式的，引入樣式有兩種方式：

全局引用樣式；import 'element-plus/dist/index.css'

局部引用樣式（通過(guò) unplugin-element-plus 插件）；

1.安裝插件：npm install unplugin-element-plus -D2.配置vue.config.jsconst ElementPlus= require('unplugin-element-plus/webpack');module.exports = { configureWebpack: { resolve: { alias: {components: '@/components' } }, //配置webpack自動(dòng)按需引入element-plus樣式， plugins: [ElementPlus()] }};

但是這里依然有個(gè)弊端：

這些組件我們?cè)诙鄠€(gè)頁(yè)面或者組件中使用的時(shí)候，都需要導(dǎo)入并且在components中進(jìn)行注冊(cè)；所以我們可以將它們?cè)谌肿?cè)一次；import { ElButton, ElTable, ElAlert, ElAside, ElAutocomplete, ElAvatar, ElBacktop, ElBadge,} from 'element-plus'const app = createApp(App)const components = [ ElButton, ElTable, ElAlert, ElAside, ElAutocomplete, ElAvatar, ElBacktop, ElBadge]for (const cpn of components) { app.component(cpn.name, cpn)}2.3 自動(dòng)導(dǎo)入組件以及樣式[推薦】1.安裝插件：npm install -D unplugin-vue-components unplugin-auto-import2.配置vue.config.js（其他配置方式看官網(wǎng)）const AutoImport = require('unplugin-auto-import/webpack');const Components = require('unplugin-vue-components/webpack');const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');module.exports = { configureWebpack: { resolve: { alias: {components: '@/components' } }, //配置webpack自動(dòng)按需引入element-plus， plugins: [ AutoImport({resolvers: [ElementPlusResolver()] }), Components({resolvers: [ElementPlusResolver()] }) ] }};3 直接使用<template> <div id='app'> <el-row class='mb-4'><el-button disabled>Default</el-button><el-button type='primary' disabled>Primary</el-button><el-button type='success' disabled>Success</el-button><el-button type='info' disabled>Info</el-button><el-button type='warning' disabled>Warning</el-button><el-button type='danger' disabled>Danger</el-button> </el-row> </div></template><script lang='ts'>import { defineComponent } from 'vue'export default defineComponent({})</script><style lang='less'></style>總結(jié)

到此這篇關(guān)于vue3集成Element-Plus之全局導(dǎo)入和按需導(dǎo)入的文章就介紹到這了,更多相關(guān)Element-Plus全局導(dǎo)入和按需導(dǎo)入內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！