按需引入ant-design-vue组件

石云升

已于 2023-02-26 18:12:20 修改

阅读量2.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：研发文章标签： javascript vue.js 前端

于 2023-02-26 18:10:31 首次发布

本文链接：https://blog.youkuaiyun.com/sys025/article/details/129229492

研发专栏收录该内容

16 篇文章

订阅专栏

文章介绍了如何创建一个Vue项目，选择Babel和ESLint，然后安装并配置ant-design-vue，特别是通过修改vue.config.js支持Less，并在babel.config.js中配置按需引入ant-design-vue组件以优化包大小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、首先创建一个新的Vue项目

vue create xxx

选择default含有babel和eslint。或者自定义Manually select features。

babel是一个转码器，主要用于ES2015+ 代码转换为 JavaScript 向后兼容版本的代码

eslint是一个代码检测工具。用来规范编码规范用。

自定义可选的插件有，Babel，TypeScript，Progressive Web App (PWA) Support，Vuex，CSS Pre-precessors，Linter / Formatter ，Unit Testing 单元测试，E2E Testing 端到端测试

大家按需选择即可。

二、安装ant-design-vue

npm i ant-design-vue

三、配置vue.config.js以支持less

//自己创建vue.config.js文件。注意配置字段的大小写不要错

//自己创建vue.config.js文件。注意配置字段的大小写不要错
module.exports = {
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
};

四、到ant-design-vue官网找到按需通过bable按需引入代码。

https://www.antdv.com/docs/vue/introduce-cn/

，不喜欢找的，直接复制我的配置。

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

按需引入是为了减少加载插件包的大小。

安装好之后，还需要安装babel-plugin-import

 //npm i --save-dev babel-plugin-import
 //安装后在代码里要按需时候，如下使用Button就只导入Button
 import { Button } from "ant-design-vue";
 Vue.use(Button);

总结，我们在项目中使用到第三方包的时候，都需要注意引入包的大小。按需引入是一个比较好的解决方案。