前言

Ant Design是目前比较流行的一个UI框架，也有vue版本，今天就来看看如何在vue项目中使用它。

依赖

通过下面命令来安装依赖

pnpm install ant-design-vue

如果要使用其中的图标功能，还需要额外安装一个依赖，如下：

pnpm install @ant-design/icons-vue

按需加载

我们可以在App.vue中完整引入，但是更好的方式是按需加载，要想实现按需加载可以使用vite-plugin-components，通过下面命令安装依赖：

pnpm install unplugin-vue-components -D

然后需要在vite.config.js中配置，如下：

...
import Components from "unplugin-vue-components/vite";
import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";

export default defineConfig({
  resolve: {
    ...
  },
  plugins: [
    Components({
      resolvers: [
        AntDesignVueResolver({
          importStyle: "less"
        })
      ],
      // 解决组件命名冲突问题
      directoryAsNamespace: true
    }),
    vue(),
    ...
  ],
  ...
});

这样就可以在vue文件中直接通过import { XXX } from 'ant-design-vue';来使用组件了。

如果没有配置Components，直接使用组件就会发现没有任何样式。

启动javascript

完成上面步骤启动服务后发现报错

[plugin:vite:css] [less] Inline JavaScript is not enabled. Is it set in your options?

还需要在vite.config.js中配置一下，如下：

...
import Components from "unplugin-vue-components/vite";
import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";

export default defineConfig({
  resolve: {
    ...
  },
  plugins: [
    Components({
      resolvers: [
        AntDesignVueResolver({
          importStyle: "less"
        })
      ],
      // 解决组件命名冲突问题
      directoryAsNamespace: true
    }),
    vue(),
    ...
  ],
  ...
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        modifyVars: {
          "@primary-color": "#0083FF"
        }
      }
    }
  }
});

这样就为less开启了javascript，就可以正常显示了。

样式失效

使用时会发现部分样式失效，比如message，无法悬浮导致显示不正常，这是因为按需加载组件的bug导致的，解决方法就是在一开始手动引入一下，在main.js中如下：

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

//自动按需加载组件BUG，需单独引用下
import "ant-design-vue/lib/message/style/index.less";
import "ant-design-vue/lib/modal/style/index.less";
import "ant-design-vue/lib/notification/style/index.less";

import "./style.css";

createApp(App).use(store).use(router).mount("#app");

这里将我们常用的message、modal和notification的样式手动引入进来，如果需要其他的也需要手动引入一下才行。

问题总结

在使用过程中或多或少会遇到各种各样的问题，这里总结一些我遇到的问题和走过的坑，看看能不能帮助大家。

树形table展开一行所有行都展开了

AntDesign的表格—————table是支持树结构的，如果某一条数据中含有children字段，就会自动将其当成子条目集合，当然也支持我们自定义处理子条目。

当一条数据有子数据的时候，会在前面显示一个“+”号，点击"+"号就自动展开。但是使用时你可能发现当多行都有子结构的时候，点击展开其中一行发现所有带字结构的行都展开了。

这是因为缺少key，仔细观察官方案例可以发现在表格的数据中每一条都有一个"key"字段，这就是用来做区分的，但是官方并没有强调这一点，而且我们的数据如果是服务端返回不做处理的话很难有这个字段。

这时候可以通过table的rowKey来处理，如下：

<a-table
  class="table"
  :dataSource="curList"
  :columns="columns"
  @change="pageChange"
  :rowKey="record => record.goodsId"
>
  ...
</a-table>  

rowkey可以是字符串，也可以是一个函数，这里我们使用函数。record就是一条数据对象，这样我们就可以在现有数据中选一个字段来作为行的唯一key。

再展开行的时候就可以看到只有当前行展开了。