在Vue项目中常使用的一个UI库就是element-ui了

注意

目前element-ui只支持Vue2.6以下的版本，如果想在Vue3.0使用这个组件库，就要使用element-plus
element-plus官网

步骤

在Vue3项目根目录下 

1
2
vue add element-plus
npm install vue-cli-plugin-element-plus

全局引用

src/plugins/element.js

1
2
3
4
5
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
export default (app) => {
  app.use(ElementPlus)
}

就可以使用组件了
在这里插入图片描述

按需引入

在下载element-plus后，会自动帮我们创建一个配置文件，放在/src/plugins/element.js，全局引入的时候代码放在这里，更能体现模块独立的思想
但是按需引入需要使用到createApp()返回的Vue实例，所以还是写在/src/main.js中

1
2
3
4
5
6
7
8
import { createApp } from 'vue'
import App from './App.vue'
import 'element-plus/lib/theme-chalk/index.css'
import { ElButton, ElSelect } from 'element-plus';
const app = createApp(App)
app.use(ElButton)
app.use(ElSelect)
app.mount('#app')

在这里插入图片描述
依旧可以使用