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

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

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 更新。

要搭建一个 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

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

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

作用

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

优势

• 丰富的组件：Ant Design Vue 提供了丰富的组件，覆盖了常见的 UI 需求。
• 良好的文档和社区支持：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 组件库中最常用的组件之一。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>

表格组件用于展示结构化数据，可以进行排序、筛选等操作。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>

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

基本用法

<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 的表格组件展示用户列表。

<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 组件实现各种功能。