按需引入饿了么组件

最新推荐文章于 2024-08-29 22:14:46 发布

前端李十三

最新推荐文章于 2024-08-29 22:14:46 发布

阅读量312

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_64530670/article/details/131173934

版权

文章介绍了如何通过babel-plugin-component插件实现element-ui组件的按需引入，从而减小项目体积。配置包括安装插件和修改.babelrc文件，具体使用时仅导入需要的组件，并注册到Vue实例中，同时引入样式文件。

摘要由CSDN通过智能技术生成

按需引入

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