一、首先创建一个新的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文章来源：https://www.toymoban.com/news/detail-635233.html
//npm i --save-dev babel-plugin-import
//安装后在代码里要按需时候，如下使用Button就只导入Button
import { Button } from "ant-design-vue";
Vue.use(Button);
总结，我们在项目中使用到第三方包的时候，都需要注意引入包的大小。按需引入是一个比较好的解决方案。文章来源地址https://www.toymoban.com/news/detail-635233.html
到了这里，关于按需引入ant-design-vue组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
