ElementUI源码系列一-完整引入和按需引入

news2024/11/16 0:37:27

前言

本篇将介绍,ElementUI 是如何实现完整引入和按需引入的。

完整引入

官网使用
在这里插入图片描述

源码步骤

  • src/index.js 通过对外暴露 install(),让主项目通过 Vue.use(ElementUI) 引入,还需单独引入样式 import 'element-ui/lib/theme-chalk/index.css';
  • 使用 gulp 将 scss 转换为浏览器可识别的 css,并打包放在 packages/theme-chalk/lib
  • 再通过 cp-cli 包,将文件从 packages/theme-chalk/lib 挪到 lib/theme-chalk/,用于单独引入样式

源码分析

Vue.use(ElementUI) 引入

src/index.js 暴露 install 方法,用于 Vue.use(ElementUI) 调用。
(这里只展示关键的源码)

import Button from '../packages/Button/index.js'

const components = [Button]

const install = (Vue) => {
    components.forEach(component => {
        Vue.component(component.name, component)
    })
}

export default {
    install,
    Button
}

通过 build/webpack.common.jssrc/index.js 转换为 lib/element-ui.common.js

在这里插入图片描述
lib/element-ui.common.js
在这里插入图片描述
package.json 配置入口 "main": "lib/element-ui.common.js" 用于项目全局引入 import ElementUI from 'element-ui'
在这里插入图片描述

gulp 转换 scss

gulpscss 转化为 css,并补全样式前缀,压缩 css,最后输出到根目录 packages/theme-chalk/lib 文件夹
在这里插入图片描述

运行脚本,挪动位置

"build:theme": "node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk"

脚本说明
生成所有 .scss 文件,在 index.scss 引入。执行 gulp 转化为 css 文件,最后挪动位置。

  • node build/bin/gen-cssfile
    根据 components.json(里面是 { "button": "./packages/button/index.js",... })自动化生成 packages/theme-chalk/src 下的各个 组件名.scss 文件,并在 packages/theme-chalk/src/index.scss 引入所有 组件名.scss 文件
  • gulp build --gulpfile packages/theme-chalk/gulpfile.js
    执行 gulp,转换 scsscss
  • cp-cli packages/theme-chalk/lib lib/theme-chalk
    移动样式文件位置

执行命令后,在 packages/theme-chalk 下生成 lib 文件夹
在这里插入图片描述
放的都是从 packages/theme-chalk/src.scss 转换过来的 .css 文件

在这里插入图片描述
在这里插入图片描述
其中 packages/theme-chalk/src/index.scss 放的是所有 .scss 文件的引用。自然也生成了一份 .css 文件。
在这里插入图片描述

测试

ElementUI 源码项目里打包后,在其他项目引入测试,命令如下:

npm run dist //一条龙服务。生成 lib 的 theme-chalk 和 js 文件等
npm pack // 生成 .tgz 文件,在本地测试 npm 包

生成的 .tgz 文件
在这里插入图片描述
可以新起一个项目,在测试项目里 npm install 该包,例如:

npm install /Users/mac/Documents/my-workspace/element/element-ui-2.15.12.tgz

在测试项目里,引入

import ElementUi from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' // 引入样式
Vue.use(ElementUi)

使用 el-button 组件
在这里插入图片描述

通过开发者工具查看,可以看到全被打包一起了。

在这里插入图片描述

按需引入

源码步骤

  • 每个组件有个单独的文件 index.js (例如packages/button/index.js) 暴露 install 方法,用于按需引入 Vue.use(Button)
  • 通过 webpack 多入口配置,将 packages/ 文件夹下的每个组件打包成单独的文件,放在 lib 文件夹下。
  • 测试项目里,使用 babel-plugin-component 插件来实现按需引入。插件转换时,会引用到 lib/theme-chalk 目录下对应的 组件.css

源码分析

Vue.use(Button) 引入

每个组件暴露 install 方法,用于测试项目按需引入 Vue.use(Button)
在这里插入图片描述

webpack 多入口配置

build/webpack.component.js 使用 entry 多入口打包,filename: '[name].js' 动态生成 组件名.js,放在 lib 文件夹下
在这里插入图片描述
entry 可以是对象形式,用于配置多入口打包。
在这里插入图片描述
entry: Components 内容,就是组件名和组件路径的映射
在这里插入图片描述

babel-plugin-component 插件按需引入

按照官网描述,在测试项目里,通过 babel-plugin-component 插件来实现按需引入,需要配置 .babelrc

在这里插入图片描述
如官网所示,引入
在这里插入图片描述

babel-plugin-component 文档要求的 lib 目录结构如下,ElementUI 源码 lib 的目录结构是符合的。 如果配置了 styleLibraryName ,那么项目必须有 base.cssindex.css 文件,否则会报错。
在这里插入图片描述
项目里按需引入后,打包编译如下:
在这里插入图片描述

在这里插入图片描述

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

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

相关文章

Selenium用法详解【Options选项】【JAVA爬虫】

简介本文主要讲解如何使用java代码利用selenium控制浏览器的启动选项Options的代码操作教程。Options选项这是一个Chrome的参数对象,在此对象中使用addArgument()方法可以添加启动参数,添加完毕后可以在初始化Webdriver对象时将此Options对象传入&#x…

minio分布式存储的go语言开发衔接

minio是分布式存储,可集群部署,阵列磁盘,纠错码等大数据存储必备的技术。由于它是go语言开发的,我们用go来与它衔接:上传文件,比如图片,然后预览。这里涉及几个重要的知识点。一是minio永久路径…

Vue学习笔记(二)

Vue学习笔记二脚手架利用脚手架软件生成项目包脚手架 随着时代的发展, WEB开发逐渐出现了 工程化 特征: 流水线作业! 脚本方式: 到饭店 自选点餐… 脚手架方式: 点 套餐, 一套完善的配置,扩展, 各种易用功能… 脚手架: 就是一款软件, 可以按照用户需求自动生成 开发环境: 包含…

[博士论文]基于图数据的可信赖机器学习

密歇根大学Towards Trustworthy Machine Learning on Graph Datahttps://deepblue.lib.umich.edu/handle/2027.42/174201摘要机器学习已经被应用于越来越多影响我们日常生活的与社会相关的场景,从社交媒体和电子商务到自动驾驶汽车和刑事司法。因此,为了…

7-2 洛希极限

科幻电影《流浪地球》中一个重要的情节是地球距离木星太近时,大气开始被木星吸走,而随着不断接近地木“刚体洛希极限”,地球面临被彻底撕碎的危险。但实际上,这个计算是错误的。 洛希极限(Roche limit)是一…

用Python实现十大经典排序算法(附动图)

排序算法是《数据结构与算法》中最基本的算法之一。 排序算法可以分为内部排序和外部排序,内部排序是数据记录在内存中进行排序,而外部排序是因排序的数据很大,一次不能容纳全部的排序记录,在排序过程中需要访问外存。常见的内部排…

69、CLIP-NeRF: Text-and-Image Driven Manipulation of Neural Radiance Fields

简介 官网:https://cassiepython.github.io/clipnerf/ 利用对比语言-图像预训练(CLIP)模型的联合语言-图像嵌入空间,提出了一个统一的框架,可以用短文本提示或示例图像以用户友好的方式操纵NeRF。改论文结合NeRF的新视图合成能力和生成模型潜…

【自学Python】Python缩进规则

Python缩进规则 Python缩进规则教程 Python 和其它程序设计语言采用大括号 {} 分隔代码块不同,Python 采用代码缩进和冒号来区分代码块之间的层次。 在 Python 中,对于 类定义、函数定义、流程控制语句、异常处理语句 等,行尾的冒号和下一…

【Linux篇】之TFTP服务配置

tftp是基于UDP协议的简单文本文件传输协议; 用途:使用网络的方式将文件传输(下载)到开发板中。 具体的tftp服务的安装步骤: 1> 安装tftp服务 (ubuntu必须可以上网) sudo apt-get update ----> 更新源 sudo apt-get install tftpd-hpa…

【MyBatis】如何使用“动态SQL”(不用找了,这一篇足矣)

目录 一、if标签 二、where标签 三、trim标签 四、choose、when、otherwise 五、foreach标签 六、sql标签 一、if标签 if,通过test属性中的表达式判断标签中的内容是否有效(有效才将if里面的内容拼接到sql中);一般用于用户在…

Authing 通过中国信通院「身份治理系统和工具能力」全面级评估

Authing 通过中国信通院「身份治理系统和工具能力」全面级评估 近期,Authing 荣获由中国信通院颁发的「身份治理系统和工具能力」全面级评估。在统一身份管理、统一认证管理、开发集成管理以及统一安全管理四个模块满足身份治理系统和工具支撑能力全面级要求。 评估…

Java--main()方法

文章目录一、main()方法使用二、mian()方法调用一、main()方法使用 1、访问控制权限是公有的(public) 2、main() 方法是静态的。如果要在 main() 方法中调用本类中的其他方法,则该方法也必须是静态的,否则需要先创建本类的实例对…

进程间通信【共享内存】

共享内存共享内存共享内存原理创建共享内存关联共享内存去关联共享内存控制共享内存使用共享内存代码共享内存 进程间通信的前提是:先让不同的进程,看到同一份资源 之前,管道进程通信是采用看到同一个文件,那么共享内存就是看到同…

审查 Git 仓库的绝佳工具Tig

简介 Tig 是一个 基于 ncurses 的 Git 文本模式界面,它允许你浏览 Git 仓库中的更改。它还可以充当各种 Git 命令输出的分页器。使用这个工具可以让我很好地了解在哪个提交中发生了哪些更改,最新的提交合并是什么等等。 git工作原理:https:…

黑马学ElasticSearch(三)

目录: (1)RestClient-操作索引库-导入demo (2)RestClient操作索引-hotel数据结构分析 (3)RestClient操作索引库-初始化RestClient (4)RestClient操作索引库-创建索引库…

如何掌握TikTok广告投放技巧,玩转“TikTok+独立站”新模式?

导读:TikTok已经发展成为全球第六大社交媒体网络,这使其成为一个非常富饶的广告目的地。 跨境卖家如何在 TikTok 上投放广告?在“TikTok独立站”模式中,卖家在 TikTok ads 上投放电商广告,用户点击后将跳转到独立站落地…

21. 合并两个有序链表(链表)

文章目录题目方法一 暴力法:创建头结点,比较拼接方法二 递归法参考文献题目 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1: 输入:l1 [1,2,4], l2 [1,3,4] 输出:[1,1,2,3,4,…

【从零开始学习深度学习】42. 算法优化之AdaDelta算法【基于AdaGrad算法的改进】介绍及其Pytorch实现

除了上一篇文章介绍的RMSProp算法以外,另一个常用优化算法AdaDelta算法也针对AdaGrad算法在迭代后期可能较难找到有用解的问题做了改进 。比较有意思的是,AdaDelta算法没有学习率这一超参数。 目录1. AdaDelta算法介绍2. 从零实现AdaDelta算法3. Pytorch…

UDS诊断系列介绍04-10会话服务

本文框架1. 系列介绍10服务概述2. 10服务请求与应答2.1 10服务请求2.2 肯定应答2.3 否定应答1. 系列介绍 UDS(Unified Diagnostic Services)协议,即统一的诊断服务,是面向整车所有ECU的一种诊断通信方式,是基于ISO 14…

Linux学习笔记——集群化环境前置准备

5.7、集群化环境前置准备 5.7.1、介绍 在前面,我们所学习安装的软件,都是以单机模式运行的。 后续,我们将要学习大数据相关的软件部署,所以后续我们所安装的软件服务,大多数都是以集群化(多台服务器共同…