Ant-design-vue课程：新手入门详解

本文详细介绍了ant-design-vue课程的相关内容，包括安装与配置、基础组件使用、表单与表格操作、路由管理以及常见问题排查和调试技巧。通过学习本教程，可以掌握Ant-design-vue的基本使用方法。

Ant-design-vue 是一套专为企业级中后台产品设计的 Vue 设计语言实现。它不仅基于 Ant Design 的设计规范，还结合了 Vue.js 的特性进行实现，为开发者提供了一套完整的前端解决方案。该框架集成了各种常用的组件，如按钮、输入框、布局、表单、表格等，并且支持丰富的配置和扩展功能。此外，Ant-design-vue 还支持动态加载和自定义主题，适用于各类企业级应用开发场景。

Ant-design-vue 通过 npm 安装。首先，确保已经安装了 Node.js 和 npm。然后可以通过以下命令安装 Ant-design-vue：

npm install ant-design-vue

安装完成后，在 Vue 项目中引入该库。如果使用 Vue CLI 创建的项目，可以在 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');

通过以上步骤，Ant-design-vue 将会被正确安装在 Vue 项目中，并自动注册所有组件。

Button按钮组件

Button 是最常用的组件之一，用于触发特定操作，如提交表单、提交查询等。

示例代码

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

<script setup>
import { Button as AButton } from 'ant-design-vue';
</script>

参数说明

• type：按钮类型，可选值包括 primary（主要按钮）、secondary（次要按钮）、link（链接按钮）等。
• shape：按钮形状，可选值包括 circle（圆形按钮）、round（圆角按钮）等。
• size：按钮大小，可选值包括 large（大号）、default（默认）、small（小号）。
• disabled：是否禁用按钮。

Input输入框组件

Input 组件用于获取用户的输入值。它可以是一个简单的文本输入框，也可以是密码输入框、搜索框等。

示例代码

<template>
  <a-input placeholder="请输入内容" v-model:value="inputValue" />
  <a-input-password placeholder="请输入密码" v-model:value="passwordValue" />
  <a-input-search placeholder="搜索..." enter-button="搜索" @search="onSearch" />
</template>

<script setup>
import { Input as AInput, InputPassword as AInputPassword, InputSearch as AInputSearch } from 'ant-design-vue';
import { ref } from 'vue';

const inputValue = ref('');
const passwordValue = ref('');
const onSearch = (value) => {
  console.log(value);
};
</script>

参数说明

• placeholder：输入框的提示文字。
• v-model:value：双向绑定的值。
• type：输入框类型，可选值包括 text（文本）、password（密码）等。
• prefix 和 suffix：输入框前缀和后缀。
• size：输入框大小，可选值包括 large（大号）、default（默认）、small（小号）。
• disabled：是否禁用输入框。

Layout布局组件

Layout 组件用于创建页面的布局结构。它能够帮助开发者快速搭建标准的企业级应用页面布局。例如，可以通过设置宽度和折叠功能来创建灵活的侧边栏。

示例代码

<template>
  <a-layout>
    <a-layout-header style="background: #fff; padding: 16px 24px; border-bottom: 1px solid #eee">头部</a-layout-header>
    <a-layout-content style="padding: 24px; background: #fff; min-height: 280px;">
      内容区
    </a-layout-content>
    <a-layout-footer style="text-align: center; background: #fff; padding: 16px 24px; border-top: 1px solid #eee">
      底部
    </a-layout-footer>
  </a-layout>
</template>

<script setup>
import { Layout as ALayout, Header as AHeader, Content as AContent, Footer as AFooter } from 'ant-design-vue';
</script>

参数说明

• AHeader：头部组件。
• AContent：内容区组件。
• AFooter：底部组件。
• AAside：侧边栏组件。
• ASider：侧边栏组件，可以设置宽度和是否折叠等属性。

创建表单

表单是Web应用中最常用的功能之一，Ant-design-vue 提供了强大的表单组件来创建和管理表单。

示例代码

<template>
  <a-form :model="formState" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
    <a-form-item label="用户名" name="username">
      <a-input v-model:value="formState.username" />
    </a-form-item>
    <a-form-item label="密码" name="password">
      <a-input-password v-model:value="formState.password" />
    </a-form-item>
    <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
      <a-button type="primary" @click="onSubmit">提交</a-button>
    </a-form-item>
  </a-form>
</template>

<script setup>
import { Form as AForm, Input as AInput, InputPassword as AInputPassword, Button as AButton } from 'ant-design-vue';
import { reactive } from 'vue';

const formState = reactive({
  username: '',
  password: '',
});

const onSubmit = () => {
  console.log('提交数据', formState);
};
</script>

参数说明

• :model：绑定数据模型。
• :label-col 和 :wrapper-col：设置表单的布局属性。
• form-item：每个表单项。
• :name：表单项的名称，主要用于验证和提交数据。
• :wrapper-col：设置表单项的布局属性。
• @click：按钮点击事件。

添加表单验证

表单验证是保证数据有效性的关键步骤，通过设置验证规则，可以在提交表单之前确保用户输入的数据符合要求。

示例代码

<template>
  <a-form :model="formState" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" :rules="rules" @submit="onSubmit">
    <a-form-item label="用户名" name="username" :rules="rules.username">
      <a-input v-model:value="formState.username" />
    </a-form-item>
    <a-form-item label="密码" name="password" :rules="rules.password">
      <a-input-password v-model:value="formState.password" />
    </a-form-item>
    <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
      <a-button type="primary" html-type="submit">提交</a-button>
    </a-form-item>
  </a-form>
</template>

<script setup>
import { Form as AForm, Input as AInput, InputPassword as AInputPassword, Button as AButton } from 'ant-design-vue';
import { reactive, ref } from 'vue';

const formState = reactive({
  username: '',
  password: '',
});

const rules = {
  username: [
    {
      required: true,
      message: '请输入用户名',
      trigger: 'blur',
    },
    {
      min: 3,
      max: 15,
      message: '用户名长度在 3 到 15 个字符',
      trigger: 'blur',
    },
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur',
    },
    {
      min: 5,
      max: 15,
      message: '密码长度在 5 到 15 个字符',
      trigger: 'blur',
    },
  ],
};

const onSubmit = (values) => {
  console.log('提交数据', values);
};
</script>

参数说明

• :rules：设置验证规则。
• @submit：表单提交事件。
• required：是否必填。
• message：错误提示信息。
• min 和 max：最小和最大值约束。
• trigger：触发验证的时机。

Table表格组件

Table 组件用于展示表格数据，支持数据排序、筛选、分页等高级功能。

示例代码

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

<script setup>
import { Table as ATable } from 'ant-design-vue';

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

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
];
</script>

参数说明

• :columns：定义表格列信息。
• :data-source：绑定数据源。
• bordered：是否显示边框。

表格数据绑定与操作

表格数据可以通过 v-model 绑定，同时支持分页、排序、筛选等功能。

示例代码

<template>
  <a-table :columns="columns" :data-source="data" bordered="true" :pagination="pagination" :scroll="{ y: 240 }" />
</template>

<script setup>
import { Table as ATable } from 'ant-design-vue';
import { ref } from 'vue';

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    sorter: true, // 开启排序
    sortDirections: ['ascend', 'descend'], // 排序方向
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address',
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
];

const pagination = ref({
  total: data.length,
  pageSize: 5,
  onChange: (page) => {
    console.log(page);
  },
});
</script>

参数说明

• :pagination：分页配置。
• total：总数据量。
• pageSize：每页显示数量。
• onChange：分页改变事件。
• :scroll：设置表格滚动区域。
• sorter：开启排序。
• sortDirections：排序方向。

安装与配置路由

路由是现代Web应用的核心部分，Ant-design-vue 集成了 Vue Router 来实现页面的导航和管理。

安装 Vue Router

首先安装 Vue Router：

npm install vue-router

然后在项目中引入 Vue Router，并配置路由。

示例代码

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

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
    },
    {
      path: '/about',
      name: 'About',
      component: About,
    },
  ],
});

export default router;

参数说明

• history：路由模式，createWebHistory 创建了 HTML5 History 模式。
• routes：路由配置数组，每个路由对象包含 path、name 和 component。

路由跳转与参数传递

使用 router-link 组件进行路由跳转，同时可以传递参数。

示例代码

<template>
  <div>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-link :to="{ name: 'About', params: { id: 1 } }">关于详情</router-link>
    <router-view></router-view>
  </div>
</template>

参数说明

• to：目标路由的路径或名称，可以传递参数。
• router-view：渲染当前路由组件的占位符。

常见错误排查

在使用 Ant-design-vue 时，可能会遇到一些常见的错误。例如，组件未正确注册，可能导致未知组件报错。

示例代码

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

const app = createApp(App);
app.use(antd);  // 确保正确引入了 Ant-design-vue

app.mount('#app');

问题排查

• 组件未正确注册：确保在全局引入 Ant-design-vue 或者单独引入组件。
• 样式未加载：检查是否引入了 Ant-design-vue 的样式文件。

调试工具介绍

调试工具是开发过程中不可或缺的工具，可以帮助开发者快速定位和解决问题。

Vue Devtools

Vue Devtools 是一个强大的开发工具，可以帮助开发者调试 Vue 项目。通过 Chrome 浏览器的扩展程序进行安装。

示例代码

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');

// 使用 Vue Devtools 进行调试

参数说明

• Vue Devtools：安装后可以查看组件树、响应式数据等信息。
• console.log：直接在控制台输出日志信息，便于调试。