在Vue中使用babel-plugin-component插件以实现按需导入Mint UI的组件

最新推荐文章于 2024-06-15 10:25:41 发布
最新推荐文章于 2024-06-15 10:25:41 发布
阅读量9.8k 收藏 1
点赞数 1
分类专栏： 前端 文章标签： vue js mintui webpack html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Piconjo/article/details/105838293
版权
本文介绍了在Vue项目中如何利用babel-plugin-component插件实现Mint UI的按需导入，以减小项目体积。详细步骤包括安装插件、修改Babel配置、在main.js中导入所需组件，以及在页面中正确使用组件。
摘要由CSDN通过智能技术生成

在使用Mint UI开发时 若导入全部Mint UI 则文件会比较大
为进行优化 可按需导入Mint Ui的组件
只导入所需要的组件

效果杠杠滴！

全部引入：
在这里插入图片描述
按需引入：
在这里插入图片描述

可通过babel-plugin-component插件以实现按需导入

首先 安装babel-plugin-component：

npm install babel-plugin-component -D

然后 在Babel的配置文件.babelrc里添加一个组件：

(官网的竟然是错的…多了一对括号 “[ ]” )

["component", {
最低0.47元/天 解锁文章
Piconjo_Official
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中babel-plugin-component按需引入和element-ui 的主题定制，支持发布，上线
发果叁
08-23 1616
目前项目用的vue +element-ui，之前有了解过element-ui真正的按需引入，也有了解到主题定制，之前的项目都是根据element-ui的类及标签，在全局或者局部进行一大堆样式覆盖，达到自己项目ui的样式，项目中按需引入实际也并没有真正实现按需引入。趁此新起的项目。实践一下对element-ui主题和组件方面来优化。通过以上实验分析我们可以得知，element-ui首先通过插件进行按需引入。再用工具生成样变量文件。然后根据项目需求修改自定义样式，依据该文件构建生成所有样式。
浅谈在vue中使用mint-ui swipe遇到的问题
10-17
而按需引入则需要`babel-plugin-component`插件，这可以减少构建时的体积，只引入所需的组件： ``` npm install babel-plugin-component -D ``` 修改`.babelrc`配置文件： ```json { "presets": [["es2015",...
vue+element-ui使用babel-plugin-component按需加载组件及自定义主题对应的scss样式
weixin_34248023的博客
07-09 4850
作者的挖坑之旅 作者本人在工作之余喜欢自己写一些东西玩玩， 虽然不是资深程序员， 不过也还是能够完成前端页面+后端接口+服务端部署的整个流程了。 如果不愿意看分析过程，可以直接拉到最后看结果。 开始入坑 首先前端页面使用了Vue作为前端开发框架，我相信点这个标题进来看文章的都用过这个框架的吧。。。 首先肯定是要引入element这个ui组件库，但...
深入浅出 Babel：现代 JavaScript 的编译器
最新发布
NolanKy 的 技术博客
06-15 1230
Babel 是一个 JavaScript 编译器，主要用于将现代 JavaScript 代码（ES6+）转换为向后兼容的 JavaScript 代码，以便在旧版本的浏览器或环境中运行。Babel 还支持转换 JSX 语法（用于 React）和 TypeScript。// Babel 接收到的输入是： ES2015 箭头函数// Babel 输出： ES5 语法实现的同等功能});为什么需要 Babel？向后兼容性。
babel-plugin-component 按需导入自定义组件
m0_49435789的博客
09-09 9997
需求：需要将项目现有的组件库进行按需导入 思路：选择babel-plugin-component或者babel-plugin-import 找解决方案的过程中，参考了element-ui和vant这两个前端组件库按需导入的方法 element-ui采用babel-plugin-component插件来实现按需导入 element-ui目录大致如下（lib目录未截全部，只是部分） 而vant采用babel-plugin-import来实现按需导入 首先附上babel-plug...
推荐技术项目：`babel-plugin-component`
gitblog_00042的博客
04-18 334
推荐技术项目：babel-plugin-component 项目地址:https://gitcode.com/QingWei-Li/babel-plugin-component 项目简介 在前端开发中，我们常常遇到CSS管理的问题，特别是当项目规模扩大后，组件化和模块化的CSS管理变得至关重要。babel-plugin-component 是一个由@QingWei-Li开发的Babel插件，它旨在...
在vue项目中安装使用Mint-UI的方法
11-30
4. **使用babel-plugin-component插件**：为了简化按需引入并自动加载相应CSS，可以安装并配置此插件： ``` npm i babel-plugin-component -D ``` 然后在`.babelrc`文件中添加配置： ```json { "presets": [ ...
vue.js中mint-ui框架的使用方法
12-29
2.引用和使用框架，我用的是全部组件，也可以按需选择加载相应的组件，不过要使用babel-plugin-component import Mint from 'mint-ui'; Vue.use(Mint); 3.创建一个header.vue组件，里面写入mint-ui的头部组件 ...
探索Babel-Plugin-Component：优化前端构建的新工具
gitblog_00008的博客
04-18 398
探索Babel-Plugin-Component：优化前端构建的新工具 项目地址:https://gitcode.com/ElementUI/babel-plugin-component 在现代前端开发中，我们经常面对着大量的组件库和JavaScript编译器，这些工具极大地提升了我们的开发效率。今天，我们将深入探讨一个名为Babel-Plugin-Component的项目，它是一个由Eleme...
babel-plugin-component按需引入UI
weixin_49651585的博客
12-01 479
babel-plugin-component
babel-plugin-import, 模块式导入插件插件.zip
09-18
babel-plugin-import, 模块式导入插件插件 babel-plugin-import模块导入插件，与 antd， antd移动插件，等等。 为什么 babel-plugin-import英语教学指南中文说明在哪里添加 babel-plugin-importb
vite-plugin-importer:集成babel-plugin-import
04-28
vite-plugin-importer 集成babel-plugin-import 用 配置与 npm install vite-plugin-importer --save yarn add vite-plugin-importer // vite.config.js import { defineConfig } from "vite" ; import usePluginImport from 'vite-plugin-importer' export default defineConfig ( { plugins : [ ... // other plugins usePluginImport ( { libraryName : "ant-design-vue" , libraryDirectory : "es" , s
仿ElementUI构建自己的Vue组件库用babel-plugin-component按需加载组件及自定义SASS主题...
weixin_34311757的博客
04-22 600
最近使用ElementUI做项目的时候用Babel的插件babel-plugin-component做按需加载，使得组件打包的JS和CSS包体积大大缩小，加载速度也大大提升，所有想模仿做一个组件库也来做下按需加载。 首先用Vue CLI 3.0新建一个项目 vue create bes-ui 复制代码 注意的是cli3的脚手架用的Babel7的配置，只有babel.config.js文件，所以要自...
npm安装babel-plugin-component 按需加载组件 AND umy-ui
cloudcsdn88的博客
12-30 1096
npm install eslint-plugin-node --save npm install eslint-plugin-promise --save npm install eslint-plugin-standard --save npm i eslint-plugin-vue -s npm install eslint --save-dev npm i babel-plugin-component -D ================= http://www.u..
babel-plugin-component 和 babel-plugin-import有啥区别
Lynn
03-29 412
babel-plugin-component 和 babel-plugin-import有啥区别
安装babel-plugin-component和node-sass时，需要Python2报错的解决方法
weixin_44717047的博客
10-20 554
babel-plugin-component和node-sass安装时，提示需要Python2报错的解决方法
Babel 插件原理的理解与深入
weixin_34037977的博客
09-11 322
现在谈到 babel 肯定大家都不会感觉到陌生，虽然日常开发中很少会直接接触到它，但它已然成为了前端开发中不可或缺的工具，不仅可以让开发者可以立即使用 ES 规范中的最新特性，也大大的提高了前端新技术的普及（学不动了...）。但是对于其转换代码的内部原理我们大多数人却知之甚少，所以带着好奇与疑问，笔者尝试对其原理进行探索。 Babel 是...
babel原理及插件开发
weixin_33727510的博客
05-09 430
摘要 如今的前端界已经离不开ES6，然而老旧浏览器并不支持，项目中特别是国内公司又需要兼容低版本的老旧浏览器，多亏了babel这个神奇的工具，可以让我们的ES6代码运行在旧浏览器中。 大部分前端开发人员只是配置一下babel，根据需要装个插件之类，我想肯定少有人去研究babel转换ES6代码的原理及插件原理，于是在某个日子里由于项目的需要去研究了一下babel的原理。 需要说明的是，本文不涉及ba...
@vue/babel-plugin-jsx 插件的配置
05-19
@vue/babel-plugin-jsx 是一个用于在 Vue.js 项目中使用 JSX 语法的 Babel 插件。配置它的步骤如下： 1. 安装 @vue/babel-plugin-jsx 插件。 ```bash npm install --save-dev @vue/babel-plugin-jsx ``` 2. 在 babel.config.js 或 .babelrc 文件中添加插件。 ```javascript // babel.config.js module.exports = { presets: ['@vue/cli-plugin-babel/preset'], plugins: [ [ '@vue/babel-plugin-jsx', { // 配置项 } ] ] } ``` ```json // .babelrc { "presets": ["@vue/cli-plugin-babel/preset"], "plugins": [ [ "@vue/babel-plugin-jsx", { // 配置项 } ] ] } ``` 配置项可以参考官方文档：[https://github.com/vuejs/jsx/tree/dev/packages/babel-plugin-jsx#options](https://github.com/vuejs/jsx/tree/dev/packages/babel-plugin-jsx#options)。 注意：如果你使用的是 Vue CLI 3.x 版本创建的项目，那么 babel.config.js 文件已经存在，你只需要在 plugins 数组中添加插件即可。 3. 在组件中使用 JSX 语法。 ```javascript export default { render() { // 使用 JSX 语法 return <div>Hello, World!</div> } } ``` 以上就是 @vue/babel-plugin-jsx 插件的配置步骤。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值