ant-design-vue项目实战：从入门到上手-原创手记-慕课网

概述

本文详细介绍了ant-design-vue项目实战，涵盖从安装配置到组件使用、项目部署的全过程。通过丰富的示例代码，帮助开发者快速构建美观且易用的交互界面。文章还深入讲解了如何在实际项目中实现动态数据展示与交互功能。

ant-design-vue简介

ant-design-vue 是基于 Ant Design 的 Vue 实现，旨在为开发者提供一组高质量的 Vue 组件，以帮助他们快速构建出美观且易用的交互界面。Ant Design 是一套由阿里云设计团队研发的用于企业级产品的设计体系，具有丰富的设计指南和组件库。Ant Design Vue 则是 Ant Design 的 Vue 实现，它不仅继承了 Ant Design 的设计理念，还具有 Vue 2 的所有特性和优势。

ant-design-vue的主要特点和优势

一致性：一套组件遵循统一的设计语言，提升用户体验一致性。
易用性：丰富的组件库和详细的文档，使得开发人员能够快速上手。
扩展性：支持自定义主题和样式，可以方便地扩展和定制组件。
高性能：Vue 组件的高性能和 React 组件库的积累经验相结合，提供更优秀的用户体验。

安装和配置ant-design-vue

使用 ant-design-vue 需要先安装 Vue.js 和 Vue CLI，这里假设你已经安装了 Vue CLI。可以通过 npm 安装 ant-design-vue：

npm install ant-design-vue --save

安装完成后，需要在 Vue 项目中引入并配置 ant-design-vue。在项目的入口文件（例如 main.js）中引入并使用 ant-design-vue：

import Vue from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

Vue.config.productionTip = false

Vue.use(Antd)

new Vue({
  render: h => h(App),
}).$mount('#app')

快速上手ant-design-vue组件

ant-design-vue 提供了大量的组件，可以帮助开发者快速构建出美观的界面。这些组件通常包括按钮、输入框、表单、列表、表格等。下面将介绍一些常用的组件及其使用方法。

常用组件介绍

按钮组件

按钮组件是最常用的 UI 组件之一，可以用于触发操作。Ant Design Vue 中提供了多种类型的按钮组件，包括普通按钮、主要按钮、危险按钮等。

<template>
  <a-button type="primary">主要按钮</a-button>
  <a-button>普通按钮</a-button>
  <a-button type="danger">危险按钮</a-button>
</template>

输入框组件

输入框组件用于接收用户的输入，包括文本输入框、密码输入框等。

<template>
  <a-input placeholder="请输入文本" />
  <a-input-password placeholder="请输入密码" />
</template>

表单组件

表单组件通常用于收集用户输入的数据，例如注册表单、登录表单等。

<template>
  <a-form :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
    <a-form-item label="用户名">
      <a-input v-model="form.username" placeholder="请输入用户名" />
    </a-form-item>
    <a-form-item label="密码">
      <a-input-password v-model="form.password" placeholder="请输入密码" />
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 14, offset: 6 }">
      <a-button type="primary" html-type="submit">提交</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
      },
    };
  },
};
</script>

列表组件

列表组件用于展示数据列表，通常用于展示多条数据。

<template>
  <a-list bordered>
    <a-list-item v-for="item in list" :key="item.id">
      {{ item.name }}
    </a-list-item>
  </a-list>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' },
        { id: 3, name: '王五' },
      ],
    };
  },
};
</script>

组件的使用方法和示例代码

按钮组件

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

<script>
export default {
  methods: {
    handleClick() {
      console.log('按钮被点击了');
    },
  },
};
</script>

输入框组件

<template>
  <a-input placeholder="请输入文本" v-model="inputValue" />
  <p>{{ inputValue }}</p>
</template>

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

表单组件

<template>
  <a-form :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
    <a-form-item label="文本输入框">
      <a-input v-model="form.text" placeholder="请输入文本" />
    </a-form-item>
    <a-form-item label="密码输入框">
      <a-input-password v-model="form.password" placeholder="请输入密码" />
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 14, offset: 6 }">
      <a-button type="primary" @click="handleSubmit">提交</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        text: '',
        password: '',
      },
    };
  },
  methods: {
    handleSubmit() {
      console.log('表单提交了', this.form);
    },
  },
};
</script>

组件的自定义与扩展

ant-design-vue 的组件可以方便地自定义和扩展。例如，可以通过修改样式来改变组件的外观，或者通过自定义插槽来改变组件的结构。

自定义样式

<template>
  <a-button type="primary" style="background-color: #ff6600; color: #fff;">
    自定义颜色按钮
  </a-button>
</template>

使用插槽自定义结构

<template>
  <a-form-item label="文本输入框">
    <template #default>
      <a-input v-model="form.text" placeholder="请输入文本" />
    </template>
  </a-form-item>
</template>

<script>
export default {
  data() {
    return {
      form: {
        text: '',
      },
    };
  },
};
</script>

创建第一个ant-design-vue项目

要创建一个使用 ant-design-vue 的 Vue 项目，你首先需要初始化一个 Vue 项目，然后引入并配置 ant-design-vue，最后创建一些简单的页面布局和组件。

初始化一个Vue项目

你可以使用 Vue CLI 来快速创建一个新的 Vue 项目。在命令行中运行以下命令：

vue create my-project
cd my-project

引入并配置ant-design-vue

在项目中安装 ant-design-vue：

npm install ant-design-vue --save

在 main.js 中引入并配置 ant-design-vue：

import Vue from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

Vue.config.productionTip = false

Vue.use(Antd)

new Vue({
  render: h => h(App),
}).$mount('#app')

创建简单的页面布局和组件

创建页面布局

首先创建一个简单的页面布局，包括一个导航栏和一个内容区域。

<template>
  <div>
    <a-layout>
      <a-layout-header>
        <a-menu mode="horizontal">
          <a-menu-item>首页</a-menu-item>
          <a-menu-item>关于我们</a-menu-item>
        </a-menu>
      </a-layout-header>
      <a-layout-content>
        <router-view />
      </a-layout-content>
    </a-layout>
  </div>
</template>

创建组件

创建一个简单的登录组件，用于用户登录。

<template>
  <div>
    <a-form :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
      <a-form-item label="用户名">
        <a-input v-model="form.username" placeholder="请输入用户名" />
      </a-form-item>
      <a-form-item label="密码">
        <a-input-password v-model="form.password" placeholder="请输入密码" />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 14, offset: 6 }">
        <a-button type="primary" @click="handleSubmit">登录</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
      },
    };
  },
  methods: {
    handleSubmit() {
      console.log('表单提交了', this.form);
    },
  },
};
</script>

ant-design-vue的表单设计

表单设计是前端开发中不可或缺的一部分。ant-design-vue 提供了丰富的表单组件，可以帮助开发者轻松地创建各种表单。

表单组件介绍

ant-design-vue 中常用的表单组件包括：

a-form：表单容器，用于包裹表单的所有输入项和按钮。
a-form-item：表单项容器，用于包裹单个输入项。
a-input：文本输入框组件。
a-input-password：密码输入框组件。
a-button：按钮组件，用于提交表单。

基本表单

<template>
  <a-form :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
    <a-form-item label="用户名">
      <a-input v-model="form.username" placeholder="请输入用户名" />
    </a-form-item>
    <a-form-item label="密码">
      <a-input-password v-model="form.password" placeholder="请输入密码" />
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 14, offset: 6 }">
      <a-button type="primary" @click="handleSubmit">登录</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
      },
    };
  },
  methods: {
    handleSubmit() {
      console.log('表单提交了', this.form);
    },
  },
};
</script>

表单验证规则

表单验证规则可以确保用户输入的数据符合预期格式。ant-design-vue 提供了多种验证规则，例如必填项、长度限制、正则表达式等。

基本验证规则

<template>
  <a-form :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }" :rules="rules" />
    <a-form-item label="用户名" prop="username">
      <a-input v-model="form.username" placeholder="请输入用户名" />
    </a-form-item>
    <a-form-item label="密码" prop="password">
      <a-input-password v-model="form.password" placeholder="请输入密码" />
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 14, offset: 6 }">
      <a-button type="primary" @click="handleSubmit">登录</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 16, message: '密码长度应该在6到16个字符之间', trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
    handleSubmit() {
      console.log('表单提交了', this.form);
    },
  },
};
</script>

动态表单生成

动态表单生成是指在运行时根据后端数据生成表单。这种功能可以使得表单更加灵活和适应不同的场景。

动态生成表单

<template>
  <a-form :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }" :rules="rules" />
    <a-form-item v-for="item in formItems" :key="item.name" :label="item.label" :prop="item.name">
      <a-input v-model="form[item.name]" />
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 14, offset: 6 }">
      <a-button type="primary" @click="handleSubmit">提交</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      formItems: [
        { name: 'username', label: '用户名' },
        { name: 'password', label: '密码' },
      ],
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
    handleSubmit() {
      console.log('表单提交了', this.form);
    },
  },
};
</script>

动态数据展示与交互

在实际应用中，动态数据展示与交互是必不可少的功能。ant-design-vue 提供了列表和表格组件来帮助开发者展示和操作数据。

列表和表格组件的应用

列表组件

列表组件用于展示一组数据，通常与后端接口结合使用，动态加载和展示数据。

<template>
  <a-list bordered>
    <a-list-item v-for="item in list" :key="item.id">
      {{ item.name }}
    </a-list-item>
  </a-list>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' },
        { id: 3, name: '王五' },
      ],
    };
  },
};
</script>

表格组件

表格组件用于展示结构化数据，通常用于展示大量的数据。

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

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

数据的增删改查操作

增加数据

<template>
  <a-list bordered>
    <a-list-item v-for="item in list" :key="item.id">
      {{ item.name }}
    </a-list-item>
    <a-button type="primary" @click="addData">添加数据</a-button>
  </a-list>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' },
        { id: 3, name: '王五' },
      ],
    };
  },
  methods: {
    addData() {
      this.list.push({ id: this.list.length + 1, name: '新增用户' });
    },
  },
};
</script>

删除数据

<template>
  <a-list bordered>
    <a-list-item v-for="item in list" :key="item.id" @click="handleRemove(item)">
      {{ item.name }}
    </a-list-item>
  </a-list>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' },
        { id: 3, name: '王五' },
      ],
    };
  },
  methods: {
    handleRemove(item) {
      this.list = this.list.filter(i => i.id !== item.id);
    },
  },
};
</script>

修改数据

<template>
  <a-list bordered>
    <a-list-item v-for="item in list" :key="item.id" @click="handleEdit(item)">
      {{ item.name }}
    </a-list-item>
  </a-list>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' },
        { id: 3, name: '王五' },
      ],
    };
  },
  methods: {
    handleEdit(item) {
      item.name = '修改后的名字';
    },
  },
};
</script>

查询数据

<template>
  <a-input-search
    v-model="searchValue"
    placeholder="请输入名字"
    enter-button="搜索"
    @search="handleSearch"
  />
  <a-list bordered>
    <a-list-item v-for="item in filteredList" :key="item.id">
      {{ item.name }}
    </a-list-item>
  </a-list>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' },
        { id: 3, name: '王五' },
      ],
      searchValue: '',
    };
  },
  computed: {
    filteredList() {
      return this.list.filter(item => item.name.includes(this.searchValue));
    },
  },
  methods: {
    handleSearch(value) {
      console.log('搜索值：', value);
    },
  },
};
</script>

响应式设计与移动端适配

响应式设计

响应式设计可以使 UI 在不同的设备上自适应地显示，通常使用 CSS 媒体查询来实现。

@media screen and (max-width: 600px) {
  /* 在宽度小于 600px 的设备上应用的样式 */
  .example {
    font-size: 12px;
  }
}

移动端适配

移动端适配通常包括布局调整、字体大小调整等。可以使用 vw 单位来实现灵活的布局。

.example {
  font-size: 2vmin;
}

项目部署与调试

项目部署与调试是开发流程中的重要环节。通过合适的调试技巧和构建打包工具，可以确保项目的顺利发布。

本地调试技巧

在本地调试时，可以使用 Vue CLI 提供的开发服务器来快速启动和调试项目。

npm run serve

此外，还可以使用浏览器开发者工具来查看和调试页面。例如，使用 Chrome DevTools 进行调试。

使用 Chrome DevTools 调试

打开 Chrome 浏览器，访问你正在开发的项目。
在浏览器右上角点击 "更多"（三个点），选择 "更多工具" -> "开发者工具"。
在开发者工具中，选择 "Sources" 标签页，可以查看和调试 JavaScript 代码。
选择 "Elements" 标签页，可以查看和编辑 HTML 和 CSS。

项目构建与打包

项目构建与打包是为了将开发环境中的代码转换为生产环境可以使用的代码。使用 Vue CLI 可以方便地构建和打包项目。

npm run build

构建完成后，会在项目根目录的 dist 文件夹中生成生产环境的代码。

部署到服务器

项目打包完成后，可以将生成的文件上传到服务器。常见的部署方式包括使用 FTP、SCP、Git 等工具将文件上传到服务器。

使用 FTP 部署

使用 FTP 客户端软件（如 FileZilla）连接到服务器。
将 dist 文件夹中的文件上传到服务器的相应目录。

使用 Git 部署

在服务器上设置 Git 仓库。
使用命令行将本地的 dist 文件夹添加到 Git 仓库，并提交。
将提交的代码推送到服务器上的 Git 仓库。

git add .
git commit -m "Deploy to production"
git push origin master

使用 Docker 部署

创建 Dockerfile 文件，定义应用的运行环境。
使用 Docker 构建镜像。
使用 Docker 运行镜像。

FROM nginx:alpine
COPY dist /usr/share/nginx/html

docker build -t my-app .
docker run -d -p 80:80 my-app

通过以上步骤，你可以将 ant-design-vue 项目部署到服务器上并进行调试和维护。