element-ui在项目当中的引入以及按需引入使用

news2025/7/11 12:52:27

目录

1.项目当中引入element-ui

A.先使用npm安装

B.在main.js当中引入文件

C.在App.vue当中可以引用button相关的UI组件

 2.element-ui配合脚手架按需引入

A.首先安装按需引入的插件

B.修改 .babelrc

C.按需引入的好处


1.项目当中引入element-ui

A.先使用npm安装

npm i element-ui -S

B.在main.js当中引入文件

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

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

也就是补充以下几条

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

C.在App.vue当中可以引用button相关的UI组件

例如可以引入以下代码:

<el-row>
  <el-button disabled>默认按钮</el-button>
  <el-button type="primary" disabled>主要按钮</el-button>
  <el-button type="success" disabled>成功按钮</el-button>
  <el-button type="info" disabled>信息按钮</el-button>
  <el-button type="warning" disabled>警告按钮</el-button>
  <el-button type="danger" disabled>危险按钮</el-button>
</el-row>

这些代码是用来配置button按钮的

App.vue文件可以这样子配置:

<template>
  <div>
    <el-row>
  <el-button disabled>默认按钮</el-button>
  <el-button type="primary" disabled>主要按钮</el-button>
  <el-button type="success" disabled>成功按钮</el-button>
  <el-button type="info" disabled>信息按钮</el-button>
  <el-button type="warning" disabled>警告按钮</el-button>
  <el-button type="danger" disabled>危险按钮</el-button>
</el-row>
  </div>
</template>

<script>
export default {

}

</script>
<style lang='less' scoped>

</style>

最终在npm后的效果图是:

 2.element-ui配合脚手架按需引入

A.首先安装按需引入的插件

按需引入

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

首先,安装 babel-plugin-component:

npm install babel-plugin-component -D

B.修改 .babelrc

将.babelrc当中的文件修改为

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

在修改的时候,如果出现以下报错:

 那是因为文件当中的es2015配置失败,可以将其更改为

"@babel/preset-env"

也就是整体代码:

{
  "presets": [["@babel/preset-env", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

最后在npm run serve进行运行

C.按需引入的好处

在执行打包命令之后

npm run build

全局引入会比按需引入所占内存打包空间,大1MB,这将极大得影响打包后文件在执行时的效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/36835.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【强化学习论文合集】ICML-2021 强化学习论文

强化学习&#xff08;Reinforcement Learning, RL&#xff09;&#xff0c;又称再励学习、评价学习或增强学习&#xff0c;是机器学习的范式和方法论之一&#xff0c;用于描述和解决智能体&#xff08;agent&#xff09;在与环境的交互过程中通过学习策略以达成回报最大化或实现…

[附源码]Python计算机毕业设计电子工厂进销存管理系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…

哲学讨论:未来的语言模型有没有可能具备意识和主观感受?

文&#xff5c;付奶茶编&#xff5c;ZenMoore问题背景近期&#xff0c;纽约大学心智、大脑和意识研究中心的主任 David Chalmers 汇报了一场非常有思考价值的研究成果,主要是从神经科学的角度讨论了大规模语言模型&#xff08;Large Language Models&#xff0c;LLMs&#xff0…

刘强东这波操作秀

近日&#xff0c;刘强东发布京东全员信&#xff0c;信中提到&#xff1a;自2023年1月1日起&#xff0c;逐步为十几万德邦的兄弟们缴齐五险一金&#xff0c;确保每个德邦兄弟都能“老有所养&#xff0c;病有所医”&#xff0c;为兄弟们提供基础保障&#xff1b;集团拿出100亿元人…

教程四 在Go中使用Energy创建跨平台GUI - 开发者工具

介绍 本文介绍在Energy中如何使用开发者工具(dev tools) 开发者工具(dev tools) 是前端开发人员常用的&#xff0c;在开发时调式代码、接口、资源加载、CSS调整等等&#xff0c;大多数场景都会使用。 energy封装了部分繁琐的chromium使用&#xff0c;其中之一包含开发者工具…

致敬最美抗击疫情的逆行者 DIV布局大学生抗疫感动专题网页设计作业模板 疫情感动人物静态HTML网页模板下载

&#x1f389;精彩专栏推荐 &#x1f4ad;文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;毕设项目精品实战案例 (10…

PD仿真算法中变形梯度矩阵的极分解

1.背景 PD&#xff08;Projective Dynamics&#xff09;仿真算法是一种“可并行化计算的”高效的软体形变模拟&#xff08;或成为仿真、动画&#xff09;算法&#xff0c;与传统的基于力的有限元方法不同的是&#xff0c;PD算法直接作用于顶点位置&#xff0c;通过最小化能量函…

Wireshark Lab: Ethernet and ARP v7.0

Wireshark Lab: Ethernet and ARP v7.0 实验内容戳这里 介绍部分转自乌漆WhiteMoon Ethernet 以太网 以太网在现在的有线局域网中有着支配者的地位&#xff0c;就像是因特网使得全球互联那样。其实局域网技术还有令牌环、FDDI 和 ATM 等&#xff0c;但是以太网仍然具有很多…

第十三届蓝桥杯 C++ B 组省赛 G 题———积木画(AC)

目录1.积木画1.题目描述2.输入格式3.输出格式4.样例输入5.样例输出6.样例说明7.数据范围8.原题链接2.解题思路AC_code1.积木画 1.题目描述 小明最近迷上了积木画, 有这么两种类型的积木, 分别为 III 型&#xff08;大小为 2 个单位面积) 和 LLL 型 (大小为 3 个单位面积): 同…

java面试强基(12)

什么是泛型&#xff1f;有什么作用&#xff1f; Java 泛型&#xff08;Generics&#xff09; 是 JDK 5 中引入的一个新特性。使用泛型参数&#xff0c;可以增强代码的可读性以及稳定性。 编译器可以对泛型参数进行检测&#xff0c;并且通过泛型参数可以指定传入的对象类型。…

多媒体技术论文研读报告

多媒体技术论文研读报告 一、论文基本信息 论文题目为&#xff1a;基于多模态特征融合嵌入的相似广告检索方法&#xff0c;作者信息&#xff1a;南京大学计算机软件新技术国家重点实验室&#xff0c;南京大学软件学院冯奕、周晓松、李传艺、葛季栋、骆斌&#xff0c;深圳市腾…

2022最新JUC+多线程面试题

Java中实现多线程有几种方法 创建线程的常用的几种方式&#xff1a; 继承Thread类 实现Runnable接口 &#xff08;重写run方法&#xff0c;无返回值&#xff09; 实现Callable接口&#xff08; JDK1.5>,重写call方法&#xff0c;可以自定义返回值 &#xff09; 线程池方…

带式输送机的传动装置设计

目 录 摘 要 I Abstract II 1 绪论 1 1.1设计概述 1 1.2研究内容及参数 1 1.3 带传动 2 1.4圆锥-圆柱齿轮传动减速器 2 2结构设计 4 2.1V带传动 4 2.2减速器内部的传动零件 4 2.3联轴器的选择 4 3 设计计算过程及说明 6 3.1选择电动机 6 3.1.1电动机类型和结构型式选择 6 3.1.2…

android源码-ContentProvider实现原理分析

前言&#xff1a; 最初的目的是想研究下ContentProvider产生ANR原因的&#xff0c;但是如果要讲ANR的原因&#xff0c;那么必须要了解ContentProvider的完整实现原理&#xff0c;所以本篇就先讲一下ContentProvider的实现原理&#xff0c;下一篇再去讲ANR的原因。 本篇主要会讲…

估值破千亿,被资本疯抢的广汽埃安会是广汽的未来吗?

最近&#xff0c;广汽埃安在新能源市场上捷报频传&#xff0c;先是宣布完成了182.94亿元的A轮融资&#xff0c;成近年国内新能源整车最大的单笔私募融资。品牌估值更是达到了震撼人心的1032.39亿&#xff0c;基本等于广汽集团AH总市值&#xff0c;也远超港股小鹏、零跑汽车的市…

就两秒?这说出去谁信啊!

文 | xiaoyi&#xff08;转载请后台联系&#xff09;关注公众号&#xff1a;小一的学习笔记截止发文&#xff0c;北上广深一共有6510条公交线路为了获取上面的这些线路信息&#xff0c;我写了一个爬虫&#xff0c;大概用了2秒左右就搞定&#xff0c;真爽&#xff01;说出来你们…

Maven环境搭建

目录一、安装及环境配置1.1、下载1.2、Maven目录结构介绍1.3、环境配置二、关于Maven仓库的说明2.1、仓库基本分类&#xff08;私服仓库和中央仓库均为远程仓库&#xff09;2.2、本地仓库的默认位置&#xff08;在setting.xml中配置&#xff09;2.3、中央仓库连接位置的体现&am…

K8S部署后的使用:dashboard启动、使用+docker镜像拉取、容器部署(ubuntu环境+gpu3080+3主机+部署深度学习模型)

0、k8s安装、docker安装 参考&#xff1a;前两步Ubuntu云原生环境安装&#xff0c;dockerk8skubeedge&#xff08;亲测好用&#xff09;_爱吃关东煮的博客-CSDN博客_ubantu部署kubeedge 配置节点gpu&#xff1a; K8S调用GPU资源配置指南_思影影思的博客-CSDN博客_k8s 使用gpu…

机器学习-(手推)线性回归1-最小二乘法(矩阵表达)、几何意义

一、最小二乘法&#xff08;矩阵表达&#xff09;误差平均分散每个样本 如下数学推到过程&#xff08;手推&#xff01;&#xff01;&#xff01;&#xff09;&#xff1a; 数据介绍&#xff1a; D{(x1,y1),(x2,y2),......(xn,yn)&#xff0c; Xi&#xff08;P维列向量&…

留学Essay写作主要靠哪些步骤得分?

期末来了&#xff0c;留学生该怎么办&#xff1f;如何做Essay?下面我们介绍提高写作能力的有效技巧&#xff01; What should international students do when the end of the semester comes?How to do Essay?Here we introduce effective skills to improve your writing …