首页手记 Vue3的阿里系UI组件项目实战详解

Vue3的阿里系UI组件项目实战详解

标签：

前端工具 Vue.js

概述

本文将详细介绍如何在Vue 3项目中使用阿里系UI组件库Ant Design Vue，包括组件的安装、配置和基础组件的使用方法。通过实战案例，你将学会构建一个简单的个人主页，涵盖用户基本信息展示、动态列表和编辑简介等功能。文章还将分享一些常见的项目问题及解决方案，帮助你更好地优化项目。

引入阿里系UI组件库

阿里系UI组件库Ant Design Vue提供了丰富的组件库，帮助开发者快速构建高质量的用户界面。它基于Vue 3构建，提供了大量常用的UI组件，如按钮、输入框、模态框、表格等，适用于构建企业级Web应用。这些组件不仅拥有统一的视觉风格，还支持定制化，具有很高的灵活性。

安装和配置阿里系UI组件库

安装Ant Design Vue组件库可以通过npm或yarn进行。以下是使用npm安装的步骤：

首先确保已经安装了Node.js和npm。可以通过以下命令检查版本：
```
node -v
npm -v
```
在命令行中运行以下命令，创建一个新的Vue项目：
```
npm create vite@latest my-vue-app --template vue
cd my-vue-app
```
在项目根目录安装Ant Design Vue：
```
npm install ant-design-vue
```

在main.js或main.ts中引入并注册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');

此时，组件库已经安装并配置完成，可以开始使用。

快速上手Vue3项目

在开始使用Vue 3项目之前，我们需要了解如何创建和配置一个基本的Vue项目。

创建Vue3项目

首先，确保已经安装了Node.js和npm。可以通过以下命令检查版本：

node -v
npm -v

接下来，创建一个新的Vue项目：

npm create vite@latest my-vue-app --template vue
cd my-vue-app

这将创建一个基于Vue 3的项目，在当前目录下生成my-vue-app项目文件夹。

配置项目基本设置

在项目中，我们需要配置一些基本设置，如路由、状态管理等。

1. 配置路由

我们使用Vue Router来实现页面的导航。首先安装Vue Router：

npm install vue-router@next

然后在项目中配置路由：

创建一个router.js文件：

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

const routes = [
    { path: '/', component: Home },
    { path: '/about', component: About },
];

const router = createRouter({
    history: createWebHistory(),
    routes,
});

export default router;

在main.js中引入并使用路由：

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

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

2. 配置状态管理

我们使用Vuex来进行状态管理。首先安装Vuex：

npm install vuex@next

然后在项目中配置Vuex：

创建一个store.js文件：

import { createStore } from 'vuex';

export default createStore({
    state() {
        return {
            count: 0,
        };
    },
    mutations: {
        increment(state) {
            state.count++;
        },
        decrement(state) {
            state.count--;
        },
    },
    actions: {
        increment({ commit }) {
            commit('increment');
        },
        decrement({ commit }) {
            commit('decrement');
        },
    },
    getters: {
        count: (state) => state.count,
    },
});

在main.js中引入并使用Vuex：

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

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

3. 项目结构介绍

项目的基本结构如下：

my-vue-app/
├── .gitignore
├── tsconfig.json
├── src/
│   ├── assets/
│   ├── components/
│   ├── views/
│   │   └── Home.vue
│   │   └── About.vue
│   ├── App.vue
│   ├── main.js
│   ├── router.js
│   └── store.js
├── package.json
├── README.md
└── vite.config.ts

通过以上步骤，我们已经成功配置了路由和状态管理，可以开始构建UI界面了。

使用基础UI组件

接下来，我们将介绍如何使用基础的UI组件，包括按钮、输入框等。

常用组件介绍

按钮

按钮组件是最常见的UI组件之一，可以用于触发各种操作。在Ant Design Vue中，按钮组件提供了丰富的样式和功能。

<template>
  <a-button type="primary" @click="handleClick">点击我</a-button>
</template>

<script setup>
import { message } from 'ant-design-vue';

const handleClick = () => {
  message.success('点击了按钮');
};
</script>

输入框

输入框用于用户输入文本，支持单行和多行输入。

<template>
  <a-input v-model:value="inputValue" placeholder="请输入..." />
</template>

<script setup>
import { ref } from 'vue';

const inputValue = ref('Hello world');
</script>

下拉选择框

下拉选择框用于提供选项供用户选择。

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

<script setup>
import { ref } from 'vue';

const selectedValue = ref('');
const options = ref(['选项一', '选项二', '选项三']);
</script>

单选按钮

单选按钮用于让用户从一组选项中选择一个。

<template>
  <a-radio-group v-model:value="selectedRadio">
    <a-radio value="选项一">选项一</a-radio>
    <a-radio value="选项二">选项二</a-radio>
  </a-radio-group>
</template>

<script setup>
import { ref } from 'vue';

const selectedRadio = ref('选项一');
</script>

复选框

复选框用于让用户从一组选项中选择多个。

<template>
  <a-checkbox-group v-model:value="selectedCheckboxes">
    <a-checkbox value="选项一">选项一</a-checkbox>
    <a-checkbox value="选项二">选项二</a-checkbox>
  </a-checkbox-group>
</template>

<script setup>
import { ref } from 'vue';

const selectedCheckboxes = ref(['选项一', '选项二']);
</script>

组件的基本使用方法

在使用组件时，可以通过绑定属性和事件来实现动态功能。例如，按钮组件可以绑定点击事件：

<template>
  <a-button type="primary" @click="handleClick">点击我</a-button>
</template>

<script setup>
import { message } from 'ant-design-vue';

const handleClick = () => {
  message.success('点击了按钮');
};
</script>

通过以上示例，我们了解了如何在Vue 3项目中使用基础的UI组件，并实现了一些基本功能。

高级组件使用

接下来，我们将介绍如何使用一些高级的UI组件，如模态框、表格、导航等组件。这些组件可以用于构建更复杂的用户界面。

模态框

模态框是一种常用的UI组件，它可以显示一个可交互的弹出窗口，用于展示详细信息或进行用户交互。

基本使用

在Ant Design Vue中，模态框组件提供了丰富的功能，如全屏、拖拽等。

<template>
  <a-button type="primary" @click="showModal">显示模态框</a-button>
  <a-modal v-model:visible="visible" title="文本" @ok="handleOk">
    <p>一些文本...</p>
  </a-modal>
</template>

<script setup>
import { ref } from 'vue';

const visible = ref(false);

const showModal = () => {
  visible.value = true;
};

const handleOk = e => {
  console.log('点击了确定按钮', e);
  visible.value = false;
};
</script>

进阶使用

模态框还可以包含更复杂的组件，如表单、列表等。

<template>
  <a-button type="primary" @click="showModal">显示模态框</a-button>
  <a-modal v-model:visible="visible" title="文本" @ok="handleOk">
    <a-form :model="formState" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
      <a-form-item label="名称">
        <a-input v-model:value="formState.name" />
      </a-form-item>
      <a-form-item label="描述">
        <a-input v-model:value="formState.description" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { ref } from 'vue';

const visible = ref(false);
const formState = ref({
  name: '',
  description: '',
});

const showModal = () => {
  visible.value = true;
};

const handleOk = e => {
  console.log('点击了确定按钮', e);
  visible.value = false;
};
</script>

表格

表格组件用于展示和操作数据。在Ant Design Vue中，表格组件支持分页、排序、筛选等高级功能。

基本使用

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

<script setup>
import { reactive } from 'vue';

const columns = [
  { title: '姓名', dataIndex: 'name' },
  { title: '年龄', dataIndex: 'age' },
  { title: '地址', dataIndex: 'address' },
];

const data = reactive([
  { name: '张三', age: 20, address: '北京市' },
  { name: '李四', age: 22, address: '上海市' },
  { name: '王五', age: 21, address: '广州市' },
]);
</script>

进阶使用

<template>
  <a-table :columns="columns" :data-source="data" bordered :row-selection="rowSelection" />
</template>

<script setup>
import { reactive } from 'vue';

const columns = [
  { title: '姓名', dataIndex: 'name' },
  { title: '年龄', dataIndex: 'age' },
  { title: '地址', dataIndex: 'address' },
];

const data = reactive([
  { name: '张三', age: 20, address: '北京市' },
  { name: '李四', age: 22, address: '上海市' },
  { name: '王五', age: 21, address: '广州市' },
]);

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  },
};
</script>

导航

导航组件用于构建应用的导航菜单。在Ant Design Vue中，导航组件支持水平和垂直布局。

水平布局

<template>
  <a-layout-header>
    <a-menu mode="horizontal">
      <a-menu-item key="mail">邮件</a-menu-item>
      <a-menu-item key="app">应用</a-menu-item>
      <a-sub-menu key="SubMenu" title="子菜单">
        <a-menu-item key="setting">设置</a-menu-item>
      </a-sub-menu>
    </a-menu>
  </a-layout-header>
</template>

垂直布局

<template>
  <a-layout>
    <a-layout-sider>
      <a-menu mode="inline">
        <a-menu-item key="mail">邮件</a-menu-item>
        <a-menu-item key="app">应用</a-menu-item>
        <a-sub-menu key="SubMenu" title="子菜单">
          <a-menu-item key="setting">设置</a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout-content>
      <div style="padding: 24px 0; background: #fff;">
        Content
      </div>
    </a-layout-content>
  </a-layout>
</template>

通过以上示例，我们了解了如何在Vue 3项目中使用一些高级的UI组件，并实现了一些复杂功能。

项目实战案例

为了更好地理解如何在实际项目中应用Ant Design Vue组件库，我们将通过一个简单的案例来进行演示。

实际案例演示

假设我们要构建一个简单的个人主页，包括以下功能：

用户基本信息展示
用户动态列表
个人简介编辑

用户基本信息展示

用户基本信息展示可以通过Ant Design Vue的卡片组件实现。

<template>
  <a-card title="用户信息" :bordered="false" style="width: 300px">
    <a-descriptions :column="1" style="padding: 28px 0">
      <a-descriptions-item label="姓名">张三</a-descriptions-item>
      <a-descriptions-item label="年龄">20</a-descriptions-item>
      <a-descriptions-item label="地址">北京市</a-descriptions-item>
    </a-descriptions>
  </a-card>
</template>

用户动态列表

用户动态列表可以通过Ant Design Vue的表格组件实现。

<template>
  <a-table :columns="columns" :data-source="data" bordered>
    <template #name="{ text }">
      <a>{{ text }}</a>
    </template>
  </a-table>
</template>

<script setup>
import { reactive } from 'vue';

const columns = [
  { title: '名称', dataIndex: 'name' },
  { title: '日期', dataIndex: 'date' },
  { title: '操作', dataIndex: 'action' },
];

const data = reactive([
  { key: '1', name: '张三', date: '2023-01-01', action: '详情' },
  { key: '2', name: '李四', date: '2023-01-02', action: '详情' },
  { key: '3', name: '王五', date: '2023-01-03', action: '详情' },
]);
</script>

个人简介编辑

个人简介编辑可以通过Ant Design Vue的模态框组件实现。

<template>
  <a-button type="primary" @click="showModal">编辑简介</a-button>
  <a-modal v-model:visible="visible" title="个人简介" @ok="handleOk">
    <a-form :model="formState" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
      <a-form-item label="姓名">
        <a-input v-model:value="formState.name" />
      </a-form-item>
      <a-form-item label="年龄">
        <a-input v-model:value="formState.age" />
      </a-form-item>
      <a-form-item label="地址">
        <a-input v-model:value="formState.address" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { ref } from 'vue';

const visible = ref(false);
const formState = ref({
  name: '',
  age: '',
  address: '',
});

const showModal = () => {
  visible.value = true;
};

const handleOk = e => {
  console.log('点击了确定按钮', e);
  visible.value = false;
};
</script>

通过以上代码，我们成功构建了一个简单的个人主页，包括用户基本信息展示、用户动态列表、个人简介编辑等功能。

项目中常见问题及解决方案

问题1：组件样式不一致

问题描述：在项目中使用多个组件时，可能会发现组件的样式不一致。
解决方案：确保所有组件都使用官方提供的CSS文件。如果需要自定义样式，可以在组件内部通过style属性或class类名进行局部修改。

<a-button class="custom-button" type="primary">点击我</a-button>

问题2：状态管理复杂

问题描述：在项目中使用状态管理时，可能会遇到状态复杂的问题。
解决方案：合理规划状态结构，使用Vuex的模块化方式，将状态管理划分为多个模块，每个模块负责一部分功能。

const store = createStore({
  modules: {
    user: {
      state: () => ({
        name: '',
        age: 0,
      }),
      mutations: {
        setName(state, name) {
          state.name = name;
        },
        setAge(state, age) {
          state.age = age;
        },
      },
    },
    posts: {
      state: () => ({
        list: [],
      }),
      mutations: {
        setList(state, list) {
          state.list = list;
        },
      },
    },
  },
});

通过以上步骤，我们解决了项目中常见的问题，并实现了功能的合理划分。

总结与扩展

通过以上章节的学习，我们了解了如何使用阿里系UI组件库Ant Design Vue构建Vue 3项目，并掌握了基础和高级组件的使用方法。在实际项目中，合理规划和设计UI组件可以提高开发效率和用户体验。

项目总结

组件选择：根据项目需求选择合适的组件，如按钮、输入框等基础组件，模态框、表格、导航等高级组件。
状态管理：使用Vuex进行状态管理，合理规划状态结构，提高代码可维护性。
路由配置：使用Vue Router进行页面导航，实现页面之间的跳转。
组件定制：自定义组件样式和功能，满足项目的特定需求。

如何进一步学习和优化项目

深入学习Ant Design Vue文档：Ant Design Vue提供了详细的文档，可以进一步学习组件的高级特性和用法。
优化UI设计：根据项目需求和用户体验优化UI设计，合理布局和排版，提升用户满意度。
性能优化：优化组件的渲染性能，减少不必要的DOM操作和重新渲染。
测试和调试：进行单元测试和集成测试，确保组件和应用的稳定性。

通过不断学习和实践，可以进一步提升Vue 3项目开发的水平，构建出高质量的Web应用。

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

互换的青春

手记
篇

粉丝

16

获赞与收藏

50

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30787 345

网络编程入门教程

20个小节 12720 239

Pandas 入门教程

25个小节 18599 341

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空

Vue3的阿里系UI组件项目实战详解

1. 配置路由

2. 配置状态管理

3. 项目结构介绍

按钮

输入框

下拉选择框

单选按钮

复选框

基本使用

进阶使用

基本使用

进阶使用

水平布局

垂直布局

用户基本信息展示

用户动态列表

个人简介编辑

问题1：组件样式不一致

问题2：状态管理复杂

阅读免费教程