首頁手記 ElementUI資料詳解：從入門到實踐的簡易教程

ElementUI資料詳解：從入門到實踐的簡易教程

標簽：

前端工具設計 Vue.js

概述

ElementUI 是一套基于 Vue.js 的高质量桌面端组件库，提供了丰富的组件和详细的文档支持，帮助开发者快速构建一致性和美观的界面。它包含多种组件，从基础的按钮、输入框到复杂的表格和日期选择器，应有尽有。ElementUI 遵循蚂蚁金服设计语言，强调简洁和高性能，同时提供了灵活的自定义选项。本文将详细介绍 ElementUI 的安装配置、常用组件使用、布局方式和表单验证等内容，帮助你更好地理解和使用 ElementUI资料。

ElementUI简介

ElementUI是什么

ElementUI 是一套基于 Vue.js 的桌面端组件库。它是饿了么团队使用 Vue.js 开发的一个高质量的桌面端 UI 组件库，遵循蚂蚁金服设计语言，强调简洁、清晰的结构，以及高性能的表现。ElementUI 包含了丰富的组件，从基础的按钮、输入框到复杂的表格、日期选择器，应有尽有。

为什么选择ElementUI

ElementUI 有以下几个优势：

高质量的设计： ElementUI 遵循蚂蚁金服的设计语言，提供了统一的视觉体验和交互模式，这有助于开发者快速创建一致性和美观的界面。
丰富的组件： ElementUI 提供了多种组件，涵盖了表单、布局、导航、数据展示等几乎所有常用的功能，满足了开发者在项目中的大部分需求。
易用性： ElementUI 提供了详细的文档和示例代码，使得开发者能够快速上手，减少学习成本。
灵活性： ElementUI 的组件具有高度的可定制性，允许开发者根据项目需求自定义样式和功能。
强大的社区支持： ElementUI 拥有一个活跃的社区，开发者可以在这里提问、分享经验，获取支持。

安装与配置步骤详解

以下是安装和配置 ElementUI 的步骤：

安装 ElementUI：
使用 npm 或 yarn 安装 ElementUI。以下是使用 npm 的安装命令：
```
npm install element-ui --save
```
或者使用 yarn：
```
yarn add element-ui
```

全局注册 ElementUI：
在项目的入口文件中全局注册 ElementUI 组件。例如，在 main.js 文件中：

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

Vue.use(ElementUI);

引入样式：
为了使用 ElementUI 的样式，需要引入对应的样式文件。通常情况下，安装 ElementUI 时会自动生成样式文件，但若未生成，需要手动引入。
```
import 'element-ui/lib/theme-chalk/index.css';
```
使用 ElementUI 组件：
现在可以在项目中使用 ElementUI 组件了。例如，创建一个简单的按钮：
```
<template>
 <div>
   <el-button type="primary">按钮</el-button>
 </div>
</template>
```
确保在组件中正确引入了 el-button。

快速入门

常用组件介绍

ElementUI 包含了多种组件，以下是一些常用的组件：

Button:
用于创建按钮。支持多种类型和大小，包括 primary、success、info、warning、danger、text 等。

<template>
 <div>
   <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>
   <el-button type="text">文字按钮</el-button>
 </div>
</template>

Input:
用于创建输入框。支持多种类型的输入，如文本输入、密码输入等。

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

Select:
用于创建下拉选择框。支持单选和多选。

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

Table:
用于创建表格。支持表格数据的增删改查和自定义操作。

<template>
 <div>
   <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>
 </div>
</template>

组件的简单示例

以下是一个完整的组件示例，展示了如何使用按钮和输入框：

<template>
  <div>
    <el-button type="primary" @click="handleClick">点击按钮</el-button>
    <el-input v-model="inputValue" placeholder="请输入内容"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleClick() {
      console.log('按钮被点击了');
      console.log('输入框的内容是：', this.inputValue);
    }
  }
};
</script>

如何获取ElementUI的官方文档

ElementUI 提供了详细的官方文档，可以通过以下方式访问：

访问 ElementUI 官方网站：https://element.eleme.io/#/zh-CN
在文档页面中，可以查看组件的详细说明、示例代码和 API 文档。
文档页面提供了各种组件的使用指南，帮助开发者快速上手。

布局与栅格系统

基本布局的概念与使用

ElementUI 提供了多种布局方式，包括基础布局和栅格系统。基础布局通常用于简单的页面布局，而栅格系统则提供了更灵活和复杂的布局方式。

基础布局示例

以下是一个简单的基础布局示例，展示了如何使用 el-row 和 el-col 组件来创建布局。

<template>
  <div>
    <el-row>
      <el-col :span="12">左侧内容</el-col>
      <el-col :span="12">右侧内容</el-col>
    </el-row>
  </div>
</template>

在上述示例中，el-row 用于创建行，el-col 用于创建列。span 属性定义了列的宽度，例如 :span="12" 表示列的宽度为一半。

基本布局的使用场景

基础布局适用于创建简单的页面布局，例如：

顶部导航栏和内容区域的分离。
左侧菜单和右侧内容区域的分离。
标题和内容的布局。

栅格系统详解

ElementUI 的栅格系统基于 CSS Grid，提供了更灵活的布局方式。栅格系统将页面划分为多个列和行，可以通过设置不同的 span 属性来控制列的宽度和排列方式。

栅格系统示例

以下是一个栅格系统的示例，展示了如何使用栅格系统来创建复杂的布局。

<template>
  <div>
    <el-row>
      <el-col :span="6">第一列</el-col>
      <el-col :span="6">第二列</el-col>
      <el-col :span="6">第三列</el-col>
      <el-col :span="6">第四列</el-col>
    </el-row>
  </div>
</template>

在上述示例中，每列的宽度为 :span="6"，表示每列占总宽度的四分之一。

栅格系统参数说明

:span="数字"：定义列的宽度，范围为 0 到 24。
:offset="数字"：定义列的偏移量，范围为 0 到 23。
:gutter="数字"：定义列之间的间隔。

例如，设置 :gutter="20" 表示列之间的间隔为 20px。

如何实现响应式布局

ElementUI 的栅格系统支持响应式布局，通过使用 xs、sm、md、lg、xl 参数，可以定义不同屏幕尺寸下的布局。

响应式布局示例

以下是一个响应式布局的示例，展示了如何在不同屏幕尺寸下使用不同的布局：

<template>
  <div>
    <el-row>
      <el-col :span="12" :md="18">大屏幕下占12，中等屏幕下占18</el-col>
      <el-col :span="12" :md="6">大屏幕下占12，中等屏幕下占6</el-col>
    </el-row>
  </div>
</template>

在上述示例中，.col 组件在大屏幕下占 12 的宽度，在中等屏幕下占 18 的宽度。

响应式参数说明

xs：小于 576px 的屏幕尺寸。
sm：大于等于 576px 的屏幕尺寸。
md：大于等于 768px 的屏幕尺寸。
lg：大于等于 992px 的屏幕尺寸。
xl：大于等于 1200px 的屏幕尺寸。

通过设置这些参数，可以实现不同屏幕尺寸下的不同布局。

表单与表单验证

如何构建表单

ElementUI 提供了丰富的表单组件，帮助开发者快速构建表单。以下是一些常用的表单组件：

el-form:
用于创建表单容器。可以包含多个表单项，支持表单验证和提交。

<template>
 <el-form :model="form" :rules="rules" ref="form">
   <el-form-item label="用户名" prop="username">
     <el-input v-model="form.username"></el-input>
   </el-form-item>
   <el-form-item label="密码" prop="password">
     <el-input v-model="form.password" type="password"></el-input>
   </el-form-item>
   <el-form-item>
     <el-button type="primary" @click="submitForm('form')">提交</el-button>
   </el-form-item>
 </el-form>
</template>

el-form-item:
表单项，用于封装表单控件。prop 属性用于指定表单项的字段名，用于表单验证。
el-input:
输入框组件，用于输入文本。支持多种类型，如文本输入、密码输入等。
```
<el-input v-model="form.username" placeholder="请输入用户名"></el-input>
```

el-button:
按钮组件，用于提交表单。

<el-button type="primary" @click="submitForm('form')">提交</el-button>

表单构建示例

以下是一个完整的表单示例，展示了如何使用 el-form、el-form-item 和 el-input 组件来构建表单：

<template>
  <div>
    <el-form :model="form" :rules="rules" ref="form" label-width="100px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" type="password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('提交成功');
          return true;
        } else {
          console.log('提交失败');
          return false;
        }
      });
    }
  }
};
</script>

表单验证的基本规则与使用

ElementUI 支持多种表单验证规则，包括必填、长度限制、正则表达式等。以下是一些常用的验证规则：

required:
必填规则，用于验证字段是否为空。

{
 required: true,
 message: '必填字段',
 trigger: 'blur'
}

min:
最小长度规则，用于验证字段的最小长度。

{
 min: 3,
 max: 5,
 message: '长度在 3 到 5 个字符',
 trigger: 'blur'
}

pattern:
正则表达式规则，用于验证字段是否符合正则表达式。

{
 pattern: /^1\d{10}$/,
 message: '请输入正确的手机号码',
 trigger: 'blur'
}

表单验证示例

以下是一个表单验证的示例，展示了如何使用多种验证规则来验证表单字段：

<template>
  <div>
    <el-form :model="form" :rules="rules" ref="form" label-width="100px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        email: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('提交成功');
          return true;
        } else {
          console.log('提交失败');
          return false;
        }
      });
    }
  }
};
</script>

表单验证的使用场景

表单验证主要用于确保用户输入的数据符合预期的格式和规则。例如：

在注册页面中，验证用户名和密码的格式和长度。
在登录页面中，验证用户名和密码的格式和长度。
在表单提交时，确保所有必填字段都已填写。

提交表单的常用方法

提交表单的方法主要有两种：手动提交和自动提交。

手动提交

手动提交通常通过点击按钮触发，通过调用 validate 方法来验证表单数据。以下是一个手动提交的示例：

<template>
  <div>
    <el-form :model="form" :rules="rules" ref="form" label-width="100px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" type="password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('提交成功');
          return true;
        } else {
          console.log('提交失败');
          return false;
        }
      });
    }
  }
};
</script>

在上述示例中，点击提交按钮会触发 submitForm 方法，该方法调用了 validate 方法来验证表单数据。

自动提交

自动提交通常在表单提交事件中触发，例如在表单提交按钮的点击事件中调用 validate 方法。以下是一个自动提交的示例：

<template>
  <div>
    <el-form :model="form" :rules="rules" ref="form" label-width="100px" @submit.native.prevent>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" type="password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit" @click="submitForm('form')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('提交成功');
          return true;
        } else {
          console.log('提交失败');
          return false;
        }
      });
    }
  }
};
</script>

在上述示例中，表单的提交按钮绑定了 native-type="submit" 属性，表示该按钮是一个提交按钮。点击该按钮会触发表单的提交事件，调用 validate 方法来验证表单数据。

组件定制与主题配置

如何自定义组件样式

ElementUI 支持多种方式来自定义组件样式。以下是一些常见的自定义样式的方法：

全局样式：
通过修改全局 CSS 文件来自定义组件样式。例如，在 global.css 文件中添加样式：
```
.el-button {
 background-color: #ff6358;
 border-color: #ff6358;
}
```

局部样式：
在组件的 style 标签中添加局部样式。例如：

<template>
 <div>
   <el-button class="custom-button">按钮</el-button>
 </div>
</template>

<style scoped>
.custom-button {
 background-color: #ff6358;
 border-color: #ff6358;
}
</style>

使用 CSS 变量：
ElementUI 支持使用 CSS 变量来自定义样式。例如：
```
:root {
 --el-button-bg-color: #ff6358;
 --el-button-border-color: #ff6358;
}
```

自定义样式示例

以下是一个自定义按钮样式的示例，展示了如何通过局部样式来自定义组件样式：

<template>
  <div>
    <el-button class="custom-button">自定义按钮</el-button>
  </div>
</template>

<style scoped>
  .custom-button {
    background-color: #ff6358;
    border-color: #ff6358;
    color: #ffffff;
  }
</style>

在上述示例中，通过在组件的 style 标签中添加局部样式，可以自定义按钮的背景颜色、边框颜色和文字颜色。

主题配置教程

ElementUI 提供了主题配置功能，可以通过修改主题变量来自定义组件的样式。以下是如何配置主题的步骤：

修改主题变量：
打开 theme-variables.css 文件，修改主题变量的值。例如：
```
:root {
 --el-button-bg-color: #ff6358;
 --el-button-border-color: #ff6358;
}
```
编译主题文件：
使用 ElementUI 提供的工具编译主题文件。例如，使用 webpack 或 vue-cli 编译主题文件。
```
npm run build
```
引用编译后的文件：
在项目中引用编译后的主题文件。例如，在 main.js 文件中引入编译后的文件：
```
import 'element-ui/lib/theme-chalk/index.css';
```

主题配置示例

以下是一个主题配置的示例，展示了如何通过修改主题变量来自定义组件的样式：

<template>
  <div>
    <el-button type="primary">自定义主题按钮</el-button>
  </div>
</template>

<style scoped>
  :root {
    --el-button-bg-color: #ff6358;
    --el-button-border-color: #ff6358;
  }
</style>

在上述示例中，通过修改主题变量 --el-button-bg-color 和 --el-button-border-color 的值，可以自定义按钮的背景颜色和边框颜色。

如何修改全局样式

ElementUI 提供了多种方式来修改全局样式。以下是一些常见的修改全局样式的步骤：

覆盖全局样式：
在项目中创建一个全局样式文件，覆盖 ElementUI 的全局样式。例如，在 global.css 文件中添加样式：
```
.el-button {
 background-color: #ff6358;
 border-color: #ff6358;
}
```
使用 CSS 变量：
通过修改主题变量来自定义全局样式。例如，在 theme-variables.css 文件中修改主题变量的值：
```
:root {
 --el-button-bg-color: #ff6358;
 --el-button-border-color: #ff6358;
}
```

全局样式修改示例

以下是一个全局样式修改的示例，展示了如何通过覆盖全局样式来自定义组件的样式：

<template>
  <div>
    <el-button>全局样式按钮</el-button>
  </div>
</template>

<style>
  .el-button {
    background-color: #ff6358;
    border-color: #ff6358;
  }
</style>

在上述示例中，通过在全局样式文件中覆盖 el-button 的样式，可以自定义按钮的背景颜色和边框颜色。

实战案例分享

实际项目中的应用

ElementUI 在实际项目中有着广泛的应用。以下是一些常见的应用场景：

网站布局：
使用 ElementUI 的布局组件来创建网页布局。例如，使用 el-row 和 el-col 组件来创建响应式布局。
表单设计：
使用 ElementUI 的表单组件来设计表单。例如，使用 el-form、el-form-item 和 el-input 组件来创建表单。
响应式设计：
使用 ElementUI 的栅格系统来设计响应式布局。例如，使用 el-row 和 el-col 组件来创建不同屏幕尺寸下的布局。

实际项目示例

以下是一个实际项目的示例，展示了如何使用 ElementUI 来创建一个简单的登录页面：

<template>
  <div>
    <el-row>
      <el-col :span="12" :offset="6">
        <el-form :model="form" :rules="rules" ref="form" label-width="100px">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="form.password" type="password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('form')">登录</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('登录成功');
          return true;
        } else {
          console.log('登录失败');
          return false;
        }
      });
    }
  }
};
</script>

在上述示例中，使用了 el-row、el-col、el-form、el-form-item 和 el-input 组件来创建一个简单的登录页面。

常见问题与解决办法

在使用 ElementUI 进行开发时，可能会遇到一些常见问题。以下是一些常见问题及其解决办法：

组件样式不生效：
- 问题描述：修改了组件样式，但样式不生效。
- 解决办法：确保样式覆盖正确，检查 CSS 选择器的优先级，确保覆盖的样式优先级高于默认样式。
组件不显示：
- 问题描述：创建了组件，但组件不显示。
- 解决办法：检查组件是否正确引入，确保在项目中全局注册了组件，检查组件的 ref 属性是否正确绑定。
表单验证不生效：
- 问题描述：表单验证不生效，提示信息不显示。
- 解决办法：检查表单验证规则是否正确设置，确保 prop 属性和字段名一致，检查 validate 方法是否正确调用。

常见问题解决示例

以下是一个常见问题解决的示例，展示了如何解决表单验证不生效的问题：

<template>
  <div>
    <el-form :model="form" :rules="rules" ref="form" label-width="100px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" type="password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('提交成功');
          return true;
        } else {
          console.log('提交失败');
          return false;
        }
      });
    }
  }
};
</script>

在上述示例中，检查了表单验证规则是否正确设置，确保 prop 属性和字段名一致，并确保 validate 方法正确调用。

如何持续学习与提升

ElementUI 是一个强大的组件库，持续学习和提升对于开发者来说非常重要。以下是一些建议：

阅读官方文档：
官方文档提供了详细的组件说明和示例代码，帮助开发者快速上手和深入理解组件的使用。
实践项目：
通过实践项目来深入学习 ElementUI 的组件和功能。例如，创建一个简单的项目，使用 ElementUI 构建表单或布局。
参与社区：
加入 ElementUI 的社区，与其他开发者交流经验，提出问题和解决方案，获取支持和反馈。
学习 Vue.js：
ElementUI 是基于 Vue.js 的组件库，深入学习 Vue.js 有助于更好地理解和使用 ElementUI。
参考优秀项目：
参考其他使用 ElementUI 的优秀项目，学习他们的设计和实现方式，提升自己的开发水平。

持续学习示例

以下是一个持续学习的示例，展示了如何通过一个简单的项目来学习 ElementUI：

<template>
  <div>
    <el-row>
      <el-col :span="12" :offset="6">
        <h1>欢迎使用 ElementUI</h1>
        <el-button type="primary">开始使用</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '欢迎使用 ElementUI'
    };
  }
};
</script>

在上述示例中，通过创建一个简单的页面，使用 el-row、el-col 和 el-button 组件来学习 ElementUI 的基本用法和布局方式。

总结，ElementUI 是一个强大的组件库，通过学习和实践，可以提升开发效率和产品质量。持续学习和提升对于开发者来说非常重要，通过阅读官方文档、参与社区和参考优秀项目，可以不断提升自己的开发水平。

點擊查看更多內容

為 TA 點贊

若覺得本文不錯，就分享一下吧！

評論

評論

共同學習，寫下你的評論

評論加載中...

展開查看更多評論

作者其他優質文章

正在加載中

臨摹微笑

手記
篇

粉絲

32

獲贊與收藏

170

關注作者，訂閱最新文章

閱讀免費教程

設計模式入門教程

10個小節 22668 427

Dreamweaver 教程

25個小節 5219 102

后端通用面試教程

41個小節 32074 358

推薦

評論

收藏

共同學習，寫下你的評論



感謝您的支持，我會繼續努力的～

掃碼打賞，你說多少就多少

贊賞金額會直接到老師賬戶

支付方式

打開微信掃一掃，即可進行掃碼打賞哦

今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與放棄機會

點擊
抽獎

慕課手記新用戶專享福利

恭喜你，你的運氣太好了，居然抽中了 100個積分！

恭喜你，抽中了價值元的專欄！

太棒了，直接落到你賬戶里！

積分商城里的羅技鼠標、機械鍵盤、
Kindle 閱讀器、小米平衡車
Apple iPad （10.2英寸）、大額優惠券
在等著你去兌換了噢

作者：

免費贈送

兌換碼：1111222211 復制

優惠券可用于購買實戰課、體系課
無門檻使用

先去看看，有什么好東西馬上兌換我愛學習，選課去


亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空