首页 > 其他分享 >element-ui按需引入

element-ui按需引入

时间:2023-06-27 20:57:02浏览次数:37  
标签:Vue plugin babel Button component element ui 引入 Select

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

首先,安装 babel-plugin-component:

npm install babel-plugin-component -D

2.修改babel.config.js
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ["@babel/preset-env", { "modules": false }]
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

  3.接下来,如果你只希望引入部分组件,比如 Button 和 Select,那么需要在 main.js 中写入以下内容:

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

 



标签:Vue,plugin,babel,Button,component,element,ui,引入,Select
From: https://www.cnblogs.com/sgj191024/p/17509897.html

相关文章

  • 【雕爷学编程】Arduino动手做(131)---跑马灯矩阵键盘模块
    37款传感器与执行器的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止这37种的。鉴于本人手头积累了一些传感器和执行器模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的,这里准备逐一动手尝试系列实验,不管成功(程序走通)与否,都会记录下来—小小的进步或是搞......
  • TreeSaver 使用教程整理——Step 2: Adding Basic UI
    请首先阅读前一篇教程:TreeSaver使用教程整理——Step1:GettingStartedStep2:AddingBasicUI我们上一步实现的网页有了一个最最简单的功能,这一步我们将在上一步基础上添加切换分页的按钮以及显示当前页面信息。请Copy上一步的内容,并对下面文件做如下修改: 对资源文件(resource......
  • Spring Boot系列教程一:Eclipse安装spring-tool-suite插件
    一.前言    一直使用eclipse,个人习惯选用Eclipse+spring-tool-suite进行开发,特别注意Eclipse要选用对应的spring-tool-suite进行安装,这点笔者浪费了好长时间,以下为对应的版本。eclipse-kepler.4.3.1–>springsource-tool-suite-RELEASE-e4.3.1-updatesite.zipecl......
  • 限制Element ui日期选择器el-date-picker时间跨度为3个月
    处理Element日期选择器el-date-picker限制时间跨度3个月。主要通过pickerOptions里的disabledDate来控制禁止选中的日期。实现思想就是,当选中第一个开始日期时,拿到该时间戳计算时间范围,然后控制接下来选中时间在3个月以内,超过范围禁用掉。1、在template中使用el-date-pic......
  • 瓴羊Quick BI数据门户,让企业数据管理一目了然
    信息科技时代,大量企业已经意识到:商业信息将成为企业的核心资产之一。而商业信息的获取,离不开专业的数据分析,这也让瓴羊QuickBI等商业智能BI工具成为了企业们进入信息化时代后的“标配”。对现代市场环境下的企业而言,竞争是全方面的。除了产品、服务、价格等外在能力的比较之外,企业......
  • 基于vue +Java+springboot+element-ui开发的智慧班牌系统源码
    电子班牌系统又称之为智慧班牌,是当前校园数字化信息化建设、文化建设的主流,是校园日常工作安排、校园信息发布、班级文化风采展示、课堂交流、家校互通的重要应用载体。在每个班级门口安装一台电子班牌终端,实现学校日常管理、校园信息化建设数据对接,为学生提供一个德智教育文化环境......
  • elementUI中upload自定义上传行为 http-request属性
    需求是上传一个xlsx后台处理完再返回xlsx流upload请求需要添加responseType:'blob'属性所有要扩展一下若依项目扩展elementUI中upload自定义上传行为http-request属性<el-uploadref="upload1":limit="1"accept=".xlsx,.xls":headers="......
  • elementui admin项目中使用echarts
    1.引入依赖npminstallecharts--save2.在template中写<template>  <div>   <el-card>    <divid="mychart":style="{height:height,width:width}"></div>   </el-card>  </div></t......
  • elementui admin中使用外部链接 iframe进行页面的展示
    有时候我们需要外部链接进行展示而且想要这个外部链接的页面不是打开新窗口而是嵌入在项目布局中,就需要用到iframe控件了,iframe控件不需要安装依赖包,可以直接使用1.在template中写<template>  <div>    <iframe:src="linkUrl"frameborder="0":style="{'heig......
  • Building a Dice Game using JavaScript Javascript构建一个dice game 项目
    WewillbebuildingaDiceGameProjectusingHTML,CSS,andJavaScript.TheDiceGameisbasedonatwo-player.Bothplayersrollthediceandtheplayerwhogetsthehighestphasevaluewillwinthegame.ImagesofDicePhases: Thelistofdicephasesi......