按需引入饿了么组件

简介: 按需引入饿了么组件

按需引入


借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。


首先,安装 babel-plugin-component:


npm install babel-plugin-component -D


然后,将 .babelrc 修改为:


{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}


masn.js


import { Button, Input, Loading, Message } from "element-ui";
Vue.use(Button)
Vue.use(Input)
Vue.use(Loading)
Vue.prototype.$message = Message;
import "@/assets/scss/global.scss";
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false

相关文章
|
3月前
|
JavaScript 前端开发 开发者
哇塞!Vue.js 与 Web Components 携手,掀起前端组件复用风暴,震撼你的开发世界!
【8月更文挑战第30天】这段内容介绍了Vue.js和Web Components在前端开发中的优势及二者结合的可能性。Vue.js提供高效简洁的组件化开发,单个组件包含模板、脚本和样式,方便构建复杂用户界面。Web Components作为新兴技术标准,利用自定义元素、Shadow DOM等技术创建封装性强的自定义HTML元素,实现跨框架复用。结合二者,不仅增强了Web Components的逻辑和交互功能,还实现了Vue.js组件在不同框架中的复用,提高了开发效率和可维护性。未来前端开发中,这种结合将大有可为。
150 0
|
24天前
|
JavaScript 前端开发
vue全局公共组件自动引入并注册,开发效率直接起飞!
【10月更文挑战第14天】vue全局公共组件自动引入并注册,开发效率直接起飞!
44 1
|
1月前
|
JavaScript 索引
vue尚品汇商城项目-day04【27.分页器静态组件(难点)】
vue尚品汇商城项目-day04【27.分页器静态组件(难点)】
27 1
|
1月前
|
JSON 前端开发 JavaScript
Vue微前端新探:iframe优雅升级,扬长避短,重获新生
Vue微前端新探:iframe优雅升级,扬长避短,重获新生
102 0
|
6月前
|
Java 关系型数据库 MySQL
springboot+vue外卖点餐系统(源码+文档)
基于SpringBoot的外卖点餐系统包括管理员、用户、商家和骑手四个角色的功能模块。系统采用Java开发,使用SpringBoot框架,JDK1.8,MySQL 5.7+数据库。管理员功能涉及用户、商家、菜品分类、骑手和系统管理等,用户可进行订单、配送单、商品评价和收藏管理。商家和骑手也有相应的订单、配送单和评价管理。此外,提供各类Java毕设项目,涵盖多种框架。项目源码及更多信息可联系风歌获取。
|
5月前
|
JavaScript 前端开发 编译器
跨越时代的框架对决:深度剖析Vue 2与Vue 3核心差异
跨越时代的框架对决:深度剖析Vue 2与Vue 3核心差异
101 0
|
6月前
|
缓存 JavaScript 前端开发
Vue2与Vue3:深度剖析核心差异与升级亮点
随着Vue.js框架的不断演进,Vue2与Vue3作为两个重要版本,各自承载了特定时期的前端开发理念和技术实践。本文将全面探讨Vue2与Vue3之间的核心区别,旨在帮助开发者理解两者在设计思路、性能优化、API结构、生命周期管理等方面的显著差异,以便更好地选择和迁移至适合项目的框架版本。
898 2
|
开发框架 JavaScript 前端开发
详解如何在vue项目中引入饿了么elementUI组件
详解如何在vue项目中引入饿了么elementUI组件
165 0
|
6月前
|
存储 JavaScript 前端开发
|
前端开发
饿了么组件库使用遇到的问题
饿了么组件库使用遇到的问题
113 0