element-plus integration
Element Plus , a Vue 3.0-based desktop component library for developers, designers and product managers:
- Use element-ui in Vue2, and element-plus is a UI component library developed by element-ui for vue3;
- Its usage is the same as many other component libraries, so learn element-plus, others similar to ant-design-vue, NaiveUI, VantUI are similar;
- Use VantUI | MintUI on mobile
- Install element-plus
npm install element-plus
1. Global import
One way to introduce element-plus is to introduce it globally, which means that all components and plug-ins will be automatically registered:
//main.ts
import {
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. Partial import ( import on demand )
That is, a certain component is used in development to introduce a certain component:
2.1 Manual introduction
<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>
But we will find that there is no corresponding style, and there are two ways to introduce styles:
- global reference style;
import 'element-plus/dist/index.css' - partial reference style (via unplugin-element-plus plugin);
1. Install the plugin:
npm install unplugin-element-plus -D
2. Configure vue.config.js
const ElementPlus= require('unplugin-element-plus/webpack');
module.exports = {
configureWebpack: {
resolve: {
alias: {
components: '@/components'
}
},
//配置webpack自动按需引入element-plus样式，
plugins: [ElementPlus()]
}
};
But there is still a disadvantage here:
- When these components are used in multiple pages or components, they need to be imported and registered in components;
- So we can register them globally once;
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. Install the plugin:
npm install -D unplugin-vue-components unplugin-auto-import
2. Configure vue.config.js (see the official website for other configuration methods)
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 direct use
<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>