使用Vue-cli4.3 新建Ant Design Vue项目

前言

最近很久没在博客园发博客了，最近每天上班，休息时候就是玩下最近学的一些运维知识，总算对docker有点熟悉了。
因为公司项目前端压力较大，最近也是要求后端帮忙分担下前端的压力。

目前前端技术选型是Vue，上次玩Vue都是3年以前了，基本上忘记的差不多了。
趁着下班时间在Ant Design Vue官网 https://www.antdv.com/docs/vue/use-with-vue-cli-cn/
按照教程搭建了一个vue项目，采取按需加载方式对模块进行独立加载。
下面是各项组件版本

vue-cli版本为 ： @vue/cli 4.3.1

项目组件版本如下：

| 组件名称 | 版本 |
| ---- | ---- | ---- |
| ant-design-vue | ^1.5.6 |
| babel-plugin-import| ^1.13.0|
| core-js|^3.6.4|
| vue |^2.6.11 |

实在是跟着官网一步一步走的，实际运行起来还能报错~ 也是醉了~~ 这里写一篇博客记录下，方便后续自己再要使用时有个参考。

错误如下

ERROR Failed to compile with 2 errors Failed to resolve loader: less-loader You may need to install it. Failed to resolve loader: less-loader You may need to install it.

解决方式有两种

1、更新项目根目录下的babel.config.js内容，将 style: true更改为 style: "css"

更改前:

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

更改后：

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

2、配置vue.config.js (通过Vue-cli脚手架创建的项目默认没有带该配置文件，自己在项目根目录下创建此文件)

写入以下内容

module.exports = {
    css: {
        loaderOptions: {
            less: {
                lessOptions: { 
                    // important extra layer for less-loader^6.0.0
                    javascriptEnabled: true
                }
            }
        }
    }
}

再执行如下命令:

npm i less-loader

ok~搞定