Vue3的阿里系UI组件教程：简单易懂的入门指南

本文详细介绍了如何在Vue3项目中使用阿里系UI组件库，包括Element Plus和Ant Design Vue的安装、配置及基础组件的使用方法。通过本文，你将学会如何引入并使用这些组件库来构建功能丰富的用户界面，并对组件样式和主题进行定制。此外，文章还涵盖了高级功能与事件绑定的实战案例，帮助你更好地掌握Vue3的阿里系UI组件教程。

引入阿里系UI组件库

在Vue3项目中，阿里系UI组件库是一个强大的工具，可以帮助开发者快速构建美观且功能丰富的用户界面。这些组件库提供了大量的预定义组件，包括布局容器、导航、表单控件、数据展示组件等。每个组件都经过精心设计，确保了视觉一致性和用户体验的一致性。

常用的阿里系UI组件库

1. Element Plus
   Element Plus 是阿里巴巴团队为Vue 3.0 开发的UI组件库。它继承了Element UI的优点，并且在Vue3的新特性上做了很多优化。

2. Ant Design Vue
   Ant Design Vue 是阿里巴巴团队为Vue 3.0 开发的Ant Design风格的UI组件库。它基于Ant Design，提供了丰富的组件和完整的生态支持。

通过npm安装组件库

安装Element Plus或Ant Design Vue非常简单，只需要在项目中执行相应的命令。下面以Element Plus为例进行演示：

1. 安装Element Plus
   打开终端，导航到你的Vue项目根目录，然后运行以下命令：

   npm install element-plus

   如果你的项目使用了TypeScript，你还需要安装类型定义文件：

   npm install @types/element-plus

2. 引入Element Plus
   在项目的入口文件（通常为main.js或main.ts）中引入Element Plus：

   import { createApp } from 'vue';
   import App from './App.vue';
   import ElementPlus from 'element-plus';
   import 'element-plus/dist/index.css';
   
   const app = createApp(App);
   app.use(ElementPlus);
   app.mount('#app');

通过以上步骤，你已经成功地引入并配置了Element Plus到你的Vue3项目中。接下来，你可以开始使用这些组件来构建用户界面了。

快速上手组件使用

在Vue3项目中使用阿里系UI组件库，如Element Plus或Ant Design Vue，可以极大地简化前端开发过程。下面将介绍一些基础组件的使用方法，并通过示例代码进行演示。

基础组件使用

以下是一些常见的基础组件：

1. Button
   Button 组件用于实现各种按钮效果，包括默认按钮、文本按钮、危险按钮等。

2. Input
   Input 组件用于输入文本，支持输入框的样式和功能定制。

3. Select
   Select 组件用于创建下拉选择菜单，支持下拉列表、多选等复杂选择场景。

4. Table
   Table 组件用于展示表格数据，支持排序、过滤、编辑等功能。

示例代码演示

下面通过一个简单的示例来演示如何使用这些基础组件：

<template>
  <div>
    <el-button type="primary">主要按钮</el-button>
    <el-input v-model="inputValue" placeholder="请输入内容"></el-input>
    <el-select v-model="selectValue" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      selectValue: '',
      options: [
        { value: '选项1', label: '黄金糕' },
        { value: '选项2', label: '双皮奶' },
        { value: '选项3', label: '蚵仔煎' },
        { value: '选项4', label: '蛋仔' }
      ],
      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>

<style scoped>
/* 昌明字体样式 */
</style>

上述代码中，我们使用了 el-button、el-input、el-select 和 el-table 组件，并展示了如何绑定数据模型和渲染动态内容。通过这种方式，你可以快速构建出一个包含各种基础交互功能的用户界面。

样式定制与主题修改

在使用阿里系UI组件库时，可能会遇到一些特定的项目需求，需要对默认样式进行定制或修改主题。本节将详细介绍如何自定义组件样式以及如何修改组件主题以适应项目需求。

自定义组件样式

自定义组件样式可以通过覆盖默认样式或者使用组件提供的CSS变量来自定义。以下是一个示例，展示如何通过CSS变量自定义el-button组件的样式。

<template>
  <div>
    <el-button type="primary" :style="{ '--el-button-bg-color': '#ff6600', '--el-button-color': '#ffffff' }">自定义按钮</el-button>
  </div>
</template>

在这个示例中，我们通过:style属性动态设置CSS变量值，从而改变按钮的背景颜色和文本颜色。

通过覆盖默认样式自定义

如果需要更复杂的样式定制，可以覆盖默认的CSS类。假设你想要更改el-input组件的边框颜色和圆角半径：

<style scoped>
.el-input input {
  border-color: #ff6600;
  border-radius: 10px;
}
</style>

在这个例子中，我们通过覆盖.el-input input类来改变输入框的边框颜色和圆角半径。

修改组件主题

修改组件主题可以使用组件库提供的主题定制功能。例如，Element Plus提供了主题配置文件来改变全局样式。

步骤一：创建主题配置文件

首先，创建一个名为theme-vars.ts的文件，并定义需要覆盖的主题变量。

// theme-vars.ts
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'CustomTheme',
  setup() {
    return {
      '--el-color-primary': '#ff6600',
      '--el-color-primary-light-7': '#ff9966',
      '--el-color-primary-light-9': '#ffcc99',
      '--el-color-primary-light-12': '#ffffcc',
      '--el-color-primary-dark-3': '#cc6633',
      '--el-color-primary-dark-7': '#993300',
      '--el-color-primary-dark-9': '#661a00',
      '--el-color-primary-light-3': '#ffcc99'
    }
  }
})

步骤二：使用主题配置文件

在main.ts中引入并使用主题配置文件：

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import themeVars from '@/theme-vars';
import 'element-plus/dist/index.css';

const app = createApp(App);
app.use(ElementPlus, { theme: themeVars });
app.mount('#app');

通过这种方式，你可以覆盖并自定义全局主题，从而确保组件库的样式与你的项目需求相匹配。

常见组件配置与属性说明

阿里系UI组件库提供了丰富的组件，每个组件都有其特定的配置属性和用法。本节将详细介绍一些常用的组件及其配置属性，并通过示例代码展示如何根据需求调整这些组件属性。

常见组件及其配置属性

以下是一些常用的组件及其配置属性：

1. Button

   • type: 指定按钮类型，如primary、success、info、warning、danger等。
   • size: 指定按钮大小，如small、medium、large。
   • round: 是否开启圆角。
   • plain: 是否为朴素按钮。

2. Input

   • type: 输入框类型，如text、password。
   • placeholder: 输入框默认提示文本。
   • size: 输入框大小，如small、medium、large。
   • prefix-icon: 输入框前缀图标。
   • suffix-icon: 输入框后缀图标。
3. Select
   • value: 当前选中的值。
   • options: 下拉选项数组。
   • placeholder: 未选择时默认提示文本。
   • size: 下拉框大小，如small、medium、large。
   • multiple: 是否为多选。

示例代码调整组件属性

下面通过组件示例代码展示如何根据具体需求调整组件属性：

Button 示例

<template>
  <div>
    <el-button type="success" size="small" round plain>成功按钮</el-button>
  </div>
</template>

在这个示例中，我们通过type="success"、size="small"、round和plain属性调整了按钮的样式和行为。

Input 示例

<template>
  <div>
    <el-input v-model="inputValue" placeholder="请输入内容" prefix-icon="el-icon-search" suffix-icon="el-icon-circle-close"></el-input>
  </div>
</template>

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

在这个示例中，我们通过prefix-icon和suffix-icon属性添加了前缀和后缀图标，通过v-model双向绑定输入框的值。

Select 示例

<template>
  <div>
    <el-select v-model="selectValue" 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 {
      selectValue: [],
      options: [
        { value: '选项1', label: '黄金糕' },
        { value: '选项2', label: '双皮奶' },
        { value: '选项3', label: '蚵仔煎' },
        { value: '选项4', label: '蛋仔' }
      ]
    }
  }
}
</script>

在这个示例中，通过multiple属性设置了下拉菜单为多选模式。

高级功能与事件绑定

阿里系UI组件库不仅提供了丰富的基础组件，还支持许多高级功能和灵活的事件绑定。本节将详细介绍一些组件的高级功能，并展示如何通过事件绑定增强组件的交互性。

组件的高级功能

1. Table

   • 排序：支持列排序功能，可以通过el-table-column组件的sortable属性激活排序。
   • 分页：支持分页功能，可以通过el-pagination组件实现数据分页显示。

2. Form

   • 验证：支持表单验证功能，可以通过el-form组件的rules属性定义验证规则。
   • 提交：支持表单提交功能，可以通过el-form组件的validate方法实现表单验证和提交。
3. Dialog
   • 自定义位置：支持对话框的自定义位置，可以通过center、top、bottom等属性调整对话框的位置。
   • 事件绑定：支持事件绑定功能，可以通过@opened、@closed等事件钩子实现自定义逻辑。

示例代码展示

Table 高级功能示例

下面展示如何使用Table组件实现数据排序和分页。

<template>
  <div>
    <el-table :data="tableData" style="width: 100%" @sort-change="handleSort">
      <el-table-column prop="date" label="日期" sortable="custom"></el-table-column>
      <el-table-column prop="name" label="姓名" sortable="custom"></el-table-column>
      <el-table-column prop="address" label="地址" sortable="custom"></el-table-column>
    </el-table>
    <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" :total="total" layout="total, prev, pager, next"></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: 5,
      total: 4
    }
  },
  methods: {
    handleSort({ column, prop, order }) {
      console.log(`排序列：${prop}，排序方式：${order}`);
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      console.log(`当前页：${page}`);
    }
  }
}
</script>

在这个示例中，我们通过@sort-change事件钩子实现了排序功能，通过@current-change事件钩子实现了分页功能。

Form 高级功能示例

下面展示如何使用Form组件实现表单验证和提交。

<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' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('提交成功!');
        } else {
          console.log('表单校验失败!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

在这个示例中，我们通过rules属性定义了表单的验证规则，并通过validate方法实现了表单提交。同时，通过resetFields方法实现了表单的重置功能。

Dialog 高级功能示例

下面展示如何使用Dialog组件实现自定义位置和事件绑定。

<template>
  <div>
    <el-button type="primary" @click="dialogVisible = true">打开对话框</el-button>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      center>
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    }
  }
}
</script>

在这个示例中，我们通过center属性设置了对话框的居中显示，并通过@click事件钩子实现了对话框的打开和关闭。

实战案例分享

在实际项目中使用阿里系UI组件库，可以显著提高开发效率和用户体验。本节将通过几个实际案例，分享如何在项目中有效使用阿里系UI组件。

案例一：用户管理系统

假设你要开发一个用户管理系统，需要实现用户列表展示、用户信息编辑和用户数据统计等功能。以下是如何使用Element Plus组件实现这些功能：

用户列表展示

<template>
  <div>
    <el-table :data="userList" style="width: 100%">
      <el-table-column prop="id" label="ID" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="email" label="邮箱" width="180"></el-table-column>
      <el-table-column prop="role" label="角色"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </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="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userList: [
        { id: 1, name: '张三', email: 'zhangsan@example.com', role: '管理员' },
        { id: 2, name: '李四', email: 'lisi@example.com', role: '普通用户' },
        { id: 3, name: '王五', email: 'wangwu@example.com', role: '管理员' }
      ],
      currentPage: 1,
      pageSize: 10,
      total: 3
    }
  },
  methods: {
    handleEdit(index, row) {
      console.log(`编辑用户：${row.name}`);
    },
    handleDelete(index, row) {
      console.log(`删除用户：${row.name}`);
    },
    handleSizeChange(val) {
      console.log(`每页显示条数：${val}`);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页：${val}`);
      this.currentPage = val;
    }
  }
}
</script>

用户信息编辑

<template>
  <div>
    <el-dialog title="编辑用户" :visible.sync="dialogFormVisible" width="40%">
      <el-form :model="form" :rules="rules" ref="form" label-width="80px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name"></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 label="角色" prop="role">
          <el-select v-model="form.role" placeholder="请选择">
            <el-option label="管理员" value="管理员"></el-option>
            <el-option label="普通用户" value="普通用户"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm()">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      form: {
        name: '',
        email: '',
        role: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
        ],
        role: [
          { required: true, message: '请选择角色', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('数据提交成功!');
          this.dialogFormVisible = false;
        } else {
          console.log('表单校验失败!');
          return false;
        }
      });
    }
  }
}
</script>

用户数据统计

<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>用户数据统计</span>
      </div>
      <div class="text item">
        总用户数：{{ totalUsers }}
      </div>
      <div class="text item">
        管理员用户数：{{ adminUsers }}
      </div>
      <div class="text item">
        普通用户数：{{ normalUsers }}
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      totalUsers: 3,
      adminUsers: 2,
      normalUsers: 1
    }
  }
}
</script>

<style scoped>
.box-card {
  width: 400px;
}
</style>

案例二：博客管理系统

假设你要开发一个博客管理系统，需要实现文章列表展示、文章编辑和文章评论等功能。以下是如何使用Element Plus组件实现这些功能：

文章列表展示

<template>
  <div>
    <el-table :data="articleList" style="width: 100%">
      <el-table-column prop="id" label="ID" width="180"></el-table-column>
      <el-table-column prop="title" label="标题" width="300"></el-table-column>
      <el-table-column prop="author" label="作者" width="180"></el-table-column>
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </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="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      articleList: [
        { id: 1, title: '一篇文章', author: '王五', date: '2023-01-01' },
        { id: 2, title: '另一篇文章', author: '张三', date: '2023-01-02' },
        { id: 3, title: '第三篇文章', author: '李四', date: '2023-01-03' }
      ],
      currentPage: 1,
      pageSize: 10,
      total: 3
    }
  },
  methods: {
    handleEdit(index, row) {
      console.log(`编辑文章：${row.title}`);
    },
    handleDelete(index, row) {
      console.log(`删除文章：${row.title}`);
    },
    handleSizeChange(val) {
      console.log(`每页显示条数：${val}`);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页：${val}`);
      this.currentPage = val;
    }
  }
}
</script>

文章编辑

<template>
  <div>
    <el-dialog title="编辑文章" :visible.sync="dialogFormVisible" width="40%">
      <el-form :model="form" :rules="rules" ref="form" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="作者" prop="author">
          <el-input v-model="form.author"></el-input>
        </el-form-item>
        <el-form-item label="日期" prop="date">
          <el-date-picker v-model="form.date" type="date" placeholder="选择日期" format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="内容">
          <el-input type="textarea" v-model="form.content"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm()">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      form: {
        title: '',
        author: '',
        date: '',
        content: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        author: [
          { required: true, message: '请输入作者', trigger: 'blur' }
        ],
        date: [
          { required: true, message: '请选择日期', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('文章保存成功!');
          this.dialogFormVisible = false;
        } else {
          console.log('表单校验失败!');
          return false;
        }
      });
    }
  }
}
</script>

文章评论

<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>文章评论</span>
      </div>
      <div class="text item">
        <el-input type="textarea" v-model="comment" placeholder="请输入评论内容"></el-input>
      </div>
      <div class="text item">
        <el-button type="primary" @click="submitComment()">提交</el-button>
      </div>
      <div class="text item" v-for="comment in comments" :key="comment.id">
        <el-card class="box-comment">
          <div slot="header" class="clearfix">
            <span>{{ comment.author }}</span>
            <span class="date">{{ comment.date }}</span>
          </div>
          <div class="text item">
            {{ comment.content }}
          </div>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      comment: '',
      comments: [
        { id: 1, author: '张三', date: '2023-01-01', content: '这是一条评论' },
        { id: 2, author: '李四', date: '2023-01-02', content: '这是另一条评论' }
      ]
    }
  },
  methods: {
    submitComment() {
      if (this.comment.trim() === '') {
        alert('请输入评论内容');
        return;
      }
      const newComment = {
        id: this.comments.length + 1,
        author: '用户',
        date: new Date().toISOString().substr(0, 10),
        content: this.comment
      };
      this.comments.push(newComment);
      this.comment = '';
      alert('评论提交成功!');
    }
  }
}
</script>

<style scoped>
.box-card {
  width: 600px;
}
.box-comment {
  margin: 10px 0;
}
</style>