.md是什么文件_Element-UI源码阅读之md显示到页面

入口文件

首先,看一个项目的入口,可以从package.json中去看它的运行命令

99d44164daf00552a74aed4973dbfc0d.png

可以看到dev那行,执行了很多脚本: npm run bootstrap && npm run build:file && cross-env NODE_ENV=development webpack-dev-server --config build/webpack.demo.js & node build/bin/template.js

npm run bootstrap就是安装项目所需依赖, 重点就是webpack-dev-server --config build/webpack.demo.js项目使用webpack执行build/webpack.demo.js,生成一个服务器,这个是项目的打包脚本js。

c4ba39c3a96d347d7f1bc3dc95170784.png

可以看到entry指向了./examples/entry.js,那么这个是我们的入口文件了。

entry.js

edf72fe7859e2776b04dc6bfe9a24126.png

2d43e615fb6541b7a429f595e1719bf8.png

可以看到这里就是一个普通Vue的项目了,引用了许多的模块,注册了一些自己编写的Vue组件,重点需要看的是router。

router.config.js

14ce7a4717f358440f2cf4f61cb70c47.png

这是对项目边栏,导航、主题等进行国际化渲染的路由。

35bd571d07c2d3961c185901355f053e.png

这个对应的是项目的内容,也就是我们看到的demo演示部分。那么它是怎么把 .md的文件渲染到页面并且达到既显示demo效果,又有源代码的呢?

能做到这一点只能在编译的时候就对md的文件进行分析,分析出code部分,然后对code部分进行一些处理。这里element-ui在原来mdloader的基础上,添加一些项目需要用到的需求代码。我们回到webpack-demo.js

5f8234550496d6355ed82458e3739d6a.png

md-loader/index.js

bb11cd54b18a12720d032c8c61440e45.png
它的入口文件是index.js

d0a4592e82959764ac0e5c6782dfddb3.png
引入了config.js

md-loader/config.js

e8872ea3cdf70d40feb67fa810d9f984.png

引用了许多的依赖包,使用了markdown-it-chain的链式调用,配置了一对东西。可以去看看这个模块的使用:预览

其实就是一个把.md解析为一个树行结构,再通过通过一些函数对树进行解析,拼接dom,生成dom树的作用,这里面的一些api需要自己去看才能理解。 简而言之,就是解析的代码,element-ui的工程师,对它扩展了一些功能,让它把code部分拼接成:

<demo-block>demo组件组件代码描述
</demo-blcok>

最后的拼接主要看index.js

function(source) {const content = md.render(source);const startTag = '<!--element-demo:';const startTagLen = startTag.length;const endTag = ':element-demo-->';const endTagLen = endTag.length;let componenetsString = '';let id = 0; // demo 的 idlet output = []; // 输出的内容let start = 0; // 字符串开始位置let commentStart = content.indexOf(startTag);let commentEnd = content.indexOf(endTag, commentStart + startTagLen);while (commentStart !== -1 && commentEnd !== -1) {output.push(content.slice(start, commentStart));const commentContent = content.slice(commentStart + startTagLen, commentEnd);const html = stripTemplate(commentContent);const script = stripScript(commentContent);let demoComponentContent = genInlineComponentText(html, script);const demoComponentName = `element-demo${id}`;output.push(`<template slot="source"><${demoComponentName} /></template>`);componenetsString += `${JSON.stringify(demoComponentName)}: ${demoComponentContent},`;// 重新计算下一次的位置id++;start = commentEnd + endTagLen;commentStart = content.indexOf(startTag, start);commentEnd = content.indexOf(endTag, commentStart + startTagLen);}// 仅允许在 demo 不存在时,才可以在 Markdown 中写 script 标签// todo: 优化这段逻辑let pageScript = '';if (componenetsString) {pageScript = `<script>export default {name: 'component-doc',components: {${componenetsString}}}</script>`;} else if (content.indexOf('<script>') === 0) { // 硬编码,有待改善start = content.indexOf('</script>') + '</script>'.length;pageScript = content.slice(0, start);}output.push(content.slice(start));return `<template><section class="content element-doc">${output.join('')}</section></template>${pageScript}`;
};

这样接的vue组件就会被vue-loader来处理,这样就形成了我们看到的效果。

附上自己分离它逻辑的demo: demo链接 预览链接

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

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

相关文章

linux误删ssh不上,误删openssh-server删除,复原操作

在别的节点上寻找openssh的程序有哪些&#xff1a;而我的这个节点上只有一个openssh-clines&#xff0c;所以&#xff0c;就先利用了yum install openssh-server进行安装&#xff0c;但是这个安装的是最新的 openssh-server-5.3p1-122.el6.x86_64.rpm&#xff0c;担心集群节点之…

我用 MySQL 干掉了一摞简历

临近过年&#xff0c;疫情又趋于平稳&#xff0c;最近出来面试的人也多了起来&#xff0c;我们公司也在招人。我发现&#xff0c;不少候选人&#xff0c;对数据库的认知还处在比较基础的阶段&#xff0c;以为会写“增删改查”、做表关联就足够了&#xff0c;那些工作中经常出现…

借用虚拟机在真机安装 ubuntu, 亦可安装至移动硬盘

说一下另一种硬盘安装的办法&#xff0c;借用虚拟机装在物理硬盘上&#xff0c;比较变态。0. 适用于机子里已经装了 windows 的朋友安装真正的 Ubuntu &#xff0c;wubi 不在讨论之列。1. 下载并安装 vmware workstation for windows: [url]http://www.vmware.com/products/ws/…

为什么AI工程师成为当前薪资最高的技术岗位

今年无疑是“人工智能”话题火热指数最高的一年。从腾讯西雅图AI实验室&#xff0c;百度斥资超过200亿投入人工智能研发&#xff0c;再到最近 Google 打算在中国进行AI领域的市场扩张&#xff0c;其母公司 Alphabet 更是在7月便成立专注AI领域的风投机构...全球都在风生水起、将…

spring boot jar包_「Spring Boot 新特性」 jar 大小自动瘦身

自动分析瘦身Spring Boot 项目最终构建处理 JAR 包大小一直是个诟病&#xff0c;需要把所有依赖包内置最终输出可运行的 jar。当然可以使用其他的插件扩展 实现依赖 JAR 和 可运行 jar 分离可以参考 slot-maven-plugin[1], 但此种方法治标不治本并不能减少原有依赖的 JAR 的大小…

linux应用与管理,Linux操作系统应用与管理

本书从实际应用的角度出发&#xff0c;以RedHat Linux 9为操作环境&#xff0c;介绍了使用和管理Linux的各种常规操作和技巧。主要内容包括Linux的安装配置、桌面应用、文件目录管理、用户管理、网络管理、安全管理、进程管理、软件包的安装使用、更新Linux内核以及Linux下Java…

设计模式在项目中的应用案例_设计模式在项目中的应用(初学者版)

文章首发链接&#xff1a;设计模式在项目中的实际应用&#xff08;应试版&#xff09;​mp.weixin.qq.com本文适用于设计模式初学者。很多人学习了设计模式&#xff0c;但在项目开发中仍然不知道如何使用&#xff1b;很多小伙伴在课堂上跟着老师稀里糊涂的听了&#xff0c;懂了…

微创社001期:从0开始创作第一本技术书

互联网已经成为了人们生活中如饮水空气一般的基础设施&#xff0c;它不仅影响着当下我们的生活&#xff0c;也必将在更加普遍的领域影响着我们的未来。而在大浪潮中&#xff0c;坚守一个以自我为中心的知识体系&#xff0c;不仅有助于我们作为个体更好的从互联网汲取养分&#…

关于虚拟机下linux共享Windows文件的解决方案

先跟大家说一下在windows下装的vmware&#xff0c;就是又在vmware的系统里虚拟了一个Linux的系统的话&#xff0c;我们有些朋友就是想法把物理机的东西拷贝到Linux虚拟机里时很是伤神&#xff0c;当然windows就很简单了&#xff0c;直接拖进去&#xff08;如果你安装了vmware t…

10分钟让你快速掌握Excel的16项重要技巧

大家在日常生活、工作使用Excel时&#xff0c;是不是总会遇到很多问题呢? 不小心将文件命名错了&#xff0c;要一个个改&#xff1f; 文件里只需要数据却不知道怎么提取&#xff1f; 工作汇报要做数据汇总、需要插入大量图片怎么办&#xff1f; 甚至在耗费相当多的时间与精力…

android刷新时的圆形动画_Android自定义加载圈动画效果

本文实例为大家分享了Android自定义加载圈动画展示的具体代码&#xff0c;供大家参考&#xff0c;具体内容如下实现如下效果:该效果图主要有3个动画:1.旋转动画2.聚合动画3.扩散动画以上3个动画都是通过ValueAnimator来实现,配合自定义View的onDraw()方法实现不断的刷新和绘制界…

hashset默认长度是多少?_看看,这些细节上的坑,你犯了多少?

来源&#xff1a;http://1t.click/ata8# 前言代码优化 &#xff0c;一个很重要的课题。可能有些人觉得没用&#xff0c;一些细小的地方有什么好修改的&#xff0c;改与不改对于代码的运行效率有什么影响呢&#xff1f;这个问题我是这么考虑的&#xff0c;就像大海里面的鲸鱼一样…

linux中wine yum安装,分享|在基于RedHat或Debian的系统上安装 Wine 1.7

Wine,Linux上最流行也是最有力的软件, 可以顺利地在Linux平台上运行Windows程序和游戏。这篇文章教你怎么在像CentOS, Fedora, Ubuntu, Linux Mint一样基于Red Hat和Debian的系统上安装最新的Wine 1.7。在Linux安装 Wine 1.7不幸的, 在基于Red Hat的系统上没有官方的 Wine 仓库…

C# 规则引擎RulesEngine

当编写应用程序时&#xff0c;经常性需要花费大量的时间与精力处理业务逻辑&#xff0c;往往业务逻辑的变化需要重构或者增加大量代码&#xff0c;对开发测试人员很不友好。之前在这篇文章说过&#xff0c;可以使用脚本引擎来将我们需要经常变化的代码进行动态编译执行&#xf…

Windbg设置条件断点

条件断点&#xff08;condition breakpoint&#xff09;的是指在上面3种基本断点停下来后&#xff0c;执行一些自定义的判断。在基本断点命令后加上自定义调试命令&#xff0c;可以让调试器在断点触发停下来后&#xff0c;执行调试器命令。每个命令之间用分号分割。语法格式如:…

还不知道这 11 个超酷的编程新工具你就 out 了!

工具对开发人员来说至关重要。工具可以让一个开发人员的日常工作更高效&#xff0c;并且只需要关注最重要的事情。对于开发人员来讲&#xff0c;寻找更好的替代工具往往比坚持使用熟悉过时的工具更困难。 在这篇文章中&#xff0c;我们将列出你在日常工作中能够使用的新的开发工…

thinkphp5 异步调用方法_thinkphp5 swoole 执行异步任务

目录结构&#xff1a;服务器端&#xff1a;/**author:hdj*/namespace app\Console;use think\console\Command;use think\console\Input;use think\console\Output;class Websocket extends Command{protected $server;protected function configure(){$this->setName(webso…

python单击url下载网页文件_使用不带url的python脚本从网页下载文件,调用onClick函数 - javascript...

有一个网页带有链接“单击下载”&#xff0c;单击该链接可以下载文件。 我可以通过转到网页并单击此链接来手动下载此文件&#xff0c;但是我需要通过python脚本下载此文件。 如果我看到源代码&#xff0c;则可以看到锚标记将运行js函数 Download in csv 但是我不知道csv文件的…

Linux装多个apache,windows linux如何安装多个apache?

富国沪深Windows下安装多个Apache服务&#xff1a;1.安装好Apache以后&#xff0c;可以在浏览器中输入http://localhost测试&#xff1b;2.更改第一个站点的根目录&#xff1a;在文件Apache2.2\conf\httpd.conf中查找 DocumentRoot 属性&#xff0c;将后面的路径改为你的主站点…

[Abp 源码分析]DTO 自动验证

点击上方蓝字关注我们0.简介在平时开发 API 接口的时候需要对前端传入的参数进行校验之后才能进入业务逻辑进行处理&#xff0c;否则一旦前端传入一些非法/无效数据到 API 当中&#xff0c;轻则导致程序报错&#xff0c;重则导致整个业务流程出现问题。用过传统 ASP.NET MVC 数…