【Ant-Design-Vue】笔记

版本为vue-cli 2

组件按需引入

使用 babel-plugin-import 来进行按需加载

npm install babel-plugin-import --save-dev

新建并配置bable.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'import',
      {
        libraryName: 'ant-design-vue',
        libraryDirectory: 'es',
        style: true
      }
    ]
  ]
}

在main.js中引入
组件列表参照官网：

https://github.com/vueComponent/ant-design-vue/blob/master/components/index.js

//main.js
import { Button,Col,Row,DatePicker,Dropdown,Menu} from 'ant-design-vue';

Vue.component(Button.name, Button);
Vue.component(Col.name, Col);
Vue.component(Row.name, Row);

Vue.use(DatePicker) //两种方式都行
Vue.use(Dropdown)
Vue.use(Menu)

Vue.config.productionTip = false

最后重启 npm run serve 访问页面

按需引入报错

安装less less-loader依赖

npm install less less-loader -D

less-loader版本过高

错误提醒

ERROR  Failed to compile with 1 error                                                                                                           下午10:48:31

 error  in ./node_modules/ant-design-vue/es/button/style/index.less

Syntax Error: 

// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^

对less-loader进行降级处理：

npm install less-loader@5.0.0 -D

在vue.config.js中进行配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
		resolve: {
			alias: {
				// 在cli2中看到已经为src配置别名为@，在cli3中这样配置就没问题
				"assets": "@/assets",
				"components": "@/components",
				"network": "@/network",
				"views": "@/views",
			}
		}
	},

  css: {

    loaderOptions: {
      less: {
        javascriptEnabled: true
      }
    }
   }
})

运行报错

错误提醒

 ERROR  Failed to compile with 1 error                                                                                                           下午10:45:00

 error  in ./node_modules/ant-design-vue/es/dropdown/style/index.less

Syntax Error:

    .@{ant-prefix}-btn > .@{iconfont-css-prefix}-down {
      .iconfont-size-under-12px(10px);
    ^
Error evaluating function `unit`: the first argument to unit must be a number. Have you forgotten parenthesis?

解决方法：
把babel.config.js文件的style:true 改为 style: ‘css’

module.exports = {
	presets: [
		'@vue/cli-plugin-babel/preset'
	],
	plugins: [
		[
			"import",
			{
				libraryName: "ant-design-vue",
				libraryDirectory: "es",
				style: 'css'
			} 
		] 
	]
}

DatePicker获取时间并格式化

DatePicker输出的时间格式为moment
可通过moment获取

安装（npm）

npm install moment --save   # npm

引入moment

import moment from 'moment';

使用moment

var time=value[0]._d;
console.log(moment(time).format('YYYY-MM')) 

例子

<template>
<div align="center" class="date" >
    <a-row type="flex" justify="center" align="middle" style="height:100%">
    <a-col>
    
    <a-range-picker
      :placeholder="['Start month', 'End month']"
      format="YYYY-MM"
      :value="value"
      :mode="mode2"
      @panelChange="handlePanelChange"
      @change="handleChange"
      style="height:60%"
      :size="large"
    />
    </a-col>
    </a-row>
</div>
   
</template>
<script>
import moment from 'moment';
import { time } from 'echarts';
export default {
  data() {
    return {
      mode1: 'time',
      mode2: ['month', 'month'],
      value: [],
    };
  },
  methods: {
    handleChange(value) {
      this.value = value;
      console.log(this.value)
    },
   
    handlePanelChange(value, mode) {
      this.value = value;
      this.mode2 = [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]];
      var time=value[0]._d;
      console.log(moment(time).format('YYYY-MM')) 
    },
  },
};
</script>