全部标签 



写点什么

登录注册

按需引入 ant-design-vue 组件

作者：石云升

2021 年 11 月 25 日
本文字数：718 字
阅读完需：约 2 分钟

按需引入ant-design-vue组件

一、首先创建一个新的 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);

复制代码

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

发布于: 2021 年 11 月 25 日阅读数: 10

版权声明: 本文为 InfoQ 作者【石云升】的原创文章。

原文链接:【http://xie.infoq.cn/article/baed321e386a40768b2d84f83】。

本文遵守【CC-BY 4.0】协议，转载请保留原文出处及本版权声明。

石云升

关注

做时间的朋友，用文字记录成长。 2017.11.30 加入

InfoQ首批签约作者、年度最佳内容作者、年度功勋人物。微信公众号：石云升SYS 职场、成长、学习等相关问题，欢迎你和我交流。 PS：很多文章的内容来源于我在得到、混沌、极客时间的学习笔记。欢迎你和我一起学习。

评论

发布

暂无评论