安装材料 UI

安装材料 UI 是一套基于 Vue.js 的 UI 组件库，提供了一系列美观、易用的组件，适用于快速构建各种 Web 应用。

特性

• 提供了丰富的组件，包括按钮、输入框、表格、弹窗、下拉框等常用组件
• 支持主题定制，用户可以根据需求自定义组件颜色、字体等样式
• 简单易用，只需通过 npm 安装即可在项目中引入使用
• 遵循最佳实践，代码结构清晰，易于维护和二次开发

安装

安装依赖：

npm install element-ui -S

引入样式：

import 'element-ui/lib/theme-chalk/index.css';

引入组件：

import Vue from 'vue';
import ElementUI from 'element-ui';

Vue.use(ElementUI);

组件列表

下面列举了部分常用组件，详细列表请查看官方文档。

Button 按钮

示例代码：

<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>

Input 输入框

示例代码：

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

Table 表格

示例代码：

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

Dialog 弹窗

示例代码：

<el-button @click="dialogVisible = true">打开弹窗</el-button>
<el-dialog :visible.sync="dialogVisible">
  <span>这是一段内容</span>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确认</el-button>
  </div>
</el-dialog>

Select 下拉框

示例代码：

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

主题定制

可以使用 在线主题定制工具 进行主题定制，也可以在项目中自定义变量进行样式覆盖。

示例代码：

$--color-primary: #409EFF; /* 修改主色 */
$--font-size-base: 16px; /* 修改全局字号 */

@import "./node_modules/element-ui/packages/theme-chalk/src/index";

总结

安装材料 UI 提供了一套高质量、易用、高度可定制的 UI 组件库，满足了各种 Web 应用的 UI 需求。通过 npm 安装并引入组件即可快速构建页面，使用主题定制工具或自定义样式变量，还可以实现各种样式需求。