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

2024-06-15 23:44

本文主要是介绍【elementui源码解析】如何实现自动渲染md文档-第一篇,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

目录

背景

获取源码

代码分析


所有章节:

  • 【elementui源码解析】如何实现自动渲染md文档-第二篇
  • 【elementui源码解析】如何实现自动渲染md文档-第三篇
  • 【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”命令时再揭晓。

这篇关于【elementui源码解析】如何实现自动渲染md文档-第一篇的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1064921

相关文章

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库,完全使用 Python 语言编写,它对 XPath表达式提供了良好的支 持,因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块,该模块专门用来解析 HTML/XML 文档,下面来介绍一下 lxml 库

hdu1043(八数码问题,广搜 + hash(实现状态压缩) )

利用康拓展开将一个排列映射成一个自然数,然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来,一站式有声阅读平台听书系统 🌟&nbsp;开篇:遇见未来,从“智听”开始 在这个快节奏的时代,你是否渴望在忙碌的间隙,找到一片属于自己的宁静角落?是否梦想着能随时随地,沉浸在知识的海洋,或是故事的奇幻世界里?今天,就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统,它正悄悄改变着我们的阅读方式,让未来触手可及! 📚&nbsp;第一站:海量资源,应有尽有 走进“智听

【C++】_list常用方法解析及模拟实现

相信自己的力量,只要对自己始终保持信心,尽自己最大努力去完成任何事,就算事情最终结果是失败了,努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一:什么是list? •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二:list常用接口 •🌰1.默认成员函数 🔥构造函数(⭐) 🔥析构函数 •🌰2.list对象

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi

活用c4d官方开发文档查询代码

当你问AI助手比如豆包,如何用python禁止掉xpresso标签时候,它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现,因为rasa本身是带有remindschedule模块的。不过经过一番折腾后,忽然发现,chatbot上实现的定时,语音助手不一定会有响应。因为,我目前语音助手的代码设置了长时间无应答会结束对话,这样一来,chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢? 我最后选择的方法是用threading.Time

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸(两张壁纸可不一致)

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸: 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  (注意不能是bmp格式) 替换默认锁屏壁纸: 将图片资源放入vendo

C#实战|大乐透选号器[6]:实现实时显示已选择的红蓝球数量

哈喽,你好啊,我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记,这是第6篇; 接下来实现实时显示当前选中红球数量,蓝球数量; 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时,在对应的位置显示实时已选择的红球、蓝球的数量; 02 标签名称 分别设置Label标签名称为:lblRedCount、lblBlueCount

Kubernetes PodSecurityPolicy:PSP能实现的5种主要安全策略

Kubernetes PodSecurityPolicy:PSP能实现的5种主要安全策略 1. 特权模式限制2. 宿主机资源隔离3. 用户和组管理4. 权限提升控制5. SELinux配置 💖The Begin💖点点关注,收藏不迷路💖 Kubernetes的PodSecurityPolicy(PSP)是一个关键的安全特性,它在Pod创建之前实施安全策略,确保P