命令行安装:

npm install ant-design-vue --save     #pc端
npm i antd-mobile-vue -S              #手机端

在main.js中

1.全部引入

#pc端
import ant from 'ant-design-vue'
import 'ant-design-vue/dist/antd.less'

Vue.use(ant)

#手机端
import AntdMobile from 'antd-mobile-vue'
Vue.use(AntdMobile)

2.按需引入

import {Button} from 'ant-design-vue'
import 'ant-design-vue/dist/antd.less'

Vue.use(Button)

直接在项目中可以使用

在antd官网复制即可https://www.antdv.com/components/button/

<a-button type="primary">Primary</a-button>

碰见的问题

发生的问题：Inline JavaScript is not enabled. Is it set in your options?
后来发现是less版本太高3.0.+，后更改为2.7.2，再npm install 就OK了。

这里需要用的是vue-fullpage插件

安装

npm install vue-fullpage --save
npm install animate.css --save

配置

在main.js需要引入该插件的css和js文件

import 'vue-fullpage/vue-fullpage.css'
import VueFullpage from 'vue-fullpage'
Vue.use(VueFullpage)

页面代码

在page-wp容器上加v-fullpage指令,v-fullpage的值是fullpage的配置 在page容器上加v-animate指令,v-animate的值是animate.css的动画效果

<template>
  <div id="app">
    <div class="fullpage-container">
      <div class="fullpage-wp" v-fullpage="opts">
        <div class="page-1 page">
          <p class="part-1" v-animate="{value: 'bounceInLeft'}">vue-fullpage</p>
        </div>
        <div class="page-2 page">
          <p class="part-2" v-animate="{value: 'bounceInRight'}">vue-fullpage</p>
        </div>
        <div class="page-3 page">
          <p class="part-3" v-animate="{value: 'bounceInLeft', delay: 0}">vue-fullpage</p>
          <p class="part-3" v-animate="{value: 'bounceInRight', delay: 600}">vue-fullpage</p>
          <p class="part-3" v-animate="{value: 'zoomInDown', delay: 1200}">vue-fullpage</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
  data () {
    return {
      opts: {
        start: 0,
        dir: 'v',
        loop: false,
        duration: 500,
        stopPageScroll: true,
        beforeChange: function (prev, next) {
          console.log(prev,next)
        },
        afterChange: function (prev, next) {
          console.log(prev,next)
        }
      }
    }
  }
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
}
#app{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  color:red;
}
.page-1{
  background: rgba(0,0,0,0.8);
}
.page-2{
  background: pink;
}
.page-3{
  background: blueviolet;
}
.page-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
</style>

驻场的最后一天，小伙伴列的合并碰到了问题，帮忙解决一下。

效果如图：

具体代码：

<el-table
        :data="tableData"
        :span-method="arraySpanMethod"
        border
        style="width: 100%; margin-top: 20px">
        <el-table-column
          prop="id"
          label="ID"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名">
        </el-table-column>
        <el-table-column
          prop="amount1"
          label="数值 1（元）">
        </el-table-column>
        <el-table-column
          prop="amount2"
          label="数值 2（元）">
        </el-table-column>
        <el-table-column
          prop="amount3"
          label="数值 3（元）">
        </el-table-column>
      </el-table>

js部分

export default {
    data(){
        return {
          // 模拟后台返回数据
          tableData: [{
              id: '12987122',
              name: '王小虎',
              amount1: '234',
              amount2: '3.2',
              amount3: 10
            }, {
              id: '12987123',
              name: '王小虎',
              amount1: '165',
              amount2: '4.43',
              amount3: 12
            }, {
              id: '12987124',
              name: '王小虎',
              amount1: '324',
              amount2: '1.9',
              amount3: 9
            }, {
              id: '12987125',
              name: '王小虎',
              amount1: '621',
              amount2: '2.2',
              amount3: 17
            }, {
              id: '12987126',
              name: '王小虎',
              amount1: '539',
              amount2: '4.1',
              amount3: 15
            }, {
              id: '12987126',
              name: '王小虎3',
              amount1: '539',
              amount2: '4.1',
              amount3: 15
            }, {
              id: '12987126',
              name: '王小虎2',
              amount1: '539',
              amount2: '4.1',
              amount3: 15
            }, {
              id: '12987126',
              name: '王小虎2',
              amount1: '539',
              amount2: '4.1',
              amount3: 15
            }],
        needMergeArr: ['name', 'id'], // 有合并项的列
         rowMergeArrs: {}, // 包含需要一个或多个合并项信息的对象
        };
    },
    methods:{
            /**
             * @description 实现合并行或列
             * @param row:Object 需要合并的列name 如:'name' 'id'
             * @param column:Object 当前行的行数，由合并函数传入
             * @param rowIndex:Number 当前列的数据，由合并函数传入
             * @param columnIndex:Number 当前列的数据，由合并函数传入
             *
             * @return 函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象
             * 参考地址：https://element.eleme.cn/#/zh-CN/component/table#table-biao-ge
            */
            arraySpanMethod({ row, column, rowIndex, columnIndex }) {
                // 没办法循环判断具体是那一列 所以就只好写了多个if
                if (column.property === 'name') return this.mergeAction('name', rowIndex, column);
                if (column.property === 'id') return this.mergeAction('id', rowIndex, column);
            },
            /**
             * @description 根据数组来确定单元格是否需要合并
             * @param val:String 需要合并的列name 如:'name' 'id'
             * @param rowIndex:Number 当前行的行数，由合并函数传入
             * @param colData:Object 当前列的数据，由合并函数传入
             *
             * @return 返回值为一个数组表示该单元格是否需要合并; 说明: [0,0]表示改行被合并了 [n+,1]n为1时表示该单元格不动,n大于1时表示合并了N-1个单元格
            */
            mergeAction(val, rowIndex, colData) {
                let _row = this.rowMergeArrs[val].rowArr[rowIndex];
                let _col = _row > 0 ? 1 : 0;
                return [_row, _col];
            },
            /**
             * @description 根据数组将指定对象转化为相应的数组
             * @param arr:Array[String] 必填 必须是字符串形式的数组
             * @param data:Array 必填 需要转化的对象
             *
             * @return 返回一个对象
             * 例：rowMerge(['name','value'], [{value:'1', name:'小明'}, {value:'2', name:'小明'}, {value:'3', name:'小明'}, {value:'1', name:'小明'}, {value:'1', name:'小明'}])
             * 返回值: {
             *          name:{
             *            rowArr: [5, 0, 0, 0, 0]
             *            rowMergeNum: 0,
             *          },
             *          value: {
             *            rowArr: [1, 1, 1, 2, 0],
             *            rowMergeNum: 3
             *          }
             *        }
            */
            rowMergeHandle(arr, data) {
              if (!Array.isArray(arr) && !arr.length) return false;
              if (!Array.isArray(data) && !data.length) return false;
              let needMerge = {};
              arr.forEach(i => {
                needMerge[i] = {
                  rowArr: [],
                  rowMergeNum: 0
                };
                data.forEach((item, index) => {
                  if (index === 0) {
                    needMerge[i].rowArr.push(1);
                    needMerge[i].rowMergeNum = 0;
                  } else {
                    if (item[i] === data[index - 1][i]) {
                      needMerge[i].rowArr[needMerge[i].rowMergeNum] += 1;
                      needMerge[i].rowArr.push(0);
                    } else {
                      needMerge[i].rowArr.push(1);
                      needMerge[i].rowMergeNum = index;
                    }
                  }
                });
              });
              return needMerge;
            }
          }
    },
    mounted(){
        this.rowMergeArrs = this.rowMergeHandle(this.needMergeArr, this.tableData); // 处理数据
    }
}