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

注意

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

步骤

在Vue3项目根目录下

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

全局引用

src/plugins/element.js

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

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

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

Logo

前往低代码交流专区

更多推荐