vite2 实现按需加载ant-design-vue@next组件

作者：admin，发布日期：2021-06-02
阅读：2515；评论：0

需要用到vite-plugin-style-import这个插件

插件文档：https://github.com/anncwb/vite-plugin-style-import/blob/HEAD/README.zh_CN.md

创建项目

首先参考之前的文档创建一个vite项目

https://blog.craftyun.cn/post/226.html

然后开始安装ant-design-vue@next，也就是支持vue3的antd

yarn add ant-design-vue@next

至此，项目创建完成

配置按需加载

首先安装vite-plugin-style-import插件，用于支持按需加载。

yarn add vite-plugin-style-import -D
yarn add less -D

然后修改根目录下的vite.config.js，添加插件配置。

添加的内容

    styleImport({
      libs: [
        {
          libraryName: "ant-design-vue",
          esModule: true,
          resolveStyle: (name) => {
            return `ant-design-vue/es/${name}/style/index`;
          },
        },
      ],
    }),

  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },

最终的文件

import { defineConfig } from "vite";
import styleImport from "vite-plugin-style-import";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: "ant-design-vue",
          esModule: true,
          resolveStyle: (name) => {
            return `ant-design-vue/es/${name}/style/index`;
          },
        },
      ],
    }),
  ],
});

配置完成后，创建一个工具类，导入antd需要的组件

在./src/plugins/antd.js中添加以下内容

import { Button, Divider, Input } from "ant-design-vue";

export default {
  install: (app, options) => {
    app.use(Input);
    app.use(Divider);
    app.use(Button);
  },
};

在这个文件里，我们定义了一个vue的插件，然后就可以在main.js里面调用app.use来使用antd.js

修改createApp()为以下内容

createApp(App).use(antd).mount("#app");

修改后的文件：

import { createApp } from "vue";
import App from "./App.vue";
import antd from "./plugins/antd.js";

createApp(App).use(antd).mount("#app");

配置完后测试

修改App.vue，修改为以下内容：

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <a-button @click="testClick">测试</a-button>
  <a-divider />
  用户名：
  <a-input style="width: 200px" v-model="username" />
  <p>{{ username }}</p>
</template>

<script>
import { defineComponent, ref } from "@vue/runtime-core";

export default defineComponent({
  setup() {
    const username = ref("");

    const testClick = () => {
      console.log("test message");
    };

    return {
      username,
      testClick,
    };
  },
});
</script>

<style></style>

最终效果