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.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. 局部引入（按需引入）
也就是在开发中用到某个组件对某个组件进行引入：
2.1 手动引入
但是我们会发现是没有对应的样式的，引入样式有两种方式：
全局引用样式；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 直接使用
文章来源
您阅读本篇文章共花了：
发表评论