江苏龙网

  1. 首页 > 人文 > >

elementUI文档的实现方案


elementUI文档的实现方案
本文插图
背景
我们公司有一个自己维护的应用组件库 ， 但是应用组件库的文档不足 ， 同时还不能在线运行栗子 ， 看了看ElementUI的文档还不错 ， 参考(抄袭)ElementUI的实现方案来编写公司内部的组件说明文档 。
ElementUI文档的整体思路
把用markdown写的文档拼接成vue文件(这个通过他们自己写的md-loader处理) ， 这个vue文件和我们平时开发项目的vue组件类型(类似...),再通过vue-loader处理 。
webpack是如何配置的 (v2.13.2)
首先我们查看ElementUI的package.json文件中的scripts传送门
''scripts'':{ ''dev'':''...webpack-dev-server--configbuild/webpack.demo.js...'', }通过上图的标注 ， 我们可以知道ElementUI的文档生成的webpack在build/webpack.demo.js里面 ， webpack.demo.js可以看到webpack是如何处理md文件的 ， md后缀的文件先通过md-loader处理后 ， 再通过vue-loader处理 webpack.demo.js传送门
//... { test:/.md$/, use:[ { loader:'vue-loader', options:{ compilerOptions:{ preserveWhitespace:false } } }, { loader:path.resolve(__dirname,'./md-loader/index.js') } ] }, //...md-loader是如何工作的 (v2.13.2)
首先找到md-loader的入口文件index.js传送门, 里面的关键代码如下：
const{ stripScript,//提取script stripTemplate,//提取template genInlineComponentText//生成行内组件代码 }=require('./util'); constmd=require('./config');//markdown编译器,下面的‘markdown文件如何解析与vuedemo代码标记’详细讲解 module.exports=function(source){ constcontent=md.render(source);//经过md编译好的代码 //content里面vue在线栗子的代码被//... //循环提取出里的vuecode while(...){ varcommentContent=content.slice(commentStart+startTagLen,commentEnd);//vuecode consthtml=stripTemplate(commentContent);//提取html constscript=stripScript(commentContent);//提取js letdemoComponentContent=genInlineComponentText(html,script);//把html,和js组成组件代码. constdemoComponentName=`element-demo${id}`;//demo组件名 output.push(``);//插入组件 componenetsString+=`${JSON.stringify(demoComponentName)}:${demoComponentContent},`;//追加组件字符串 } if(componenetsString){//这是script字符串 pageScript=` `; } return`${output.join('')}//这是md转的html ${pageScript} `; };markdown文件如何解析与vue demo代码标记
首先找到上述代码const md = require('./config');中的文件传送门, 看这个文件的内容再结合package.json里面的依赖 ， 我们可以得知markdown的解析依赖这些开发包markdown-it(markdown解析器), markdown-it-anchor(锚点插件,用于段落跳转), markdown-it-chain(用于链式调用,参考webpack-chain) , markdown-it-container(自定义包裹元素插件识别remarkdown 语法:::)
config.js
constConfig=require('markdown-it-chain'); constcontainers=require('./containers');//里面使用markdown-it-container把语法为:::info=>//... constconfig=newConfig(); //...一些配置,配置container/anchor constmd=config.toMd(); module.exports=md;containers.js
//... render(tokens,idx){ constm=tokens[idx].info.trim().match(/^demos*(.*)$/);//elementUI文档里面 ， vuedemo都是用:::demovuecode:::包裹着 if(tokens[idx].nesting===1){//匹配到:::demoxxxx替换成return的字符串 constdescription=m&&m.length>1?m[1]:''; constcontent=tokens[idx+1].type==='fence'?tokens[idx+1].content:'';//content是vuecode代码 return`${description?`${md.render(description)}`:''} `; } return'';//匹配到:::,替换成return的字符串 } //...通过上述的代码功能主要为 把 :::demo xxxx code ::: 转换成xxx code(转义后的代码)


推荐阅读


上一篇：磁器口|洪水过后连日清淤 重庆主城这些地方“美丽归来”

下一篇：新民晚报|视频 | 网恋男友讨要开业花篮 谁知竟是诈骗犯