1，首先安装ant-design-vue：yarn add ant-design-vue

2，在main.js中引入：

import Antd from 'ant-design-vue'

import 'ant-design-vue/dist/antd.css'

Vue.use(Antd)

3，App.vue页面

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
     <transition> 
         <router-view/>
     </transition>
  </div>
</template>

<style lang="scss">
.v-enter{ // v-enter：定义进入过渡的开始状态。元素被插入之前生效，在元素被插入之后的下一帧移除 
  transition: all .5s ease;
  transform: translateX(100%);
}
.v-leave-to{ // v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态
  transition: all .5s ease;
  opacity: 0;
  transform: translateX(-100%);
  position:absolute;
}
.v-leave-active,.v-enter-active{ // v-enter-active：定义进入过渡生效时的状态
                                // v-leave-active：定义离开过渡生效时的状态
   transition: all .5s ease;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  overflow-x: hidden;margin:0;
}
#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

HelloWord.vue: 

<template>
  <div>
    <template>
      <!-- 
        columns	: 表格列的配置描述
        bordered: 是否展示外边框和列边框  boolean
        loading: 页面是否加载中	 boolean
        indentSize: 展示树形数据时，每层缩进的宽度，以 px 为单位  number
      -->
      <a-table
        :columns="columns"
        :loading="loading"
        bordered
        :dataSource="datas"
        indentSize="10"
        :rowSelection="{onChange:onChange,onSelect:onSelect,onSelectAll:onSelectAll}"
      >
        <span slot="action" slot-scope="text, record">
          <a @click="getThirdPublishChannelOne(record)">编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
            <a>删除</a>
          </a-popconfirm>
        </span>
      </a-table>
    </template>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      columns: [
        {
          title: "一家之主名字，展开后的是成员名字",
          dataIndex: "name",
          key: "name",
          width: "20%"
        },
        {
          title: "其他资料",
          children: [
            {
              title: "年龄",
              dataIndex: "age",
              key: "age"
              // sorter: (a, b) => a.age - b.age // 添加此属性可以对年龄进行排序
            },
            {
              title: "出生地址",
              children: [
                {
                  title: "街道",
                  dataIndex: "street",
                  key: "street"
                },
                {
                  title: "社区",
                  children: [
                    {
                      title: "单元",
                      dataIndex: "building",
                      key: "building"
                    },
                    {
                      title: "楼层",
                      dataIndex: "number",
                      key: "number"
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          title: "目前地址",
          dataIndex: "companyAddress",
          key: "companyAddress"
        },
        {
          title: "操作",
          dataIndex: "action",
          align: "center",
          scopedSlots: { customRender: "action" }
        }
      ],
      datas: []
    };
  },
  created() {
    for (let i = 0; i < 3; i++) {
      this.datas.push({
        key: i,
        name: "李三" + i + "号",
        age: i + 25,
        street: "北京老胡同",
        building: "C",
        number: 2035,
        companyAddress: "四海集团街道",
        companyName: "乾清宫",
        gender: "男",
        children: [
          {
            key: i + 100,
            name: "李三" + i + "号的儿子" + i,
            age: i + 1,
            street: "北京老胡同" + i + "街道",
            building: "C",
            number: i * 2,
            companyAddress: "娃哈哈乳业",
            companyName: "御膳房餐厅",
            gender: "女"
          }
        ]
      });
    }
  },
  methods: {
    getThirdPublishChannelOne(e){},
    handleDelete(e){},
  // 选择的数据改变时触发
    onChange(selectedRowKeys, selectedRows) {
      console.log(
        `selectedRowKeys: ${selectedRowKeys}`,
        "selectedRows: ",
        selectedRows
      );
    },
    // 点击每一条数据前面的选择框时触发
    onSelect(record, selected, selectedRows) {
      console.log(
        "record, selected, selectedRows",
        record,
        selected,
        selectedRows
      );
    },
     // 点击表头前面的选择框时触发
    onSelectAll(selected, selectedRows, changeRows) {
      console.log(
        "selected, selectedRows, changeRows",
        selected,
        selectedRows,
        changeRows
      );
    }
  }
};
</script>
<style lang='scss' scoped>
</style>

router.js：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About', 
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router