当前位置：首页 > 前端教程

elementui模版

2026-03-06 06:28:13前端教程

以下是关于 Element UI 模板的相关信息整理，涵盖基础使用、模板资源及自定义开发要点：

安装与基础配置

通过 npm 安装 Element UI：

npm install element-ui -S

在 Vue 项目中全局引入：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

常用模板资源

官方模板
Element UI 提供官方示例项目，包含基础脚手架和组件演示。
管理后台模板
- vue-element-admin：完整后台管理系统解决方案。
- Element Plus Starter：适用于 Element Plus（Vue 3）的启动模板。
表单与表格模板
- 动态表单生成器：vue-element-form-builder
- 可编辑表格：el-table 扩展

自定义主题

修改主题变量文件 element-variables.scss：

elementui模版

$--color-primary: #42b983;
@import "~element-ui/packages/theme-chalk/src/index";

通过命令行工具生成自定义主题：

et -i

典型组件模板示例

表单模板：

<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-select v-model="form.region" placeholder="请选择">
      <el-option label="区域一" value="shanghai"></el-option>
    </el-select>
  </el-form-item>
</el-form>

表格模板：

<el-table :data="tableData">
  <el-table-column prop="date" label="日期"></el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
</el-table>