vue-cli4/antd 配置按需加载

之前没有做笔记的习惯，经历了年底的一波裁员，来到新公司好多东西都是从新接触，好记性不如烂笔头还是做个笔记吧。

新公司需要搭建一个项目，用vuecli搭建因为是4.1版本的项目结构和vuecli2x版本的有些不一样了，所以在使用antd配置按需加载的时候遇见了问题。

CLI的搭建步骤就不说了直接官网或者百度都是一大堆直接复制就行。

项目目录：

vue-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:

main.js不需要再全局引入antd

需要的组件中直接引入：

<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>

效果图：