首页手记 Vue3阿里系UI组件学习入门教程

Vue3阿里系UI组件学习入门教程

标签：

前端工具 Vue.js 阿里云

概述

本文将带你学习如何在Vue3项目中使用阿里系的UI组件库Ant Design Vue，涵盖组件安装、配置及常用组件的使用教程。通过本文，你将掌握Vue3阿里系UI组件学习的关键步骤，包括搭建Vue3项目、安装Ant Design Vue以及自定义主题和样式。

Vue3基础回顾

Vue3核心特性简述

Vue 3 是 Vue.js 的最新版本，它在性能、API 和工具支持方面有了显著的提升。以下是 Vue 3 的一些核心特性：

Composition API

Composition API 是 Vue 3 中引入的一个新的 API，它允许开发者更灵活地组织和重用状态逻辑。通过 setup 函数，可以更好地管理组件的状态和生命周期逻辑。

import { reactive, computed } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0
    });

    const doubleCount = computed(() => state.count * 2);

    const increment = () => {
      state.count++;
    };

    return {
      count: state.count,
      doubleCount,
      increment
    };
  }
};

Tree Shaking

Vue 3 使用 Proxy 对象来替代 Object.defineProperty，这使得组件可以被更好地树摇（Tree Shaking）。这样可以在生产环境中移除未使用的代码，显著减小打包文件的大小。

更快的渲染性能

Vue 3 通过一系列优化提升了渲染性能，例如静态树提升、更高效的更新检查算法等。这些改进使 Vue 3 在数据变更时能更快地更新 DOM。

更简洁的模板语法

Vue 3 优化了模板解析器，使得模板更加简洁和高效。例如，Vue 3 优化了模板编译的粒度，使得小的变更可以触发更少的 DOM 更新。

Vue3项目搭建步骤

要搭建一个 Vue 3 项目，可以使用 Vue CLI（Vue CLI 4 及以上版本支持 Vue 3）。以下是搭建步骤：

安装 Vue CLI

首先需要安装 Vue CLI，执行以下命令：

npm install -g @vue/cli

创建 Vue 3 项目

使用 Vue CLI 创建一个新的 Vue 3 项目：

vue create my-vue3-project

选择 Vue 3 版本，或者在创建项目时选择 Manually select features 选项，然后选择 Vue 3。

配置项目

创建完成后，项目的基本目录结构如下：

my-vue3-project/
├── node_modules/
├── public/
│   ├── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   ├── main.js
├── package.json

App.vue 是项目的主组件，main.js 是项目的入口文件。以下是 main.js 和 App.vue 的配置示例：

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

const app = createApp(App);
app.use(Antd);
app.mount('#app');

<!-- src/App.vue -->
<template>
  <div id="app">
    <router-view />
  </div>
</template>

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

运行项目

在项目的根目录下执行以下命令运行项目：

npm run serve

这将启动开发服务器，并在浏览器中打开项目。

阿里系UI组件库简介

Ant Design Vue简介

Ant Design Vue 是阿里巴巴设计团队为 Vue.js 应用设计的一套 UI 组件库，它基于 Ant Design 的设计语言，提供了丰富的组件和样式支持。Ant Design Vue 包含了各种常用的前端组件，如按钮、表格、表单、导航等，帮助开发者快速构建高质量的 Web 应用。

UI组件库的作用和优势

作用

提升开发效率：UI 组件库提供了现成的组件，可以重复利用，减少重复开发的工作量。
一致的设计语言：使用统一的设计语言，使得应用界面更加一致和美观。
可访问性和兼容性：UI 组件库通常会考虑不同平台和设备的兼容性，以及可访问性问题。

优势

丰富的组件：Ant Design Vue 提供了丰富的组件，覆盖了常见的 UI 需求。
良好的文档和社区支持：Ant Design Vue 有详细的文档和活跃的社区支持，方便开发者快速学习和解决问题。
可定制性强：开发者可以根据需要自定义组件的样式，满足项目的个性化需求。

安装及配置Ant Design Vue

项目中安装Ant Design Vue

要将 Ant Design Vue 安装到 Vue 3 项目中，可以使用 npm 或 yarn 安装。以下是安装步骤：

使用 npm 安装

npm install ant-design-vue

使用 yarn 安装

yarn add ant-design-vue

基本配置和快速开始

引入 Ant Design Vue

在项目的入口文件（如 main.js）中引入并使用 Ant Design Vue：

import { createApp } from 'vue';
import App from './App.vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

const app = createApp(App);
app.use(Antd);
app.mount('#app');

使用组件

在需要使用 Ant Design Vue 组件的地方，可以通过 import 或按需引入组件：

import { Button } from 'ant-design-vue';

export default {
  components: {
    AButton: Button
  }
};

或者使用按需引入：

import { defineComponent } from 'vue';
import { Button } from 'ant-design-vue';

export default defineComponent({
  components: {
    AButton: Button
  },
  setup() {
    // 组件逻辑代码
  }
});

常用UI组件使用教程

按钮组件Button

按钮组件是 UI 组件库中最常用的组件之一。Ant Design Vue 中的按钮组件具有多种样式，可以满足不同的应用场景。

基本用法

<template>
  <a-button type="primary">主要按钮</a-button>
  <a-button type="secondary">次要按钮</a-button>
  <a-button type="dashed">虚线按钮</a-button>
  <a-button type="link">链接按钮</a-button>
</template>

带图标按钮

按钮组件可以与图标组件结合使用。

<template>
  <a-button type="primary" icon="save">保存</a-button>
  <a-button type="primary" shape="circle" icon="search"></a-button>
</template>

禁用状态

按钮组件可以通过 disabled 属性设置禁用状态。

<template>
  <a-button type="primary" disabled>禁用按钮</a-button>
</template>

自定义样式

可以通过自定义类名和样式来修改按钮样式。

<template>
  <a-button type="primary" class="custom-button">自定义按钮</a-button>
</template>

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

表格组件Table

表格组件用于展示结构化数据，可以进行排序、筛选等操作。Ant Design Vue 的表格组件支持多种高级功能。

基本用法

<template>
  <a-table :columns="columns" :data-source="data"></a-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '姓名',
          dataIndex: 'name'
        },
        {
          title: '年龄',
          dataIndex: 'age'
        }
      ],
      data: [
        { key: '1', name: '张三', age: 26 },
        { key: '2', name: '李四', age: 29 }
      ]
    };
  }
};
</script>

排序和筛选

表格组件支持列的排序和筛选功能。

<template>
  <a-table :columns="columns" :data-source="data" :row-key="record => record.key" :row-selection="rowSelection" :pagination="false"></a-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '姓名',
          dataIndex: 'name'
        },
        {
          title: '年龄',
          dataIndex: 'age'
        }
      ],
      data: [
        { key: '1', name: '张三', age: 26 },
        { key: '2', name: '李四', age: 29 }
      ],
      rowSelection: {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        }
      }
    };
  }
};
</script>

分页

表格组件支持分页功能。

<template>
  <a-table :columns="columns" :data-source="data" :pagination="pagination"></a-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '姓名',
          dataIndex: 'name'
        },
        {
          title: '年龄',
          dataIndex: 'age'
        }
      ],
      data: [
        { key: '1', name: '张三', age: 26 },
        { key: '2', name: '李四', age: 29 }
      ],
      pagination: {
        pageSize: 10,
        total: 20
      }
    };
  }
};
</script>

弹出框组件Modal

弹出框组件用于显示模态对话框，可以用于确认操作、输入信息等场景。

基本用法

<template>
  <a-button type="primary" @click="showModal">显示模态框</a-button>
  <a-modal v-model:visible="visible" title="标题" @ok="handleOk">
    <p>这是一条内容</p>
  </a-modal>
</template>

<script>
export default {
  data() {
    return {
      visible: false
    };
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      console.log('点击了确定按钮');
      this.visible = false;
    }
  }
};
</script>

自定义内容

可以通过插槽来自定义模态框的内容。

<template>
  <a-button type="primary" @click="showModal">显示模态框</a-button>
  <a-modal v-model:visible="visible" title="标题" @ok="handleOk">
    <template #footer>
      <a-button key="back" @click="handleOk">确定</a-button>
    </template>
  </a-modal>
</template>

<script>
export default {
  data() {
    return {
      visible: false
    };
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      console.log('点击了确定按钮');
      this.visible = false;
    }
  }
};
</script>

自定义主题和样式

主题色更改

Ant Design Vue 提供了多种主题色，可以通过修改全局样式来更改主题色。

/* example.css */
@import '~ant-design-vue/es/style/themes/index.css';
@import '~ant-design-vue/es/style/themes/custom.css';

/* 自定义颜色 */
body {
  --primary-color: #1890ff;
  --secondary-color: #f5222d;
}

通过变量改变主题色

在项目的 main.js 或 main.ts 文件中引入自定义样式文件：

import 'ant-design-vue/dist/antd.css';
import './example.css';

import { createApp } from 'vue';
import App from './App.vue';
import Antd from 'ant-design-vue';

const app = createApp(App);
app.use(Antd);
app.mount('#app');

自定义组件样式

可以通过添加自定义类名和样式来进一步自定义组件样式。

<template>
  <a-button type="primary" class="custom-button">自定义按钮</a-button>
</template>

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

实战案例：构建简单的管理系统

管理系统需求分析

假设要构建一个简单的管理系统，用于管理企业的员工信息。系统需求如下：

用户列表：展示所有员工的基本信息。
添加员工：用户可以添加新的员工信息。
编辑员工信息：用户可以编辑现有的员工信息。
删除员工：用户可以删除不需要的员工信息。

使用Ant Design Vue组件实现功能

用户列表

使用 Ant Design Vue 的表格组件展示用户列表。

<template>
  <a-table :columns="columns" :data-source="data" :row-selection="rowSelection" :row-key="(record) => record.key" @edit="handleEdit" @delete="handleDelete"></a-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '姓名',
          dataIndex: 'name'
        },
        {
          title: '年龄',
          dataIndex: 'age'
        }
      ],
      data: [
        { key: '1', name: '张三', age: 26 },
        { key: '2', name: '李四', age: 29 }
      ],
      rowSelection: {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        }
      }
    };
  },
  methods: {
    handleEdit(record) {
      console.log('编辑记录', record);
    },
    handleDelete(record) {
      console.log('删除记录', record);
    }
  }
};
</script>

添加员工

使用 Ant Design Vue 的表单组件来添加员工信息。

<template>
  <a-modal v-model:visible="visible" title="添加员工" @ok="handleOk" @cancel="handleCancel">
    <a-form :model="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 12 }">
      <a-form-item label="姓名">
        <a-input v-model:value="form.name" />
      </a-form-item>
      <a-form-item label="年龄">
        <a-input v-model:value="form.age" />
      </a-form-item>
    </a-form>
  </a-modal>
  <a-button type="primary" @click="showModal">添加员工</a-button>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      form: {
        name: '',
        age: ''
      }
    };
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      console.log('添加员工', this.form);
      this.visible = false;
    },
    handleCancel(e) {
      console.log('取消添加');
      this.visible = false;
    }
  }
};
</script>

编辑员工信息

使用 Ant Design Vue 的表单组件来编辑员工信息。

<template>
  <a-modal v-model:visible="visible" title="编辑员工信息" @ok="handleOk" @cancel="handleCancel">
    <a-form :model="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 12 }">
      <a-form-item label="姓名">
        <a-input v-model:value="form.name" />
      </a-form-item>
      <a-form-item label="年龄">
        <a-input v-model:value="form.age" />
      </a-form-item>
    </a-form>
  </a-modal>
  <a-button type="primary" @click="showModal">编辑员工信息</a-button>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      form: {
        name: '',
        age: ''
      }
    };
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      console.log('编辑员工信息', this.form);
      this.visible = false;
    },
    handleCancel(e) {
      console.log('取消编辑');
      this.visible = false;
    }
  }
};
</script>

删除员工

使用 Ant Design Vue 的弹出框组件来确认删除操作。


<template>
  <a-button type="primary" @click="showModal">删除员工</a-button>
  <a-modal v-model:visible="visible" title="确认删除" @ok="handleOk" @cancel="handleCancel">
    <p>是否确认删除该员工信息？</p>
  </a-modal>
</template>

<script>
export default {
  data() {
    return {
      visible: false
    };
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      console.log('删除员工');
      this.visible = false;
    },
    handleCancel(e) {
      console.log('取消删除');
      this.visible = false;
    }
  }
};
</script>
``

以上是使用 Ant Design Vue 组件构建一个简单的管理系统的基本步骤。通过这些示例代码，可以看到如何轻松地使用 Ant Design Vue 组件实现各种功能。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

慕森王

手记
篇

粉丝

107

获赞与收藏

552

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30589 343

网络编程入门教程

20个小节 12562 237

Pandas 入门教程

25个小节 18499 337

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

Vue3阿里系UI组件学习入门教程

Composition API

Tree Shaking

更快的渲染性能

更简洁的模板语法

安装 Vue CLI

创建 Vue 3 项目

配置项目

运行项目

作用

优势

使用 npm 安装

使用 yarn 安装

引入 Ant Design Vue

使用组件

基本用法

带图标按钮

禁用状态

自定义样式

基本用法

排序和筛选

分页

基本用法

自定义内容

通过变量改变主题色

用户列表

添加员工

编辑员工信息

删除员工

阅读免费教程