首页手记 ant-design-vue入门：新手快速上手指南

ant-design-vue入门：新手快速上手指南

标签：

前端工具 Vue.js 设计基础

概述

本文详细介绍了如何安装和使用ant-design-vue入门，包括组件的快速引入和注册，基本组件如按钮、输入框和布局的使用方法，以及如何进行样式定制。此外，本文还提供了表格组件、表单组件的使用示例，以及一些高级功能的探索实例。

引入ant-design-vue

在项目中引入和使用 Ant Design Vue 需要按照以下步骤进行：

安装 ant-design-vue

安装步骤如下：
```
npm install ant-design-vue --save
```
如果你使用的是 Vue CLI，你可以直接使用 vue add ant-design-vue 命令来安装插件：
```
vue add ant-design-vue
```
或者，如果你已经在项目中，可以直接通过 npm 安装：
```
npm install ant-design-vue --save
```

快速引入组件

安装完成后，你需要在你的项目入口文件中引入并注册 Ant Design Vue 组件。例如，如果你使用的是 main.js：

import Vue from 'vue';
import App from './App.vue';
import { Button, Input, Layout } from 'ant-design-vue';

Vue.config.productionTip = false;

// 通过 Vue.use() 方法引入 Button、Input 和 Layout 组件
Vue.use(Button);
Vue.use(Input);
Vue.use(Layout);

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

以上代码中，我们通过 Vue.use() 方法引入了 Button、Input 和 Layout 组件。你也可以选择全局引入所有组件，使用下面的代码：

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

Vue.use(Antd);

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

以上代码导入了 Antd，并通过 Vue.use(Antd) 实现全局注册，这样在组件中可以直接使用 Ant Design Vue 提供的组件。

基本组件使用

Button按钮组件

按钮组件是 Ant Design Vue 中最基础的组件之一，用于实现各种功能按钮。以下是按钮组件的基本使用方法：

基本使用

<template>
 <a-button type="primary">主要按钮</a-button>
 <a-button>默认按钮</a-button>
 <a-button type="dashed">虚线按钮</a-button>
 <a-button type="danger">危险按钮</a-button>
</template>

例如，以下代码展示了不同类型的按钮：

<template>
 <div>
   <a-button type="primary">主要按钮</a-button>
   <a-button>默认按钮</a-button>
   <a-button type="dashed">虚线按钮</a-button>
   <a-button type="danger">危险按钮</a-button>
 </div>
</template>

<script>
import { Button } from 'ant-design-vue';
export default {
 components: {
   'a-button': Button,
 },
};
</script>

通过设置 type 属性，可以改变按钮的样式。

按钮加载

当按钮正在加载时，可以通过 loading 属性来表示：

<template>
 <a-button type="primary" loading>Loading...</a-button>
</template>

例如，以下代码展示了加载状态的按钮：

<template>
 <a-button type="primary" :loading="loading">加载中...</a-button>
</template>

<script>
import { Button } from 'ant-design-vue';
export default {
 components: {
   'a-button': Button,
 },
 data() {
   return {
     loading: true,
   };
 },
};
</script>

当 loading 为 true 时，按钮会显示加载状态。

按钮禁用

你可以通过 disabled 属性来禁用按钮：

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

例如，以下代码展示了禁用状态的按钮：

<template>
 <a-button type="primary" :disabled="true">已禁用</a-button>
</template>

<script>
import { Button } from 'ant-design-vue';
export default {
 components: {
   'a-button': Button,
 },
};
</script>

Input输入框组件

输入框组件用于收集用户输入数据，是表单中的常见组件。以下是输入框组件的基本使用方法：

基本使用

<template>
 <a-input placeholder="请输入" />
</template>

例如，以下代码展示了基本输入框的使用：

<template>
 <div>
   <a-input placeholder="请输入" />
 </div>
</template>

<script>
import { Input } from 'ant-design-vue';
export default {
 components: {
   'a-input': Input,
 },
};
</script>

受控组件

输入框组件可以作为受控组件使用，通过绑定 v-model 来管理输入值：

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

<script>
import { Input } from 'ant-design-vue';
export default {
 components: {
   'a-input': Input,
 },
 data() {
   return {
     value: '',
   };
 },
};
</script>

密码输入框

使用 type="password" 属性来创建密码输入框：

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

例如，以下代码展示了密码输入框的使用：

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

<script>
import { Input } from 'ant-design-vue';
export default {
 components: {
   'a-input': Input,
 },
};
</script>

Layout布局组件

布局组件用于创建页面布局，帮助快速搭建页面结构。以下是布局组件的基本使用方法：

基本使用

<template>
 <a-layout>
   <a-layout-header>Header</a-layout-header>
   <a-layout-content>Content</a-layout-content>
   <a-layout-footer>Footer</a-layout-footer>
 </a-layout>
</template>

例如，以下代码展示了基本布局的使用：

<template>
 <a-layout>
   <a-layout-header>Header</a-layout-header>
   <a-layout-content>Content</a-layout-content>
   <a-layout-footer>Footer</a-layout-footer>
 </a-layout>
</template>

<script>
import { Layout } from 'ant-design-vue';
export default {
 components: {
   'a-layout': Layout,
   'a-layout-header': Layout.Header,
   'a-layout-footer': Layout.Footer,
   'a-layout-content': Layout.Content,
 },
};
</script>

侧边栏布局

使用 a-layout-sider 组件来创建侧边栏布局：

<template>
 <a-layout>
   <a-layout-sider>Sider</a-layout-sider>
   <a-layout-content>Content</a-layout-content>
 </a-layout>
</template>

例如，以下代码展示了侧边栏布局的使用：

<template>
 <a-layout>
   <a-layout-sider>Sider</a-layout-sider>
   <a-layout-content>Content</a-layout-content>
 </a-layout>
</template>

<script>
import { Layout } from 'ant-design-vue';
export default {
 components: {
   'a-layout': Layout,
   'a-layout-sider': Layout.Sider,
   'a-layout-content': Layout.Content,
 },
};
</script>

嵌套布局

布局组件支持嵌套，可以创建复杂的页面结构：

<template>
 <a-layout>
   <a-layout-header>Header</a-layout-header>
   <a-layout>
     <a-layout-sider>Sider</a-layout-sider>
     <a-layout-content>Content</a-layout-content>
   </a-layout>
   <a-layout-footer>Footer</a-layout-footer>
 </a-layout>
</template>

例如，以下代码展示了嵌套布局的使用：

<template>
 <a-layout>
   <a-layout-header>Header</a-layout-header>
   <a-layout>
     <a-layout-sider>Sider</a-layout-sider>
     <a-layout-content>Content</a-layout-content>
   </a-layout>
   <a-layout-footer>Footer</a-layout-footer>
 </a-layout>
</template>

<script>
import { Layout } from 'ant-design-vue';
export default {
 components: {
   'a-layout': Layout,
   'a-layout-header': Layout.Header,
   'a-layout-sider': Layout.Sider,
   'a-layout-content': Layout.Content,
   'a-layout-footer': Layout.Footer,
 },
};
</script>

样式定制

主题定制

Ant Design Vue 提供了多种主题，可以轻松地改变组件样式。以下是主题定制的方法：

使用 CSS 变量

通过修改 CSS 变量来定制主题，例如：
```
:root {
 --primary-color: #1890ff;
}
```
例如，以下代码展示了如何通过 CSS 变量来定制主题：
```
:root {
 --primary-color: #1890ff;
}
```
自定义样式文件

可以通过覆盖默认样式来定制主题，例如：
```
.ant-btn-primary {
 background-color: #1890ff;
}
```
例如，以下代码展示了如何通过自定义样式文件来定制主题：
```
.ant-btn-primary {
 background-color: #1890ff;
}
```

样式覆盖

你也可以通过 CSS 选择器来覆盖 Ant Design Vue 组件的默认样式：

覆盖组件样式

例如，以下代码展示了如何覆盖按钮组件的样式：
```
.ant-btn {
 border-radius: 10px;
}
```
通过覆盖 .ant-btn 类，可以修改按钮的边框圆角。

覆盖组件属性

你也可以通过修改组件属性来覆盖样式，例如：

<a-button style="border-radius: 10px;">按钮</a-button>

例如，以下代码展示了如何通过 style 属性来覆盖按钮样式：

<a-button style="border-radius: 10px;">按钮</a-button>

<template>
 <a-button style="border-radius: 10px;">按钮</a-button>
</template>

<script>
import { Button } from 'ant-design-vue';
export default {
 components: {
   'a-button': Button,
 },
};
</script>

表格组件使用

Table表格基本使用

表格组件用于展示数据列表，是 Ant Design Vue 中的一个重要组件。

基本使用

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

例如，以下代码展示了基本表格的使用：

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

<script>
import { Table } from 'ant-design-vue';
export default {
 components: {
   'a-table': Table,
 },
 data() {
   return {
     columns: [
       { title: '姓名', dataIndex: 'name' },
       { title: '年龄', dataIndex: 'age' },
     ],
     data: [
       { name: '张三', age: 20 },
       { name: '李四', age: 22 },
     ],
   };
 },
};
</script>

列排序

可以通过 sortable 属性来启用列排序：

<a-table :columns="columns" :data-source="data" :row-key="(record) => record.id" />

例如，以下代码展示了启用列排序的表格：

<template>
 <a-table :columns="columns" :data-source="data" :row-key="(record) => record.id" />
</template>

<script>
import { Table } from 'ant-design-vue';
export default {
 components: {
   'a-table': Table,
 },
 data() {
   return {
     columns: [
       { title: '姓名', dataIndex: 'name', sorter: true },
       { title: '年龄', dataIndex: 'age', sorter: true },
     ],
     data: [
       { id: 1, name: '张三', age: 20 },
       { id: 2, name: '李四', age: 22 },
     ],
   };
 },
};
</script>

列筛选

可以通过 filteredValue 属性来启用列筛选：

<a-table :columns="columns" :data-source="data" :row-key="(record) => record.id" />

例如，以下代码展示了启用列筛选的表格：

<template>
 <a-table :columns="columns" :data-source="data" :row-key="(record) => record.id" />
</template>

<script>
import { Table } from 'ant-design-vue';
export default {
 components: {
   'a-table': Table,
 },
 data() {
   return {
     columns: [
       { title: '姓名', dataIndex: 'name', filters: [
         { text: '张三', value: '张三' },
         { text: '李四', value: '李四' },
       ] },
       { title: '年龄', dataIndex: 'age' },
     ],
     data: [
       { id: 1, name: '张三', age: 20 },
       { id: 2, name: '李四', age: 22 },
     ],
   };
 },
};
</script>

数据加载和分页

数据加载

通过 @load 事件来处理数据加载：

<a-table :columns="columns" :data-source="data" :row-key="(record) => record.id" @load="loadData" />

例如，以下代码展示了如何处理数据加载：

<template>
 <a-table :columns="columns" :data-source="data" :row-key="(record) => record.id" @load="loadData" />
</template>

<script>
import { Table } from 'ant-design-vue';
export default {
 components: {
   'a-table': Table,
 },
 data() {
   return {
     columns: [
       { title: '姓名', dataIndex: 'name' },
       { title: '年龄', dataIndex: 'age' },
     ],
     data: [],
   };
 },
 methods: {
   async loadData() {
     const response = await fetch('http://example.com/data');
     const data = await response.json();
     this.data = data;
   },
 },
};
</script>

分页

使用 pagination 属性来启用分页：

<a-table :columns="columns" :data-source="data" :row-key="(record) => record.id" :pagination="pagination" />

例如，以下代码展示了如何启用分页：

<template>
 <a-table :columns="columns" :data-source="data" :row-key="(record) => record.id" :pagination="pagination" />
</template>

<script>
import { Table } from 'ant-design-vue';
export default {
 components: {
   'a-table': Table,
 },
 data() {
   return {
     columns: [
       { title: '姓名', dataIndex: 'name' },
       { title: '年龄', dataIndex: 'age' },
     ],
     data: [
       { id: 1, name: '张三', age: 20 },
       { id: 2, name: '李四', age: 22 },
     ],
     pagination: {
       pageSize: 10,
       total: 100,
     },
   };
 },
};
</script>

表单组件使用

Form表单组件

表单组件用于创建交互式表单，是 Ant Design Vue 中的一个核心组件。

基本使用

<a-form :form="form" @submit="handleSubmit">
 <a-form-item>
   <a-input placeholder="请输入" v-decorator="['input', { rules: [{ required: true, message: '请输入' }] }]" />
 </a-form-item>
</a-form>

例如，以下代码展示了基本表单的使用：

<template>
 <a-form :form="form" @submit="handleSubmit">
   <a-form-item>
     <a-input placeholder="请输入" v-decorator="['input', { rules: [{ required: true, message: '请输入' }] }]" />
   </a-form-item>
 </a-form>
</template>

<script>
import { Form, Input } from 'ant-design-vue';
export default {
 components: {
   'a-form': Form,
   'a-form-item': Form.Item,
   'a-input': Input,
 },
 data() {
   return {
     form: this.$form.createForm(this, { name: 'input' }),
   };
 },
 methods: {
   handleSubmit(e) {
     e.preventDefault();
     this.form.validateFields((err, values) => {
       if (!err) {
         console.log('Received values of form: ', values);
       }
     });
   },
 },
};
</script>

表单验证

通过 v-decorator 来设置表单验证规则：

<a-form :form="form" @submit="handleSubmit">
 <a-form-item>
   <a-input placeholder="请输入" v-decorator="['input', { rules: [{ required: true, message: '请输入' }] }]" />
 </a-form-item>
</a-form>

例如，以下代码展示了表单验证的使用：

<template>
 <a-form :form="form" @submit="handleSubmit">
   <a-form-item>
     <a-input placeholder="请输入" v-decorator="['input', { rules: [{ required: true, message: '请输入' }] }]" />
   </a-form-item>
 </a-form>
</template>

<script>
import { Form, Input } from 'ant-design-vue';
export default {
 components: {
   'a-form': Form,
   'a-form-item': Form.Item,
   'a-input': Input,
 },
 data() {
   return {
     form: this.$form.createForm(this, { name: 'input' }),
   };
 },
 methods: {
   handleSubmit(e) {
     e.preventDefault();
     this.form.validateFields((err, values) => {
       if (!err) {
         console.log('Received values of form: ', values);
       }
     });
   },
 },
};
</script>

表单验证

表单验证是表单组件的重要功能，可以确保用户输入的数据符合要求。

验证规则

通过 v-decorator 设置验证规则：

<a-form :form="form" @submit="handleSubmit">
 <a-form-item>
   <a-input placeholder="请输入" v-decorator="['input', { rules: [{ required: true, message: '请输入' }] }]" />
 </a-form-item>
</a-form>

例如，以下代码展示了表单验证规则的使用：

<template>
 <a-form :form="form" @submit="handleSubmit">
   <a-form-item>
     <a-input placeholder="请输入" v-decorator="['input', { rules: [{ required: true, message: '请输入' }] }]" />
   </a-form-item>
 </a-form>
</template>

<script>
import { Form, Input } from 'ant-design-vue';
export default {
 components: {
   'a-form': Form,
   'a-form-item': Form.Item,
   'a-input': Input,
 },
 data() {
   return {
     form: this.$form.createForm(this, { name: 'input' }),
   };
 },
 methods: {
   handleSubmit(e) {
     e.preventDefault();
     this.form.validateFields((err, values) => {
       if (!err) {
         console.log('Received values of form: ', values);
       }
     });
   },
 },
};
</script>

自定义验证

你也可以通过自定义验证函数来实现复杂的验证逻辑：

<a-form :form="form" @submit="handleSubmit">
 <a-form-item>
   <a-input placeholder="请输入" v-decorator="['input', { rules: [
     { required: true, message: '请输入' },
     { validator: this.validateInput },
   ] }]" />
 </a-form-item>
</a-form>

例如，以下代码展示了自定义验证的使用：

<template>
 <a-form :form="form" @submit="handleSubmit">
   <a-form-item>
     <a-input placeholder="请输入" v-decorator="['input', { rules: [
       { required: true, message: '请输入' },
       { validator: this.validateInput },
     ] }]" />
   </a-form-item>
 </a-form>
</template>

<script>
import { Form, Input } from 'ant-design-vue';
export default {
 components: {
   'a-form': Form,
   'a-form-item': Form.Item,
   'a-input': Input,
 },
 data() {
   return {
     form: this.$form.createForm(this, { name: 'input' }),
   };
 },
 methods: {
   handleSubmit(e) {
     e.preventDefault();
     this.form.validateFields((err, values) => {
       if (!err) {
         console.log('Received values of form: ', values);
       }
     });
   },
   validateInput(rule, value, callback) {
     if (!value) {
       callback(new Error('请输入'));
     } else {
       callback();
     }
   },
 },
};
</script>

高级功能探索

动态组件

动态组件允许你在运行时根据条件选择渲染不同的组件：

基本使用

<a-button @click="changeComponent">切换组件</a-button>
<component :is="currentComponent"></component>

例如，以下代码展示了如何使用动态组件：

<template>
 <a-button @click="changeComponent">切换组件</a-button>
 <component :is="currentComponent"></component>
</template>

<script>
import Button from 'ant-design-vue/es/button';
import Input from 'ant-design-vue/es/input';

export default {
 components: {
   'a-button': Button,
   'a-input': Input,
 },
 data() {
   return {
     currentComponent: 'a-button',
   };
 },
 methods: {
   changeComponent() {
     if (this.currentComponent === 'a-button') {
       this.currentComponent = 'a-input';
     } else {
       this.currentComponent = 'a-button';
     }
   },
 },
};
</script>

动态组件示例

可以根据用户操作来动态切换组件：

<a-button @click="changeComponent">切换组件</a-button>
<component :is="currentComponent"></component>

例如，以下代码展示了根据用户操作动态切换组件：

<template>
 <a-button @click="changeComponent">切换组件</a-button>
 <component :is="currentComponent"></component>
</template>

<script>
import Button from 'ant-design-vue/es/button';
import Input from 'ant-design-vue/es/input';

export default {
 components: {
   'a-button': Button,
   'a-input': Input,
 },
 data() {
   return {
     currentComponent: 'a-button',
   };
 },
 methods: {
   changeComponent() {
     if (this.currentComponent === 'a-button') {
       this.currentComponent = 'a-input';
     } else {
       this.currentComponent = 'a-button';
     }
   },
 },
};
</script>

插槽使用

插槽是 Vue 中用于自定义组件内容的机制，Ant Design Vue 中的组件也广泛使用插槽。

基本使用

<a-button>
 <template #default>
   自定义按钮
 </template>
</a-button>

例如，以下代码展示了如何使用插槽：

<template>
 <a-button>
   <template #default>
     自定义按钮
   </template>
 </a-button>
</template>

<script>
import { Button } from 'ant-design-vue';
export default {
 components: {
   'a-button': Button,
 },
};
</script>

插槽示例

你可以通过插槽来自定义按钮内容：

<a-button>
 <template #default>
   自定义按钮
 </template>
</a-button>

例如，以下代码展示了如何通过插槽自定义按钮内容：

<template>
 <a-button>
   <template #default>
     自定义按钮
   </template>
 </a-button>
</template>

<script>
import { Button } from 'ant-design-vue';
export default {
 components: {
   'a-button': Button,
 },
};
</script>

通过本文的详细介绍，你可以了解到如何安装和使用 Ant Design Vue 组件库，以及如何使用基本组件、进行样式定制，以及如何使用表格组件、表单组件和高级功能。希望这些内容对你有所帮助。如果你需要更详细的文档或示例，可以参考 Ant Design Vue 的官方文档。

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

缥缈止盈

手记
篇

粉丝

34

获赞与收藏

152

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30583 343

网络编程入门教程

20个小节 12561 237

Pandas 入门教程

25个小节 18499 337

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空

ant-design-vue入门：新手快速上手指南

引入ant-design-vue

基本组件使用

Button按钮组件

Input输入框组件

Layout布局组件

样式定制

主题定制

样式覆盖

表格组件使用

Table表格基本使用

数据加载和分页

表单组件使用

Form表单组件

表单验证

高级功能探索

动态组件

插槽使用

阅读免费教程