Vue与antd结合使用_vue antd

什么是antd？

antd是蚂蚁集团旗下开发的一款优秀的前端UI框架，目前这个框架支持Vue和React。这个框架主要用于开发企业级的后台产品，如果想开发移动端应用的话可以选择Ionic。

选择合适的官方文档

在antd vue官网上选择2.x的antd，因为这个版本对应的是vue3的。

使用步骤

1. 在已有的antd项目中安装antd。

npm i --save ant-design-vue@next
1

2. 在入口文件中引入antd以及antd.css，并挂载到vue身上。

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
app.use(Antd);
1
2
3

3. 只需在组件的模板中直接使用即可。

添加图标

1. 在script标签中引入图标

import {
   
  HomeOutlined,
} from '@ant-design/icons-vue';
1
2
3
4

2. 注册组件

  components: {
   
    HomeOutlined
  }
1
2
3
4

3. 使用组件

<HomeOutlined />
1

4. 可以通过行内样式的形式来改变组件的样式

<HomeOutlined style="color: blue" />
1

5. 在按钮里加入图标（通过template）

<a-button type="primary" :size="size">
  <template #icon>
    <DownloadOutlined />
  </template>
  Download
</a-button>
1
2
3
4
5
6

注意：上面的这种写法依然要引入并注册。

表单组件

下面是vue结合antd的基础表单组件的实现效果和代码。

<template>
  <div>
    <ul class="input_list">
      <li>姓名：<a-input v-model:value="userinfo.username"></a-input></li>
      <li>年龄：<a-input v-model:value="userinfo.age"></a-input></li>
      <li>
        性别：
        <a-radio-group v-model:value="userinfo.sex">
          <a-radio value="男"
1
2
3
4
5
6
7
8