antdesign——按需引入

全局引入：js体积很大

npm i ant-design-vue
// 全局引入antdesign
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.less";
Vue.use(Antd);

按需引入：性能优化

npm i babel-plugin-import

// babel.config.js
module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
    [
      "import",
      { libraryName: "ant-design-vue", libraryDirectory: "es", style: "css" },
    ], // `style: true` 会加载 less 文件
  ],
};

// 按需引入
import { button, Icon, Message } from "ant-design-vue";
Vue.use(button).use(Icon);
Vue.prototype.$message = Message;