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

最新推荐文章于 2024-04-11 10:40:50 发布
原创 最新推荐文章于 2024-04-11 10:40:50 发布 · 2.9k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Vue-Cli #AntDesign #Vue

本文详细介绍了如何在Vue-Cli项目中按需引入Ant Design of Vue组件库，包括安装Ant Design of Vue，配置babel-plugin-import，修改babel.config.js，以及在src/main.js中引入组件。同时，针对可能遇到的问题提供了解决方案。

一）、安装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

使用 vue-cli 3 的小伙伴

<
最低0.47元/天 解锁文章
笔记记录-Antdesign for VUE (全局注册or按需加载）
lemon_宁萌
08-01 1282
Antdesign for VUE (全局注册or按需加载）
精选资源
基于vue-cli3 和 ant-design-vue搭建的后台管理系统模板
02-23
Vue CLI 3是Vue.js官方提供的一个快速脚手架工具，它简化了项目的初始化和配置过程，而Ant Design Vue则是一个基于Vue.js的高质量前端组件库，灵感来源于Ant Design设计体系。 首先，让我们了解Vue CLI 3。Vue CLI ...
Ant Design Vue按需引入
站在巨人的肩膀上前行
11-29 1414
【代码】Ant Design Vue按需引入。
按需引入Ant-Design-Vue
龙马的猫
10-16 2445
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,
按需引入 Ant-Design-Vue
m0_64378190的博客
04-23 3160
在 vue3 中按需引入 Ant-Design-Vue
按需引入ant-design-vue组件
sys025的专栏
02-26 2994
eslint是一个代码检测工具。用来规范编码规范用。按需引入是为了减少加载插件包的大小。
管理系统系列--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的命令行工具）进行快速...
精选资源
vue-flow-topology:Flow Topology 是基于Vue-cli3.0 + Ant Design Vue + JSPlumb开发的一个大数据流水线拓展流程工作台，该项目可以看做是一个独立的 Vue 项目，也可以嵌入到其他vue项目中使用，新版会作为优先版本持续迭代
05-07
版本二：基于 Vue-cli3.0 + Ant Design Vue + JSPlumb 开发（ simple 分支 ）。 特性 :check_mark_button: 支持画布重绘、拖拽、放大、缩小功能 :check_mark_button: 支持鼠标滚轮缩放画布功能 :check_mark_button: ...
精选资源
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 ...
ant-design-vue按需引入icon以及组件
热门推荐
你华还是你华
05-12 2万+
大家好，我是Counterrr。 不忘初心 ，砥砺前行。共勉。
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以下即可 到此这
vue3项目学习记录＜二＞---Ant Design Vue组件之按需引入
最新发布
Terenceno的博客
04-11 1747
Ant Design Vue组件之按需引入
antdesign——按需引入
xiaoququ的博客
01-04 1941
全局引入：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/prese
记录ant design Vue的按需引入配置过程
simple_O
10-15 1132
按照官方文档给的说明，没有成功按需引入组件，查了一些资料后，总结为以下过程： 需要安装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 2177
使用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 470
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 2607
第一步通过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
ant design vue 初体验
liubangbo的专栏
10-28 502
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: "
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值