antd使用记录 - LitStronger's notes

本文最后更新于：2020年12月1日下午

记录使用ant-design-vue开发的流程，以及遇到的错误。

错误合集

官网没给vue-cli4的例子，于是试试按照官网vue-cli3的步骤操作，遇到了一些问题，这里记录下，后文给了完整过程，我亲自重新跑过一遍，应该是没有问题的。

坑1.
Failed to resolve loader: less-loader You may need to install it.
坑2.
error in ../node_modules/[email protected]@ant-design-vue/es/button/style/index.less Module build failed (from ./node_modules/less-loader/dist/cjs.js): // https://github.com/ant-design/ant-motion/issues/44 .bezierEasingMixin();

使用(按需引入)

1.创建项目

安装vue-cli(我现在装的是4.3)

1	`$ npm install -g @vue/cli`

创建项目, 配置可自选，这里我直接回车默认

1	`$ vue create antd-demo`

运行，访问 http://localhost:8080/ ，可以看到 Welcome to Your Vue.js App

1 2	`$ cd antd-demo $ npm run serve`

2.引入 ant-design-vue

1	`$ npm install ant-design-vue`

在main.js中引入Button组件

import Vue from 'vue'
import { Button } from 'ant-design-vue'; //引入组件，但不用引入样式
import App from './App.vue'

Vue.component(Button.name, Button); //注册
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

在app.vue里调用Button组件

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
      <a-button type="primary">Button</a-button>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

3.按需引入

安装babel-plugin-import插件

1	`$ npm install babel-plugin-import --dev`

将配置文件babel.config.js的内容替换为如下

module.exports = {
  presets: ["@vue/app"],
  plugins: [
    [
      "import",
      { libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
    ]
  ]
};

运行

1	`$ npm run serve`

报错如下，需要安装less-loader

在这里插入图片描述

运行

1	`$ npm install less-loader --save-dev`

然后，它继续报错。还要安装less

运行

1	`$ npm install less --save-dev`

看样子是less包本身有问题了，它提示给了个Github的issues地址，访问看看

哇噻，好多大佬遇到了这个问题，翻下去发现各路神仙给了好多解决办法。看了十几个高赞的，大体都是两种办法来解决。

方法一：less降级

但有一些工具是要求用less3.x的(印象中新版webpack就是这样)。算了

方法二：less-loader配置里开启允许javascript

这个方法看起来好点，我用的vue-cli4，需要手动在根目录下创建配置文件vue.config.js，在issues评论里找到对应vue-cli4的配置填入。

module.exports = {
  css: {
      loaderOptions: {
          less: {
            lessOptions:{
              javascriptEnabled: true,
            }
          }
      }
  },
}

ps: 如果没能成功的话，可以试试更多其他版本的配置，详情见https://github.com/ant-design/ant-motion/issues/44，本文评论区也有网友给出了其他可用的配置格式

重新运行，Nice~，按需引入完成。