Ant学习官网

https://antdv.com/docs/vue/introduce-cn/

1.面包屑

<a-breadcrumb> --面包屑
  <a-breadcrumb-item href="">  --面包屑第一级
      <a-icon type="home" />   --左边添加图标
      <span>首页</span>
  </a-breadcrumb-item>
  <a-breadcrumb-item href="">  --面包屑第二级
      <a-icon type="home" />   --左边添加图标
      <span>系统设置</span>
  </a-breadcrumb-item>
</a-breadcrumb> --面包屑

2.多选

  <a-checkbox @change="多选框">  --多选框定义
    多选标题                    --多选框名称
 <a-checkbox :default-checked="false" disabled />  --默认不可选的多选框

3.单选

<a-radio>单选</a-radio> <a-radio-button value=""> 单选框</a-radio-button>
<a-radio-group default-value="a" button-style="solid" size="large">  --默认选择为“a”，选择形式为实色填底，输入框大小为大
<a-radio-button value="a" disabled> --单选框默认无法选择

4.输入框

1.placeholder 输入提示框
<a-input placeholder="输入框" />

2.prefix--输入内容默认前缀 suffix--输入内容默认后缀
<a-input prefix="输入框前缀" suffix="输入框后缀" />

3.显示加载状态
<a-input-search placeholder="搜索时显示载入状态" loading />

4.密码输入框
<a-input-password placeholder="密码框" />

5.@blur 当焦点失去时候触发事件validatePhoneBlur为js里面的函数
@blur="validatePhoneBlur"

4.1 字符型输入框

<a-input style="width:320px" addon-before="指标库编码:" addon-after=".com" default-value="ZBK00001" /> --addon-before 前面文字，--addon-after 末尾文字

4.2 数值型输入框

<a-input-number :min="1" :max="100000" :step="0.1" :default-value="3" @change="onChange" />
数字输入框，最小1，最大100000，小数点0.1，默认数字3，框体后缀定义change

4.3 日期型输入框

<a-date-picker style="width: 50%" />  日期输入框

4.4 时间型输入框

<a-time-picker style="width: 50%" />  时间输入框

5.下拉框

<a-select default-value="门诊"> --复选框
  <a-select-option value="mz">  --第一个选项
    门诊
  </a-select-option>
</a-select>

6.按钮

<a-button type="primary" style="margin-right:10px"> --单选按钮 
   保存
</a-button>
<a-dropdown>             --下拉按钮
 <a-menu slot="overlay" @click="handleMenuClick"> --下拉按钮选项
   <a-menu-item key="1"> --下拉按钮一个选项
      详情
   </a-menu-item>
   <a-menu-item key="2">
      删除
    </a-menu-item>
    <a-menu-item key="3">
      更多
    </a-menu-item>
 </a-menu>
 <a-button> Actions <a-icon type="down" /> </a-button>  --type 按钮类型 icon 图标
</a-dropdown>

7.评分

<a-rate :default-value="2.5" allow-half />    评分框体，默认2.5星，允许半星选择
<a-rate :default-value="2" disabled />        默认两星，锁定选择
<a-rate character="A" allow-half style="fontSize: 36px" />   将星号代替为A字母，允许半星，字体大小36PX

8. 布局

<a-layout-header>顶部布局栏</a-layout-header>
<a-layout-content>内容布局栏</a-layout-content>
<a-layout-footer>底部布局栏</a-layout-footer>
根据优先级排布
<a-layout>
        <a-layout-sider>侧边布局栏</a-layout-sider>
        <a-layout-content>底部布局栏</a-layout-content>
</a-layout>               ---插入布局

9. TreeSelect 树型选择

<a-tree-select
 树形图基本属性
v-model="value"           --指定当前选中的条目
 style="width: 100%"     --大小
  />
<a-tree-select-node key="按键分组" value="条目" title="条目名称">

10. Upload 上传

<a-upload
      list-type="picture"      --上传列表的内建样式
      action="//jsonplaceholder.typicode.com"--上传的地址
      :preview-file="previewFile"    --自定义文件预览逻辑
    >
      <a-button> <a-icon type="upload" /> Upload </a-button>                      --按钮属性，名称
    </a-upload>

一、环境搭建

前提：已经安装好了nodejs

下载地址：Download | Node.js

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题

由于新版的nodejs已经集成了npm，所以安装nodejs时，npm也一并安装好了。可以通过输入 "npm -v"（查看npm版本） 来测试是否成功安装。

如果你安装的是旧版本的 npm，可以通过 "npm install npm -g" 命令来升级。

参考链接：Ant Design Vue

1.新建目录

用于存放ant项目，项目路径：D:\Users\01397470\Ant

2. 安装脚手架工具

D:\Users\01397470\Ant> npm install -g @vue/cli

3.创建vue项目

D:\Users\01397470\Ant> vue create antd-demo

此过程较慢，耐心等待吧~

4.启动项目

$ npm run serve

5.测试

在浏览器中输入： http://localhost:8080/   即可访问vue主页

二、Ant组件的使用

在ant官网中随意找个组件，将代码复制到新建的vue文件中，我这里只是测试下官网中的组件如何使用而已。

举个例子：比如我想使用ant官网中的table组件；官网地址：Ant Design Vue

1.安装ant

在vscode中打开刚新建好的ant项目，并在终端中执行：

$ npm i --save ant-design-vue

5.导入ant

在 src/main.js 中：

// 导入ant
import Antd from 'ant-design-vue';
// 导入ant样式
import 'ant-design-vue/dist/antd.css';
// 使用ant
Vue.use(Antd);

3.新建vue文件

在src/components目录下新建AntTable.vue文件，代码直接复制官网上的即可

4.使用组件

三部曲：导入组件 ---> 注册组件 ---> 使用组件

在src/App.vue文件中：

<template>
  <div id="app">

    <!-- 3.使用组件 -->
    <AntTable/>

  </div>
</template>


<script>

// 1.导入组件
import AntTable from './components/AntTable'

export default {
  name: 'App',
  components: {
    // 2.注册组件
    AntTable

  }
}
</script>

5.启动项目

$ npm run serve

6.测试

 在浏览器中输入： http://localhost:8080/ 

      最近公司来了一个项目， 看上面是使用的antD框架， 于是就去antD官网浏览了一番。但是发现这个是一个基于react的一个UI框架。 

      但是我看项目中，用的确实是vue+ antD实现的， 后来在猛然之间才发现，这个框架是有vue的示例的

点击这个即可，就可以查看使用vue结合antD进行开发了。

 希望这个可以帮助到不了解antD使用的小伙伴们！