326 lines
8.5 KiB
Markdown
326 lines
8.5 KiB
Markdown
# Element UI 配置指南
|
||
|
||
本文档提供了在项目中正确使用Element UI的配置步骤和最佳实践，替代之前的Tailwind CSS方案。
|
||
|
||
## Element UI 简介
|
||
|
||
Element UI 是一套基于 Vue 2.0 的桌面端组件库，提供了丰富的UI组件，可以快速构建美观、一致的用户界面。对于我们的图片收集小程序后台管理页面，Element UI提供了完善的PC端组件支持，非常适合构建企业级应用界面。
|
||
|
||
## 配置步骤
|
||
|
||
### 方法一：使用CDN引入（适合原型开发）
|
||
|
||
1. **在HTML文件头部引入Element UI**
|
||
|
||
```html
|
||
<!-- 引入Vue.js -->
|
||
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
|
||
|
||
<!-- 引入Element UI CSS -->
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.8/lib/theme-chalk/index.css">
|
||
|
||
<!-- 引入Element UI JavaScript -->
|
||
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.8/lib/index.js"></script>
|
||
|
||
<!-- 引入Element UI 图标库 -->
|
||
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||
```
|
||
|
||
2. **初始化Vue实例**
|
||
|
||
```html
|
||
<script>
|
||
new Vue({
|
||
el: '#app',
|
||
data: {
|
||
// 数据定义
|
||
},
|
||
methods: {
|
||
// 方法定义
|
||
}
|
||
})
|
||
</script>
|
||
```
|
||
|
||
### 方法二：使用npm安装（适合生产环境）
|
||
|
||
1. **初始化项目**
|
||
|
||
```bash
|
||
npm init -y
|
||
```
|
||
|
||
2. **安装依赖**
|
||
|
||
```bash
|
||
npm install vue@2.6.14 element-ui@2.15.8
|
||
```
|
||
|
||
3. **在项目入口文件中引入Element UI**
|
||
|
||
```javascript
|
||
// main.js
|
||
import Vue from 'vue'
|
||
import ElementUI from 'element-ui'
|
||
import 'element-ui/lib/theme-chalk/index.css'
|
||
|
||
Vue.use(ElementUI)
|
||
|
||
new Vue({
|
||
el: '#app',
|
||
render: h => h(App)
|
||
})
|
||
```
|
||
|
||
## 核心组件使用示例
|
||
|
||
### 1. 布局组件
|
||
|
||
```html
|
||
<div id="app">
|
||
<!-- 后台管理页面布局 -->
|
||
<el-container>
|
||
<!-- 侧边栏导航 -->
|
||
<el-aside width="200px">
|
||
<el-menu :default-active="activeIndex" class="el-menu-vertical">
|
||
<el-submenu index="1">
|
||
<template slot="title">
|
||
<i class="fa fa-users"></i>
|
||
<span>用户管理</span>
|
||
</template>
|
||
<el-menu-item index="1-1">用户列表</el-menu-item>
|
||
<el-menu-item index="1-2">角色权限</el-menu-item>
|
||
</el-submenu>
|
||
<el-submenu index="2">
|
||
<template slot="title">
|
||
<i class="fa fa-building"></i>
|
||
<span>部门管理</span>
|
||
</template>
|
||
<el-menu-item index="2-1">部门结构</el-menu-item>
|
||
</el-submenu>
|
||
<!-- 更多菜单项 -->
|
||
</el-menu>
|
||
</el-aside>
|
||
|
||
<el-container>
|
||
<!-- 顶部导航 -->
|
||
<el-header>
|
||
<div class="flex justify-between items-center">
|
||
<div class="text-lg font-medium">图片收集管理系统</div>
|
||
<div class="flex items-center">
|
||
<el-dropdown>
|
||
<span class="el-dropdown-link">
|
||
<i class="fa fa-bell-o"></i>
|
||
</span>
|
||
<el-dropdown-menu slot="dropdown">
|
||
<el-dropdown-item>通知1</el-dropdown-item>
|
||
<el-dropdown-item>通知2</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</el-dropdown>
|
||
<div class="ml-4">管理员</div>
|
||
</div>
|
||
</div>
|
||
</el-header>
|
||
|
||
<!-- 主内容区 -->
|
||
<el-main>
|
||
<!-- 页面内容 -->
|
||
</el-main>
|
||
</el-container>
|
||
</el-container>
|
||
</div>
|
||
```
|
||
|
||
### 2. 表格组件（适合数据管理页面）
|
||
|
||
```html
|
||
<el-table :data="tableData" style="width: 100%">
|
||
<el-table-column prop="id" label="ID" width="80"></el-table-column>
|
||
<el-table-column prop="name" label="名称"></el-table-column>
|
||
<el-table-column prop="status" label="状态">
|
||
<template slot-scope="scope">
|
||
<el-tag :type="scope.row.status === 'active' ? 'success' : 'danger'">
|
||
{{ scope.row.status === 'active' ? '启用' : '禁用' }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="createTime" label="创建时间"></el-table-column>
|
||
<el-table-column label="操作" width="150">
|
||
<template slot-scope="scope">
|
||
<el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
|
||
<el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<!-- 分页组件 -->
|
||
<el-pagination
|
||
layout="prev, pager, next"
|
||
:total="total"
|
||
:page-size="10"
|
||
@current-change="handleCurrentChange"
|
||
></el-pagination>
|
||
```
|
||
|
||
### 3. 表单组件
|
||
|
||
```html
|
||
<el-form :model="formData" :rules="rules" ref="form">
|
||
<el-form-item label="名称" prop="name">
|
||
<el-input v-model="formData.name"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="描述">
|
||
<el-input type="textarea" v-model="formData.description"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="状态">
|
||
<el-switch v-model="formData.status"></el-switch>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="submitForm('form')">提交</el-button>
|
||
<el-button @click="resetForm('form')">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<script>
|
||
new Vue({
|
||
el: '#app',
|
||
data: {
|
||
formData: {
|
||
name: '',
|
||
description: '',
|
||
status: true
|
||
},
|
||
rules: {
|
||
name: [
|
||
{ required: true, message: '请输入名称', trigger: 'blur' },
|
||
{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
|
||
]
|
||
}
|
||
},
|
||
methods: {
|
||
submitForm(formName) {
|
||
this.$refs[formName].validate((valid) => {
|
||
if (valid) {
|
||
this.$message.success('提交成功!');
|
||
// 提交表单数据
|
||
} else {
|
||
this.$message.error('请检查表单信息');
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
resetForm(formName) {
|
||
this.$refs[formName].resetFields();
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
```
|
||
|
||
### 4. 图片上传组件
|
||
|
||
```html
|
||
<el-upload
|
||
action="#"
|
||
list-type="picture-card"
|
||
:on-preview="handlePictureCardPreview"
|
||
:on-remove="handleRemove"
|
||
:before-upload="beforeUpload"
|
||
multiple
|
||
>
|
||
<i class="el-icon-plus"></i>
|
||
</el-upload>
|
||
<el-dialog :visible.sync="dialogVisible">
|
||
<img width="100%" :src="dialogImageUrl" alt="">
|
||
</el-dialog>
|
||
|
||
<script>
|
||
new Vue({
|
||
el: '#app',
|
||
data: {
|
||
dialogImageUrl: '',
|
||
dialogVisible: false
|
||
},
|
||
methods: {
|
||
handleRemove(file, fileList) {
|
||
console.log(file, fileList);
|
||
},
|
||
handlePictureCardPreview(file) {
|
||
this.dialogImageUrl = file.url;
|
||
this.dialogVisible = true;
|
||
},
|
||
beforeUpload(file) {
|
||
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
|
||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||
|
||
if (!isJPG) {
|
||
this.$message.error('上传图片只能是 JPG/PNG 格式!');
|
||
}
|
||
if (!isLt2M) {
|
||
this.$message.error('上传图片大小不能超过 2MB!');
|
||
}
|
||
return isJPG && isLt2M;
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
```
|
||
|
||
## 响应式设计
|
||
|
||
Element UI 提供了响应式工具类，可以适配不同的屏幕尺寸：
|
||
|
||
```html
|
||
<div class="el-col-xs-24 el-col-sm-12 el-col-md-8 el-col-lg-6">
|
||
<!-- 在不同屏幕尺寸下有不同的宽度 -->
|
||
</div>
|
||
```
|
||
|
||
## 自定义主题
|
||
|
||
Element UI 支持自定义主题，可以通过以下方式修改：
|
||
|
||
1. **使用在线主题生成工具**
|
||
访问 Element UI 官方主题生成器，生成自定义主题包。
|
||
|
||
2. **通过SCSS变量自定义**
|
||
```scss
|
||
// 引入官方样式文件
|
||
@import "~element-ui/packages/theme-chalk/src/index";
|
||
|
||
// 修改变量
|
||
$--color-primary: #1989fa;
|
||
$--color-success: #67c23a;
|
||
$--color-warning: #e6a23c;
|
||
$--color-danger: #f56c6c;
|
||
$--color-info: #909399;
|
||
```
|
||
|
||
## 生产环境注意事项
|
||
|
||
1. **按需引入**：在生产环境中，可以使用 babel-plugin-component 实现按需引入，减小打包体积
|
||
```bash
|
||
npm install babel-plugin-component -D
|
||
```
|
||
|
||
配置 .babelrc：
|
||
```json
|
||
{
|
||
"presets": ["@babel/preset-env"],
|
||
"plugins": [
|
||
[
|
||
"component",
|
||
{
|
||
"libraryName": "element-ui",
|
||
"styleLibraryName": "theme-chalk"
|
||
}
|
||
]
|
||
]
|
||
}
|
||
```
|
||
|
||
2. **CDN优化**：使用稳定的CDN源，如BootCDN，提高加载速度和稳定性
|
||
|
||
3. **组件缓存**：对于频繁使用的组件，可以考虑缓存策略，提高性能
|
||
|
||
4. **按需加载路由**：结合Vue Router的路由懒加载，提高应用启动速度 |