ElementUI学习：新手入门指南@慕课网原创_慕课网

概述

ElementUI是一套基于Vue的桌面端组件库，提供了丰富的组件和高度的可定制性，方便开发者快速构建企业级后台管理系统。本文将详细介绍ElementUI的安装、基础组件的使用、样式定制、布局组件、表单与表格组件以及路由与导航组件的使用方法，帮助读者更好地掌握ElementUI学习。

ElementUI简介

ElementUI是什么

ElementUI 是一套基于 Vue 2.x 的桌面端组件库，它提供了一整套面向 Web 的 UI 组件，可用于快速构建企业级的后台管理系统。ElementUI 遵循了阿里巴巴的《设计语言》规范，因此界面风格简洁明快，符合现代审美标准。

ElementUI的特点和优势

ElementUI 有以下特点和优势：

完善的文档和示例：ElementUI 提供了详尽的文档和实用的示例，帮助开发者快速上手。
丰富的组件库：包括按钮、输入框、下拉菜单、布局组件、表单组件等，满足大部分项目需求。
高度可定制性：支持自定义主题、样式和组件，开发者可以根据项目需求灵活调整。
响应式布局：支持不同设备的自适应布局，确保在各种屏幕尺寸上都有良好的用户体验。
国际化支持：内置了多种语言的国际化支持，方便多语言项目的开发。

如何安装和引入ElementUI

要将 ElementUI 引入到 Vue 项目中，首先需要安装 Vue CLI，然后按照以下步骤进行安装和引入：

安装 Vue CLI（如果尚未安装）：

npm install -g @vue/cli

创建 Vue 项目：

vue create my-project
cd my-project

安装 ElementUI：

npm install element-ui --save

引入 ElementUI：

在 main.js 文件中引入 ElementUI：

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

Vue.use(ElementUI);

至此，ElementUI 已成功引入到项目中。

基础组件使用教程

按钮组件

ElementUI 的按钮组件提供了多种样式，如默认按钮、主要按钮、危险按钮等。具体使用方法如下：

<template>
  <div>
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
  </div>
</template>

输入框组件

输入框组件提供了多种类型，包括文本输入框、密码输入框、数字输入框等。下面是一个简单的示例：

<template>
  <div>
    <el-input v-model="input" placeholder="请输入内容"></el-input>
    <el-input v-model="password" type="password" placeholder="请输入密码"></el-input>
    <el-input v-model="number" type="number" placeholder="请输入数字"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: '',
      password: '',
      number: ''
    };
  }
};
</script>

下拉菜单组件

下拉菜单组件支持多种选项，可选择多个选项或单个选项。示例代码如下：

<template>
  <div>
    <el-select v-model="selectedOptions" multiple placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [
        { value: '选项1', label: '选项1' },
        { value: '选项2', label: '选项2' },
        { value: '选项3', label: '选项3' },
        { value: '选项4', label: '选项4' }
      ]
    };
  }
};
</script>

按钮组组件

按钮组组件可以将多个按钮组合在一起，提供更为丰富的功能。示例代码如下：

<template>
  <div>
    <el-button-group>
      <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
      <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
      <el-button type="primary" icon="el-icon-delete">删除</el-button>
    </el-button-group>
  </div>
</template>

其他常用组件介绍

除了上述组件，ElementUI 还提供了诸如标签页、滑块、树形结构等组件。以下是一些组件的简要介绍：

标签页组件：用于导航不同的内容区域。

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first">内容一</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">内容二</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">内容三</el-tab-pane>
  </el-tabs>
</template>

滑块组件：用于创建滑块选择器。

<template>
  <div>
    <el-slider v-model="value"></el-slider>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 0
    };
  }
};
</script>

树形结构组件：用于展示层级结构的数据。

<template>
  <div>
    <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    }
  }
};
</script>

样式定制与主题切换

如何修改默认样式

修改 ElementUI 的默认样式可以通过覆盖其样式文件实现。例如，你可以通过在 main.js 中引入自定义样式文件来覆盖默认样式：

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

Vue.use(ElementUI);

自定义样式文件 custom.css 可以如下：

/* 自定义按钮样式 */
.el-button {
  background-color: #62636c;
  border-color: #62636c;
}

.el-button:hover {
  background-color: #4d4e56;
  border-color: #4d4e56;
}

如何使用内置主题

ElementUI 提供了多种内置主题，你可以在项目中直接引入这些主题。例如，引入蓝色主题：

import Vue from 'vue';
import ElementUI from 'element-ui';
import '@/assets/styles/elementui-blue.css';

Vue.use(ElementUI);

文件 elementui-blue.css 可以是 ElementUI 提供的默认主题文件。

如何自定义主题和样式

自定义主题和样式需要生成一个新的主题文件。你可以使用 element-plus 来生成自定义主题。首先安装 element-plus：

npm install element-plus --save

然后在 main.js 中引入 element-plus 并生成自定义主题：

import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
import '@element-plus/theme-chalk/index.css';
import '@/assets/styles/custom-theme.css';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(createRouter({ history: createWebHistory(), routes }));
app.use(router);
app.use(ElementPlusIconsVue);

// 自定义主题
import './assets/styles/custom-theme.css';

app.mount('#app');

自定义主题文件 custom-theme.css 可以如下：

/* 自定义主题颜色 */
:root {
  --el-color-primary: #ff7875;
  --el-color-primary-light-7: #fff7f7;
  --el-color-primary-light-2: #fff2f2;
}

/* 自定义按钮样式 */
.el-button {
  background-color: #ff7875;
  border-color: #ff7875;
}

.el-button:hover {
  background-color: #e64a46;
  border-color: #e64a46;
}

布局与容器组件

布局类型介绍

ElementUI 提供了多种布局组件，如 el-row 和 el-col，用于创建响应式的布局。布局类型包括栅格布局、固定布局等。

Row和Col组件使用

el-row 和 el-col 用于创建栅格布局。示例代码如下：

<template>
  <div>
    <el-row>
      <el-col :span="6">col-6</el-col>
      <el-col :span="6">col-6</el-col>
      <el-col :span="6">col-6</el-col>
      <el-col :span="6">col-6</el-col>
    </el-row>
  </div>
</template>

Header和Footer组件使用

el-header 和 el-footer 用于创建固定布局。示例代码如下：

<template>
  <div>
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>Main</el-main>
      </el-container>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

其他布局组件介绍

除上述组件外，ElementUI 还提供了 el-container、el-aside、el-main 等组件。这些组件可以组合使用，以实现复杂的布局效果。

例如，使用组合组件来创建一个完整的布局：

<template>
  <div>
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>Main</el-main>
      </el-container>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

表单与表格组件

表单基础使用

ElementUI 提供了多种表单组件，如输入框、复选框、单选框等。示例代码如下：

<template>
  <div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="活动名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="活动区域" prop="region">
        <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        name: '',
        region: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

表单验证规则

表单验证规则用于确保用户输入的有效性和完整性。示例代码如下：

<template>
  <div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="活动名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="活动区域" prop="region">
        <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        name: '',
        region: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

表格基础使用

ElementUI 提供了表格组件，用于展示结构化数据。示例代码如下：

<template>
  <div>
    <el-table :data="tableData" >
      <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>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
    };
  }
};
</script>

数据表格高级功能

ElementUI 的数据表格组件支持多种高级功能，如分页、排序、过滤等。示例代码如下：

<template>
  <div>
    <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"  @sort-change="onSortChange">
      <el-table-column prop="date" label="日期" sortable="custom" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" sortable="custom" width="180"></el-table-column>
      <el-table-column prop="address" label="地址" sortable="custom"></el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      currentPage: 1,
      pageSize: 10
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    onSortChange({ prop, order }) {
      this.tableData.sort((a, b) => {
        if (order === 'ascending') {
          return a[prop] > b[prop] ? 1 : -1;
        } else if (order === 'descending') {
          return a[prop] < b[prop] ? 1 : -1;
        }
        return 0;
      });
    }
  }
};
</script>

路由与导航组件

路由基础概念

在 Vue 中，路由用于定义不同 URL 对应的不同视图。每个视图可以是 HTML 页面、组件等。

导航菜单组件使用

导航菜单组件用于创建导航菜单，示例代码如下：

<template>
  <div>
    <el-menu :router="true" default-active="/home">
      <el-menu-item index="/home">
        <i class="el-icon-menu"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-menu-item index="/about">
        <i class="el-icon-document"></i>
        <span slot="title">关于我们</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

路由守卫

路由守卫用于在导航发生前后进行一些操作，包括全局前置守卫、全局后置守卫、全局解析守卫、路由独享守卫和页面独享守卫。例如，全局前置守卫在每次路由切换前都会执行：

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      name: 'Home',
      component: () => import('@/views/Home.vue')
    },
    {
      path: '/about',
      name: 'About',
      component: () => import('@/views/About.vue')
    }
  ],
  mode: 'history',
  scrollBehavior(to, from, savedPosition) {
    return { x: 0, y: 0 };
  },
  beforeEach: (to, from, next) => {
    console.log('全局前置守卫：即将进入的路由', to);
    console.log('全局前置守卫：即将离开的路由', from);
    next();
  },
  afterEach: (to, from) => {
    console.log('全局后置守卫：已经进入的路由', to);
    console.log('全局后置守卫：已经离开的路由', from);
  }
});

动态路由使用

动态路由允许你根据不同的路径参数加载不同的组件，示例代码如下：

import Vue from 'vue';
import Router from 'vue-router';
import DynamicRoute from '@/views/DynamicRoute.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      name: 'Home',
      component: () => import('@/views/Home.vue')
    },
    {
      path: '/about/:id',
      name: 'AboutDynamic',
      component: DynamicRoute,
      props: true,
      beforeEnter: (to, from, next) => {
        console.log('动态路由守卫');
        next();
      }
    }
  ],
  mode: 'history',
  scrollBehavior(to, from, savedPosition) {
    return { x: 0, y: 0 };
  }
});

动态组件示例代码如下：

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

动态组件 DynamicRoute.vue 示例代码如下：

<template>
  <div>
    <h1>动态路由组件</h1>
    <p>参数: {{ $route.params.id }}</p>
  </div>
</template>

<script>
export default {
  name: 'DynamicRoute',
  props: ['id']
};
</script>