Element-UI 入门介绍

Element-UI 入门介绍

---

一、什么是 Element-UI？

Element-UI 是一个基于 Vue.js 的 UI 组件库，旨在为开发者提供一个清晰、易用、高质量的 UI 组件集合。它具有以下特点：

• 高质量组件：包括表单、按钮、导航、布局、弹窗、表格等常用组件，涵盖了前端开发的大部分需求。
• 响应式布局：支持 PC 和移动端的适配，帮助开发者创建自适应的页面。
• 可定制化：可以根据需求自定义主题样式、组件样式等，适应不同的设计要求。
• 易于集成：简单易用，方便和 Vue 项目进行集成，帮助开发者提高开发效率。

---

二、Element-UI 的安装与配置

1. 安装 Element-UI

你可以通过 npm 或 yarn 安装 Element-UI，下面是两种常用的安装方式。

通过 npm 安装：

npm install element-ui --save

通过 yarn 安装：

yarn add element-ui

2. 在 Vue 项目中引入 Element-UI

在 Vue 项目中使用 Element-UI，首先要在项目的入口文件（通常是 main.js）中引入 Element-UI。

// main.js
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'  // 引入 Element-UI 样式

Vue.use(ElementUI)  // 使用 Element-UI 插件

3. 按需加载组件

为了减小最终打包后的文件体积，你可以使用 按需加载 来引入 Element-UI 的组件。首先需要安装 babel-plugin-component 插件：

npm install babel-plugin-component --save-dev

然后在 .babelrc 文件中配置插件：

{
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

接下来，只引入你需要的组件。例如，只引入 Button 和 Message 组件：

import Vue from 'vue'
import { Button, Message } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(Button)
Vue.prototype.$message = Message

这样，最终的包体积将更小，因为没有引入不需要的组件。

---

三、Element-UI 常用组件

Element-UI 提供了非常丰富的组件，以下是几个常用组件的使用示例。

1. Button 按钮

<template>
  <div>
    <el-button type="primary">主要按钮el-button>
    <el-button type="success">成功按钮el-button>
    <el-button type="danger">危险按钮el-button>
  div>
template>

2. Input 输入框

<template>
  <el-input v-model="inputValue" placeholder="请输入内容" clearable>el-input>
template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  }
}
script>

3. Form 表单

<template>
  <el-form :model="form" label-width="120px">
    <el-form-item label="用户名">
      <el-input v-model="form.username" placeholder="请输入用户名">el-input>
    el-form-item>
    <el-form-item label="密码">
      <el-input type="password" v-model="form.password" placeholder="请输入密码">el-input>
    el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交el-button>
    el-form-item>
  el-form>
template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    submitForm() {
      this.$message.success('提交成功')
    }
  }
}
script>

4. Table 表格

<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: '2016-05-03', name: '王小明', address: '上海市普陀区' },
        { date: '2016-05-02', name: '张小红', address: '北京市朝阳区' },
        { date: '2016-05-04', name: '李小军', address: '深圳市南山区' }
      ]
    }
  }
}
script>

5. Message 消息提示

this.$message({
  message: '操作成功',
  type: 'success'
})

---

四、Element-UI 主题定制

Element-UI 提供了主题定制的功能，你可以通过 theme-chalk 主题包进行基本的样式定制。如果需要更改主题颜色、字体等样式，可以使用官方提供的主题定制工具。

1. 官方主题定制工具：访问 Element-UI 主题生成器 进行在线定制。
2. 修改样式变量：Element-UI 使用了 SASS 预处理器，你可以在项目中修改 SASS 变量来自定义样式。

例如，修改主色调：

$--color-primary: #409EFF;

通过这种方式，可以非常灵活地定制自己的主题。

---

五、总结

Element-UI 是一个非常强大且易用的 Vue.js 组件库，适用于构建各种企业级后台应用。通过它，你可以快速构建出符合现代设计要求的界面。它的特点是组件丰富、文档齐全，适合快速上手。你可以根据项目需求灵活选择是否按需加载、是否定制主题等。

如果你是前端开发初学者，或者需要构建一个高质量的企业级管理系统，Element-UI 是一个非常好的选择。