[JavaScript知识库]记录ant design Vue的按需引入配置过程

按照官方文档给的说明，没有成功按需引入组件，查了一些资料后，总结为以下过程：

1. 需要安装less-loader，命令为：npm install less --save-dev (版本可能是4.1.1)
2. 安装babel-plugin-import插件，命令为：npm i babel-plugin-import
3. 在项目根目录，新建文件vue.config.js文件，文件内容为：

module.exports = {
    css: {
      loaderOptions: {
        css: {
          // 这里的选项会传递给 css-loader
        },
        postcss: {
          // 这里的选项会传递给 postcss-loader
        },
        less:{
           // 这里的选项会传递给 less-loader
            javascriptEnabled: true,
        }
      }
    }
  }

新建postcss.config.js文件，文件内容为：

module.exports = { 
    plugins: { 
      'autoprefixer': {browsers: 'last 5 version'} 
    } 
  }

4. 修改babel.configs.js文件

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

5. 修改src/main.js，直接使用以下代码引入：

import { Button } from 'ant-design-vue';

如果要全局引入，代码如下：

import Antd from 'ant-design-vue/es';
import 'ant-design-vue/dist/antd.css';

Vue.use(Antd);