【elementui源码解析】如何实现自动渲染md文档-第一篇

文章目录

目录

背景

获取源码

代码分析


背景

之前基于vant3的源码开发过二次开发过组件,其中vant实现了将md文档渲染到界面上,有天突发奇想想知道这是如何实现的将md文档渲染到界面上的,因为平时开发中使用elementui占多数,所以就以elementui为研究对象。

获取源码

  • 源码:elementui2源码地址:点我前往
  • 安装依赖:这里可能会遇到一些问题 一些说明参考源码中的 .github/CONTRIBUTING.zh-CN.md文件夹的“开发环境搭建” 根据这里的提示来安装依赖。
  • 运行:npm run dev
  • 如果有遇到安装依赖时报错,一般问题都是node-sass和本地的node版本不符合。首先去node的git库查看对应版本node-sass的git库,一般拉下来的elementui的4.11.0,我的做法是先降低本地的node版本,执行一遍yarn,但是项目使用的eslint版本需要14版本的node,所以再切换到14版本的node再执行yarn。注意:如果执行yran的过程中遇到报错,每次都要执行 yarn cache clean 再重新执行yarn,不然有可能会下载下来的依赖还是错的。(这里有问题欢迎评论区提问)

图1

项目启动成功打开http://localhost:8085/

图2

代码分析

首先查看根目录的package.json 

查看dev命令:可以看到第一段是“npm run boostrap” 这段从图中可以看出就是执行“yarn || npm i”。接着往下看,出现了命令"npm run build;file";其中的第一段代码也就是绿色框中的“node build/bin/iconInit.js” 这就是本文分析的重点。

图3

找到该文件,我们来逐行分析。

  • 第3、4、5行代码引入了nodejs模块中的postcss、fs、path模块。
  • 第6行用fs模块找到icon.scss文件。如图5,这里面定义了elementui中所有的icon图标。
  • 第7行用postcss.parse函数将css字符串解析为postcss可以处理的对象,就相当于将字符串变成了对象,从其中的nodes我们可以获取到所有的定义的icon的名字,如图6。
  • 11-19行代码就是循环nodes,12行的正则就是匹配el-icon的所有图标比如:.el-icon-delete-solid:before,.el-icon-delete:before等,然后捕获“el-icon”之后“:before”之前的内容,比如捕获“delete-solod”、“delete”,然后push到classList中。
  • 最后22行代码就是将classList写入icon.json文件中。

图4

图5

图6

至于最终生成的这个icon.json文件有什么作用,我们需要等到介绍“node build/bin/build-entry.js”命令时再揭晓。

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

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

相关文章

java线程池讲解!核心参数

创建方式 | 构造方法 Executor构造方法 存放线程的容器&#xff1a; private final HashSet<Worker> workers new HashSet<Worker>(); 构造方法&#xff1a; public ThreadPoolExecutor(int corePoolSize,int maximumPoolSize,long keepAliveTime,TimeUnit uni…

利用Morph Studio平台免费生成AI视频教程和效果体验

今天体验一下生成AI视频平台&#xff0c;目前是免费的&#xff0c;但生成效果还是不错的,可以根据输入文字&#xff0c;或者上传图片&#xff0c;或者上传视频来自动生成视频。 访问官网&#xff0c;登录之后点击“create Library” &#xff0c;比如我建了一个“AI视频”的Li…

4S店试驾线上预约小程序源码系统 前后端分离 带完整的源代码包+安装部署教程

系统概述 这款 4S 店试驾线上预约小程序源码系统旨在为 4S 店和消费者提供便捷、高效的试驾预约服务。通过小程序&#xff0c;消费者可以轻松预约试驾&#xff0c;4S 店可以方便地管理预约信息&#xff0c;提高工作效率和服务质量。 代码示例 系统特色功能一览 1.便捷的预约流…

面向对象编程重载

系列文章目录 文章目录 系列文章目录前言一、重载&#xff08;overload&#xff09; 前言 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站&#xff0c;这篇文章男女通用&#xff0c;看懂了…

52.@NotNUll,@NotBlank,@NotEmpty的使用区别

1.NotNull 适用于基本数据类型(Integer&#xff0c;Long&#xff0c;Double等等)&#xff0c;当 NotNull 注解被使用在 String 类型的数据上&#xff0c;则表示该数据不能为 Null&#xff08;但是可以为 Empty&#xff09; NotNull(message "id不能为空", groups …

000003 - Hadoop集群配置

Hadoop集群配置 1. 背景2. 实践2.1 集群规划2.2 配置文件说明2.3 配置 1. 背景 在000002 - Hadoop环境安装&#xff0c;我们已经执行完了如下步骤。接下来就是将不同服务器上的Hadoop配置为一个整体的集群。 准备三台Linux服务器&#xff0c;服务器之间相互配置免密ssh登陆在…

floating_point的IP核使用

参考文章&#xff1a;Vivado IP核之定点数转为浮点数Floating-point_vivado 浮点数-CSDN博客 IP核的配置 后边还要做FFT&#xff0c;所以理论上最好的输出方式是单精度浮点。 输入精度&#xff1a;为了满足要求&#xff0c;输出数据的24位&#xff0c;其中 1位符号位&#xff…

2024年【制冷与空调设备运行操作】考试内容及制冷与空调设备运行操作考试报名

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 制冷与空调设备运行操作考试内容考前必练&#xff01;安全生产模拟考试一点通每个月更新制冷与空调设备运行操作考试报名题目及答案&#xff01;多做几遍&#xff0c;其实通过制冷与空调设备运行操作新版试题很简单。…

工厂模式(设计模式)

使用工厂模式创建对象的好处在于&#xff0c;具体的实现类可以随意换&#xff08;解耦&#xff09;。因为在返回创建的对象的时候&#xff0c;我将此对象向上转型。那么如果需求变动&#xff0c;我可以再写一个这个接口的实现类&#xff0c;只用修改这个工厂类中的代码。而使用…

pytest配置文件配置并通过allure生成报告

之前已经学习了使用pytestrequests实现各种方式的调用和一些脚本的执行&#xff0c;今天来学习下如何使用pytest.ini配置文件来管理用例的执行以及如何使用allure生成测试报告。 1.pytest.ini文件配置 在项目目录下新建pytest.ini文件&#xff0c;然后进行配置&#xff0c;pyt…

从路边摊到五星级酒店:六西格玛培训的价格与品质探秘!

当我们深入探讨市面上的六西格玛培训价格差异时&#xff0c;确实会发现不同机构之间存在着显著的差别。以张驰咨询和xx机构为例&#xff0c;两者在价格定位上形成了鲜明的对比&#xff0c;同时也展示了不同机构在教学理念和服务品质上的不同。 xx机构之所以能以亲民的价格吸引…

JVM常用概念之扁平化堆容器

扁平化堆容器是OpenJDK Valhalla 项目提出的&#xff0c;其主要目标为将值对象扁平化到其堆容器中&#xff0c;同时支持这些容器的所有指定行为&#xff0c;从而达到不影响原有功能的情况下&#xff0c;显著减少内存空间的占用&#xff08;理想条件下可以减少24倍&#xff09;。…

力扣416 分割等和子集 Java版本

文章目录 题目描述思路代码 题目描述 给你一个 只包含正整数 的 非空 数组 nums 。请你判断是否可以将这个数组分割成两个子集&#xff0c;使得两个子集的元素和相等。 示例 1&#xff1a; 输入&#xff1a;nums [1,5,11,5] 输出&#xff1a;true 解释&#xff1a;数组可以…

【技巧】Leetcode 191. 位1的个数【简单】

位1的个数 编写一个函数&#xff0c;输入是一个无符号整数&#xff08;以二进制串的形式&#xff09;&#xff0c;返回其二进制表达式中 设置位 的个数&#xff08;也被称为汉明重量&#xff09;。 示例 1&#xff1a; 输入&#xff1a;n 11 输出&#xff1a;3 解释&#x…

Vue前端环境搭建:从四个方面、五个方面、六个方面和七个方面深度解析

Vue前端环境搭建&#xff1a;从四个方面、五个方面、六个方面和七个方面深度解析 在构建Vue.js项目时&#xff0c;搭建一个稳定且高效的前端环境至关重要。这不仅关乎项目的顺利推进&#xff0c;更直接影响开发者的效率和代码质量。本文将从四个方面、五个方面、六个方面和七个…

C++ 36 之 this指针

#include <iostream> #include <string.h> using namespace std;// this指针 永远指向当前对象 class Students06{ public:int age;// int m_age; //member成员首字母mStudents06(int age){// 1.解决命名冲突的问题 this指针找成员变量需要使用->符号this->…

AI时代的产品经理的成长指南

前言 随着人工智能&#xff08;AI&#xff09;技术的迅猛发展&#xff0c;我们正处在一个变革的时代。在这个时代&#xff0c;产品经理的角色和职责也在不断地发生变化和演进。为了在这个充满机遇和挑战的AI时代中脱颖而出&#xff0c;产品经理需要不断地学习、成长和适应。以…

vscode打包vue项目

1&#xff09;npm install 2&#xff09;npm install -g vue/cli 3&#xff09;npm run build 第三步注意&#xff1a;要查看根目录下 package.json 配置&#xff1b; 如果和我的一样 3&#xff09;应该为 npm run build:prod 4)将dist 文件考到nginx等web服务器即可使用…

功能测试 之 单模块测试----轮播图、登录、注册

单功能怎么测&#xff1f; 需求分析 拆解测试点 编写用例 1.轮播图 &#xff08;1&#xff09;需求分析 位置&#xff1a;后台--页面--广告管理---广告列表(搜索index页面增加广告位2) 操作完成后需要点击admin---更新缓存,前台页面刷新生效 &#xff08;2&#xff09;拆解…

算法02 递归算法及其相关问题

递归 在编程中&#xff0c;我们把函数直接或者间接调用自身的过程叫做递归。 递归处理问题的过程是&#xff1a;通常把一个大型的复杂问题&#xff0c;转变成一个与原问题类似的&#xff0c;规模更小的问题来进行求解。 递归的三大要素 函数的参数。在用递归解决问题时&…