bwadmin/FileCollect
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
467b04e5b0bc35e1f7fcf5cc36b73f3b68210ae8
FileCollect/element-ui-配置指南.md
T
bwstudio 467b04e5b0 home1020
2025-10-20 07:11:14 +08:00

8.5 KiB
Raw Blame History

Element UI 配置指南

本文档提供了在项目中正确使用Element UI的配置步骤和最佳实践，替代之前的Tailwind CSS方案。

Element UI 简介

Element UI 是一套基于 Vue 2.0 的桌面端组件库，提供了丰富的UI组件，可以快速构建美观、一致的用户界面。对于我们的图片收集小程序后台管理页面，Element UI提供了完善的PC端组件支持，非常适合构建企业级应用界面。

配置步骤

方法一：使用CDN引入（适合原型开发）

  1. 在HTML文件头部引入Element UI

    <!-- 引入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实例

    <script>
  new Vue({
    el: '#app',
    data: {
      // 数据定义
    },
    methods: {
      // 方法定义
    }
  })
</script>

方法二：使用npm安装（适合生产环境）

  1. 初始化项目

    npm init -y

  2. 安装依赖

    npm install vue@2.6.14 element-ui@2.15.8

  3. 在项目入口文件中引入Element UI

    // 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. 布局组件

<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. 表格组件（适合数据管理页面）

<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. 表单组件

<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. 图片上传组件

<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 提供了响应式工具类，可以适配不同的屏幕尺寸：

<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变量自定义

    // 引入官方样式文件
@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 实现按需引入，减小打包体积

    npm install babel-plugin-component -D

    配置 .babelrc：

    {
  "presets": ["@babel/preset-env"],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

  2. CDN优化：使用稳定的CDN源，如BootCDN，提高加载速度和稳定性

  3. 组件缓存：对于频繁使用的组件，可以考虑缓存策略，提高性能

  4. 按需加载路由：结合Vue Router的路由懒加载，提高应用启动速度

Reference in New Issue View Git Blame Copy Permalink