vue3 集成 Element-Plus之全局导入/按需导入

element-plus集成

Element Plus，一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库：

在Vue2中使用element-ui，而element-plus是element-ui针对于vue3开发的一个UI组件库；它的使用方式和很多其他的组件库是一样的，所以学会element-plus，其他类似于ant-design-vue、NaiveUI、VantUI都是差不多的；移动端使用VantUI | MintUI安装element-plus

npm install element-plus

1. 全局引入

一种引入element-plus的方式是全局引入，代表的含义是所有的组件和插件都会被自动注册：

//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. 局部引入（按需引入）

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

2.1 手动引入

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

但是我们会发现是没有对应的样式的，引入样式有两种方式：

全局引用样式；import 'element-plus/dist/index.css'局部引用样式（通过 unplugin-element-plus 插件）；

1.安装插件：

npm install  unplugin-element-plus  -D

2.配置vue.config.js

const ElementPlus= require('unplugin-element-plus/webpack');module.exports = {  configureWebpack: {    resolve: {      alias: {        components: '@/components'      }    },    //配置webpack自动按需引入element-plus样式，    plugins: [ElementPlus()]  }};

但是这里依然有个弊端：

这些组件我们在多个页面或者组件中使用的时候，都需要导入并且在components中进行注册；所以我们可以将它们在全局注册一次；

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 自动导入组件以及样式[推荐】

1.安装插件：

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

2.配置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 = {  configureWebpack: {    resolve: {      alias: {        components: '@/components'      }    },    //配置webpack自动按需引入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>