按需引入饿了么组件

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

按需引入


借助 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

相关文章
|
8月前
|
JavaScript 前端开发 API
面试官:ui组件可以自动加载,那么业务组件可以吗?
面试官:ui组件可以自动加载,那么业务组件可以吗?
uniapp引入阿里图标库
平时项目开发肯定少不了图标的使用,除了自己定制图标库之外,再一个比较不错的就是使用阿里的图标库,这里包含了很多分类的图标,基本上你想用的图标它都有,不仅好看,使用起来也是非常方便的,下面一起来看看吧。
795 0
uniapp引入阿里图标库
|
JavaScript 前端开发 容器
SolidJs尝鲜与Web Component实践造虚拟滚动的轮子
「造轮子」虚拟滚动 + soild + Web Component
1606 1
|
5月前
|
JavaScript 前端开发 开发者
哇塞!Vue.js 与 Web Components 携手,掀起前端组件复用风暴,震撼你的开发世界!
【8月更文挑战第30天】这段内容介绍了Vue.js和Web Components在前端开发中的优势及二者结合的可能性。Vue.js提供高效简洁的组件化开发,单个组件包含模板、脚本和样式,方便构建复杂用户界面。Web Components作为新兴技术标准,利用自定义元素、Shadow DOM等技术创建封装性强的自定义HTML元素,实现跨框架复用。结合二者,不仅增强了Web Components的逻辑和交互功能,还实现了Vue.js组件在不同框架中的复用,提高了开发效率和可维护性。未来前端开发中,这种结合将大有可为。
184 0
|
3月前
|
JavaScript 索引
vue尚品汇商城项目-day04【27.分页器静态组件(难点)】
vue尚品汇商城项目-day04【27.分页器静态组件(难点)】
37 1
|
7月前
|
JavaScript 前端开发 编译器
跨越时代的框架对决:深度剖析Vue 2与Vue 3核心差异
跨越时代的框架对决:深度剖析Vue 2与Vue 3核心差异
133 0
|
开发框架 JavaScript 前端开发
详解如何在vue项目中引入饿了么elementUI组件
详解如何在vue项目中引入饿了么elementUI组件
179 0
|
8月前
|
存储 JavaScript 前端开发
|
前端开发 JavaScript Java
基于qiankun的微前端最佳实践 -(同时加载多个微应用)
基于qiankun的微前端最佳实践 -(同时加载多个微应用)
4777 0
基于qiankun的微前端最佳实践 -(同时加载多个微应用)
|
前端开发
饿了么组件库使用遇到的问题
饿了么组件库使用遇到的问题
132 0