Vue2极简教程003-element-ui的使用
Vue2极简教程003：Element UI组件库完整使用指南
一、Element UI简介
Element UI是饿了么团队推出的基于Vue 2.0的桌面端组件库，提供丰富的预制组件，特别适合后台管理系统开发。
官方资源
- 中文官网：https://element.eleme.cn/#/zh-CN
- CDN资源：cdnjs链接
二、安装与引入
方式1：npm安装（推荐）
npm install element-ui -S方式2：CDN引入（快速原型开发）
<!-- 在public/index.html中引入 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.7/theme-chalk/index.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.7/index.min.js"></script>三、完整引入与按需引入
1. 完整引入（适合小型项目）
// main.js
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)2. 按需引入（推荐，减小体积）
# 首先安装babel插件
npm install babel-plugin-component -D// babel.config.js
module.exports = {
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}// 按需引入示例（在需要的组件中）
import { Button, Select } from 'element-ui'
export default {
components: {
ElButton: Button,
ElSelect: Select
}
}四、核心组件使用示例
1. 表单组件
<template>
<el-form :model="form" label-width="80px">
<el-form-item label="用户名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submit">登录</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
password: ''
}
}
},
methods: {
submit() {
this.$message.success('提交成功')
}
}
}
</script>2. 表格组件
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2023-07-15',
name: '张三',
address: '北京市'
}, {
date: '2023-07-16',
name: '李四',
address: '上海市'
}]
}
}
}
</script>五、主题定制
1. 在线主题生成器
使用官方主题工具自定义颜色后下载配置文件
2. SCSS变量覆盖
/* 在assets/css/element-variables.scss中 */
$--color-primary: #42b983;
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";// main.js中引入
import './assets/css/element-variables.scss'六、实用技巧
1. 全局配置
// 设置全局尺寸和zIndex
Vue.use(ElementUI, {
size: 'small',
zIndex: 3000
})2. 消息提示封装
// utils/message.js
import { Message } from 'element-ui'
export function showSuccess(msg) {
Message.success(msg)
}
export function showError(msg) {
Message.error(msg)
}3. 表单验证
<el-form :rules="rules">
<el-form-item prop="email" :rules="rules.email">
<el-input v-model="form.email"></el-input>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
rules: {
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
]
}
}
}
}
</script>七、常见问题解决
1. 样式不生效
- 确保CSS文件正确引入
- 检查样式被其他CSS覆盖（可尝试增加scoped）
2. 图标显示异常
# 单独安装图标库
npm install @element-ui/icons -Simport { ElIcon } from 'element-plus'
import '@element-plus/icons'3. 国际化配置
import Vue from 'vue'
import ElementUI from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'
Vue.use(ElementUI, { locale })八、性能优化建议
- 按需加载：使用babel-plugin-component减少打包体积
- CDN引入：非核心页面可切换CDN方式
- 组件懒加载：配合Vue异步组件使用
- 版本锁定：在package.json中固定版本号
最佳实践：将常用组件封装成业务组件库，如：
<!-- components/MyDialog.vue --> <template> <el-dialog :visible.sync="visible" v-bind="$attrs"> <slot></slot> <template #footer> <slot name="footer"></slot> </template> </el-dialog> </template>
通过Element UI可以快速构建出专业的中后台系统界面，建议结合官方文档的组件API进行深度定制开发。