之前没有做笔记的习惯，经历了年底的一波裁员，来到新公司好多东西都是从新接触，好记性不如烂笔头还是做个笔记吧。
新公司需要搭建一个项目，用vuecli搭建因为是4.1版本的项目结构和vuecli2x版本的有些不一样了，所以在使用antd配置按需加载的时候遇见了问题。
CLI的搭建步骤就不说了直接官网或者百度都是一大堆直接复制就行。
项目目录：
这是4版本以上的CLI比2x版本的精简了好多只剩精华了，可以看见在根目录上少了.babelrc文件。
所以要配置antd在vue中的按需加载需要步骤：
npm install ant-design-vue --save
接着下载按需加载的包：
npm install --save babel-plugin-import
然后在babel.config.js文件立配置：
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
plugins: [
[
"import",
{ libraryName: "ant-design-vue", libraryDirectory: "es", "style":'css' }
]
]
};
然后运行看下控制台报错不报错，要是报类似缺少.less文件的错误就还需要npm下载less和less-loader插件，antd需要。
配置好之后就万事大吉了，不需要在mian.js在全局引入antd了，直接在需要的组件里引入就行。
main.js:
需要的组件中直接引入：
<template>
<div class="about">
<h1>This is an about page</h1>
<a-button type="primary">Primary</a-button>
</div>
</template>
<script>
import { Button
} from 'ant-design-vue';
export default {
components: { AButton: Button },
}
</script>
效果图：
