Vue-Cli 按需引入Ant Design of Vue 组件库

最新推荐文章于 2024-08-10 22:22:29 发布
最新推荐文章于 2024-08-10 22:22:29 发布
阅读量2.8k 收藏 4
点赞数 1
分类专栏： Antd 前端之旅 Vue 文章标签： Vue-Cli AntDesign Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_Mocha/article/details/104024270
版权
本文详细介绍了如何在Vue-Cli项目中按需引入Ant Design of Vue组件库，包括安装Ant Design of Vue，配置babel-plugin-import，修改babel.config.js，以及在src/main.js中引入组件。同时，针对可能遇到的问题提供了解决方案。
摘要由CSDN通过智能技术生成

一）、安装Ant Design of Vue

cnpm install ant-design-vue --save

二）、安装babel-plugin-import

官方文档 使用 babel-plugin-import

为了方便进行按需引入Ant Design of Vue组件，使用 babel-plugin-import

是一个用于按需加载组件代码和样式的 babel 插件

此插件配合 style 属性可以做到模块样式的按需自动加载

cnpm install babel-plugin-import --save

三）、修改babel.config.js文件，配置 babel-plugin-import

最低0.47元/天 解锁文章
是摩卡不是抹茶呀
关注
专栏目录
vue-cli4.0下antd(ant-design-vue)按需引入(附带完整过程)
weixin_43641850的博客
08-29 1万+
ant-design-vue 踩坑记录 坑1. can not find modules less-loader you need to install less-loader 坑2. error in …/node_modules/_ant-design-vue@1.6.5@ant-design-vue/es/button/style/index.less Module build failed (from ./node_modules/less-loader/dist/cjs.js): // htt
ant-design-vue按需加载的坑的解决
11-20
问题 在vue-cli4.x中按需加载ant-design-vue,在编译时报错，错误如下 原因 ant-design-vue使用less预处理器。在less3.0版本以前，javascriptEnabled属性默认为true,3.0以后默认为false。地址 目前项目中less版本为3.0.4，所以在编译中会报错 解决办法 第一种办法，在vue.config.js中添加如下配置 css: { loaderOptions: { less: { javascriptEnabled: true } } } 第二种办法就是把less的版本降到3.0以下即可 到此这
按需引入Ant-Design-Vue
龙马的猫
10-16 2296
1.安装babel-plugin-import npm i babel-plugin-import 2.创建antd配置文件ant-design/index.js，需要用到什么组件把注释去掉就可以了 import Vue from 'vue' import Antd from 'ant-design-vue' const { // Affix, // BackTop, ConfigProvider, // Layout, Input, // InputNumber,
vue项目的按需加载
最新发布
weixin_45016440的博客
08-10 146
而对于vue模块引用来说，我们没必要在一开始就将所有模块js都引入进来，所以我们要将‘src/router/index.js’中引入模块的代码进行修改。使用 vue-cli构建的项目,在默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体，而这个文件一般会比较大，可能几兆甚至几十兆，结果导致页面加载时间过长，对于用户来说这是一个极不友好的体验，所以有些时候我们就需要用到‘按需加载’。这样就可以将一个大的js文件拆分为一个个小的文件，根据用户触发事件进行按需加载了。
按需引入 Ant-Design-Vue
m0_64378190的博客
04-23 2445
在 vue3 中按需引入 Ant-Design-Vue
按需引入ant-design-vue组件
sys025的专栏
02-26 2700
eslint是一个代码检测工具。用来规范编码规范用。按需引入是为了减少加载插件包的大小。
ant-design-vue按需引入icon以及组件
热门推荐
你华还是你华
05-12 2万+
大家好，我是Counterrr。 不忘初心 ，砥砺前行。共勉。
基于vue-cli3 和 ant-design-vue搭建的后台管理系统模板
02-23
Vue CLI 3是Vue.js官方提供的一个快速脚手架工具，它简化了项目的初始化和配置过程，而Ant Design Vue则是一个基于Vue.js的高质量前端组件库，灵感来源于Ant Design设计体系。 首先，让我们了解Vue CLI 3。Vue CLI ...
管理系统系列--vue-antd-admin基于vue-cli4+vuex+ant-design-vue开发的后台管.zip
02-25
【标题】"管理系统系列--vue-antd-admin基于vue-cli4+vuex+ant-design-vue开发的后台管理框架"揭示了这是一个使用特定技术栈构建的后台管理系统。它主要基于Vue.js，利用Vue CLI 4（Vue.js的命令行工具）进行快速...
ant-design-vue-pro：像Pro一样使用Ant Design Vue！
02-05
@ vue / cli〜3 -Vue的蚂蚁设计 图片编辑 -AntV G2 Viser -Vue的Antv / G2 注意：建议使用软件包管理，此项目的演示站点（yarn.lock）加载的版本完全相同。 但您也可以使用npm 项目设置 克隆回购 git clone ...
vue3项目学习记录＜二＞---Ant Design Vue组件之按需引入
Terenceno的博客
04-11 855
Ant Design Vue组件之按需引入
记录ant design Vue的按需引入配置过程
simple_O
10-15 1024
按照官方文档给的说明，没有成功按需引入组件，查了一些资料后，总结为以下过程： 需要安装less-loader，命令为：npm install less --save-dev (版本可能是4.1.1) 安装babel-plugin-import插件，命令为：npm i babel-plugin-import 在项目根目录，新建文件vue.config.js文件，文件内容为： module.exports = { css: { loaderOptions: { css:
Ant Design vue 之使用Vue Cli 3快速创建项目
仇益阳的博客
06-03 2042
使用Vue CLI 快速创建项目 创建项目利用vue create ant-design-vue-pro 自定义配置（babel，router，vuex，css pre，linter，unit Testing） 把所有的配置文件放在单独文件里 进入项目文件夹内 安装组件库 npm i ant-design-vue moment ...
vue-cli里用antd of vue
tuzi007a的博客
01-19 398
antd of vue安装和配置使用说明 安装和配置 安装：yarn add ant-design-vue 安装按需插件：yarn add babel-plugin-import --dev 配置文件babel.config.js: 注意，不要直接用官网里的配置，不然大概率会报错。 module.exports = { presets: [ // '@vue/cli-plugin-babel/preset', "@vue/app" ], plugin
vue-cli如何按需引入Ant-design-vue
hollebug的博客
07-20 2515
第一步通过vue-cli安装ant-design vue add ant-design 第二步配置按需引入配置 antd官方文档提到的 babel-plugin-import，一个用于按需加载组件代码和样式的 babel 插件，样式自动加载需要先装这个插件 npm install babel-plugin-import --dev 安装完后配置babel.plugin.config文件，复制官方文档配置 module.exports = { "presets": [ "@vue
笔记记录-Antdesign for VUE (全局注册or按需加载）
lemon_宁萌
08-01 959
Antdesign for VUE (全局注册or按需加载）
ant design vue 初体验
liubangbo的专栏
10-28 431
Ant Design Vue 是使用 Vue 实现的遵循 Ant Design 设计规范的高质量 UI 组件库，用于开发和服务于企业级中后台产品。 按官方文档用vuecli 3.0搭建了一个开放环境，引入了ant design vue 。具体流程不说了，参考官方文档https://www.antdv.com/docs/vue/use-with-vue-cli-cn/ 按这个文档在设置按需加载的时候 { libraryName: "ant-design-vue", libraryDirectory: "
ant-design-vue按需引入Progress
05-25
你可以使用 babel-plugin-import 插件来实现按需引入 Ant Design Vue 组件。下面是示例代码： 首先，安装 babel-plugin-import 插件： ``` npm install babel-plugin-import --save-dev ``` 然后在 babel.config....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值