记一次使用ant-design-vue+vue-cli 3.0经历

开始

开始前的准备：

node，用最新的版本

yarn，也可使用 npm

准备安装 vue 官方全家桶@vue/cli
npm install -g @vue/cli
or
yarn global add @vue/cli
用官方脚手架创建项目
vue create antd-demo

在第一次执行该命令时会询问是否使用淘宝镜像安装，根据需求选择就行

会出现两个配置提供选择

? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
  Manually select features

本次需要使用 ant-design-vue构建项目，建议↓ 选择第二个点击回车进入自定义配置

? Check the features needed for your project:
> (*) Babel
  ( ) TypeScript
  ( ) Progressive Web App (PWA) Support
  ( ) Router
  ( ) Vuex
  (*) CSS Pre-processors (必选，可节省很多安装配置)
  (*) Linter / Formatter (ESLinter)
  ( ) Unit Testing
  ( ) E2E Testing

在对应项按下空格可选择该项配置，键盘a键表示全选
其它项可根据需求配置，这里就不多提了
进入下一步 =>

? Pick a Css pre-processor (PostCss, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
  Sass/SCSS (dart-sass)
  Sass/SCSS (node-sass)
> Less (推荐,ant-design-vue 是用 Less 开发的,选择该项能省很多事)
  Styles

再单独提一下

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?(Use arrow keys)
> In dedicated config files(配置文件独立放置)
  In package.json

安装完成之后如果需要再配置,需要在根目录新建一个 vue.config.js 文件,具体配置属性可查看官方文档 Vue-cli 配置

开始安装 ant-design-vue
yarn add ant-design-vue
or
npm install ant-design-vue
根据 ant 官方文件说明,在 @vue/cli 中使用时的配置

按需加载，需要使用 `babel-plugin-import

yarn add babel-plugin-import --dev
or
npm install babel-plugin-import --save-dev

具体使用方式可查看官方文档，ant in @vue/cli

配置完毕，可以开始开发了 yarn serve or npm run serve

可能会出现的错误 ↓

Less 相关错误

方案一

配置 vue.config.js

// 在根目录找到 vue.config.js 文件(没有就新建一个)
module.exports = {
    // 配置less
    css: {
        loaderOptions: {
            less: {
                javascriptEnabled: true,
            }
        }
    },
}

修改 babel.config.js

plugins: [
    [
      "import",
     { libraryName: "ant-design-vue", libraryDirectory: "es", style: 'css' }
    ]
]

方案二

// package.json
// antd@3.x
// less@2.x
// less-loader@3.x
{
    "less": "^2.7.0" // 低于 3.0 版本就行
}