md-loader

最新推荐文章于 2022-09-27 19:48:25 发布
最新推荐文章于 2022-09-27 19:48:25 发布
阅读量904 收藏
点赞数
分类专栏： 前端 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/taiyi7627/article/details/121351338
版权

# md-loader

## 组件文档是如何渲染出来

文档用于描述系统功能，而组件文档描述组件的功能，对于前端组件为了直观体现一般会有一个预览模块，而一般组件文档都是采用markdown编写，而md是文本内容且并没有渲染组件代码的能力，那么这是如何做的呢？

简单的说就是“**自定义结构**”，像element-ui中对代码的描述为`<!--element-demo: YOU_CODE :element-demo—->`，中间的`YOU_CODE`可以放简单的vue组件代码。

这种结构通常都需要单独的提取方式，而提起过程如下：
xx.md -> markdown-it -> 解析结构 -> 提取code  -> 转换组件代码  -> render

不不才
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack loader—在md文件中写vue
站在原型链顶端的男人
07-25 1668
一、需求 一般在开发公司内部或者自己的组件库的时候，往往需要编写一些demo用来调试组件， 然后在编写文档的时候，我们又需要给对应的组件编写示例代码和demo，就显得很麻烦。 所以我想把两件事一起做了！ 二、思路 1、把文档中的示例代码run起来，作为我们的调试代码 2、markdown-it可以把md标记转换为html代码 3、在webpack loader中可以使用markdown-it来转换代码，将整个md文件转换为vue单文本组件 4、在loader中提取vue代码标记为子组件，然后再次请求当前
md-loader:一款使用webpack开发的用于markdown文件转换的loader
05-27
md-loader 一款使用webpack开发的用于markdown文件转换的loader webpack快速上手 初始化package.json webpack为npm的工具模块 yarn init --yes yarn add webpack webpack-cli --dev 或者写入package.json的scripts中 使用yarn build yarn webpack yarn build
vue-md-loader-Markdown文件到ALIVE Vue组件。-Vue.js开发
05-27
vue-md-loader简介Webpack加载器，用于将Markdown文件转换为ALIVE Vue组件。 可配置的Markdown-It解析器。 内置语法high vue-md-loader简介Webpack加载器，用于将Markdown文件转换为ALIVE Vue组件。 可配置的Markdown-It解析器。 带有Highlightjs的内置语法荧光笔。 现场演示支持。 对于文档示例极为有用。 热装。 示例此页面https://wxsms.github.io/vue-md-loader/是由markdown文件生成的。 来源：/ example安装NPM：npm安装vue-md-loader --save-dev纱线：yarn add vue-md-loader --dev用法基础只需使用vue-md-loade
md-vue-loader:Webpack加载器，用于将Markdown编译为Vue
05-01
md-vue-loader md-vue-loader是一个Webpack加载器，用于将Markdown文件作为Vue组件导入。 :person_raising_hand: 为什么？ :raising_hands: 从与Vue公司的任何版本兼容解耦（ / vue-template-compiler ）！ :woman::artist_palette: Vue代码渲染将Vue代码块渲染为嵌入式演示！ :gear: 可定制的将您的演示配置为语法突出显示或包装在任何组件中！ :rocket: 安装 npm i -D md-vue-loader :vertical_traffic_light: 快速设置 添加到您的Webpack配置中： module.exports = { module: { rules: [ + { + test: /\.md.vue$/, + use: [ + 'vue-loader', +
vue-md-loader：Markdown文件到ALIVE Vue组件
02-04
vue-md-loader 介绍 Webpack加载器，用于将Markdown文件转换为ALIVE Vue组件。 可配置的解析器。 内置带有语法。 现场演示支持。 对于文档示例极为有用。 热装。 例 该页面由markdown文件生成。 来源： 安装 NPM： npm install vue-md-loader --save-dev 纱： yarn add vue-md-loader --dev 用法 基本的 只需使用vue-md-loader加载.md文件并将其与vue-loader 。 module . exports = { // ... module : {
vite-loader-md
04-05
vite-loader-md vite插件：支持md格式文件编译为vue src文件夹为插件 示例文件夹为实例程序 // vite.config.js import mdComplier from "squid-vite-md" ; module . exports = { plugins : [ mdComplier ( ) ] , } ;
ElementUI 组件库 md-loader 的解析和优化
u012384510的博客
11-10 1645
大家好，我是若川。最近组织了源码共读活动，感兴趣的可以加我微信ruochuan12参与，已进行三个月了，大家一起交流学习，共同进步。背景相信很多同学在学习 webpack 的时候，对 ...
[md-loader]使用md来编写vue组件库文档
qq_39211165的博客
08-28 1703
- 当前项目公共组件比较多，需要一个文档来描述 - 希望轻量化，没有额外资源部署一个文档项目，即内嵌在开发项目中
asp.net 安装element ui_Vue组件库系列三：打造属于自己的 UI 库文档（新版本的方案）...
weixin_39950010的博客
11-24 165
上一章介绍了element-ui老版本中md文档构建过程，如果大家认真看了，就会发现在.md文档中还是有一些重复的部分，怎样使文档看着更加简洁，操作更加方便，饿了么团队下了很大的力气做了探索，现在我们一起分享这个成果我们先来看看input.md新文档是怎么写的对比老版本的input.md文档，我们发现少了最开始的，但是我们操作页面，发现JavaScript交互仍然是正常的，页面底部也未报错，说明原...
加载.md文件
叶小桃的博客
09-27 1829
webpack是不能直接加载.md文件的，但是一些博客或者文章指导类的内容通过markdown进行编辑管理是比较常见的，这就需要我们进行一些配置，使webpack能够加载.md文件，并将文件内容展示到网页上。
vue 加载展示md文件（markdown语法 .md后缀的文件）
朝阳39的博客
01-28 3062
目录 1. 安装依赖包 2. 在vue.config.js中添加配置 3. 导入样式 4. 导入md文件 5. 注册为组件 6. 在页面中使用 最终效果 1. 安装依赖包 npm i vue-markdown-loader -D npm i vue-loader vue-template-compiler -D npm i github-markdown-css -D npm i highlight.js -D 若报错Vue packages version mis...
vue:无法将“vue”识别为脚本_使用WebPack将MD文件解析为Vue组件
weixin_39738273的博客
12-04 187
https://github.com/Linkontoask/md2vue-loader​github.com本文适合对webpack有一丁点了解的同学，因为会涉及到loader的编写。不过不用害怕，因为webpack的loader并不复杂，我们只需要了解一点基础即可。传送门 [编写一个loader](https://webpack.docschina.org/contribute/writing...
Element UI 组件库分析和二次开发（二）
huangpb的博客
11-21 1324
一、 Makefile 文件 Make是最常用的构建工具，它的规则配置一般写在 Makefile 文件里。make 的使用有点像 package.json 里的 scripts，把一段长命令用一段短命令来执行。 Makefile文件由一系列规则（rules）构成。每条规则的形式如下。 <target> : <prerequisites> [tab] <commands> 上面第一行冒号前面的部分，叫做"目标"（target），冒号后面的部分叫做"前置条件
webpack的几个常见loader源码浅析，以及动手实现一个md2html-loader
frontend_frank的博客
04-19 728
前言本文会带你简单的认识一下webpack的loader，动手实现一个利用md转成抽象语法树，再转成html字符串的loader。顺便简单的了解一下几个style-loader，vue-...
MD文件转换html的方法 （loader的应用）
qq_37523156的博客
12-22 374
MD文件转换html的方法 （loader的应用） 来源：小白 时间：2020年12月22日11:52:32 采用vue-markdown-loader 提供脚手架CLI/2.+，以及CLI/3.+的方式 难度：简单 1.安装插件vue-markdown-loader npm install vue-markdown-loader -D 安装npm包vue-markdown-loader -D （-D就是–save-dev） 会存在package.json的devDepend..
Vue加载.md格式组件核心代码
ur home
01-15 793
参考vue-markdown-loader 参考Element源码系列——Vue加载Markdown格式组件上篇 （如有侵权，请联系本人，会尽快修改） 愿意：开发一套内部ui组件库，适用于B、S 不废话，直接开始 1.项目是基于ts、vue2.x 2.安装相关依赖 markdown-it 渲染 markdown 基本语法 markdown-it-anchor 为各级标题添加锚点 markdown-it-container 用于创建自定义的块级容器 vue-markdown-loader 核心loader t
自己撸个 vue markdown loader
田较瘦的专栏
04-29 4816
最近，当我把 vue-loader 升级到 v15 后发现，自己项目中所使用的一个 vue-markdown-loader 因为兼容问题而没法用了，正当我一筹莫展的时候，无意间看到 vuepress 中使用了当时还处于 v15.0.0 rc 版本的 vue-loader,仔细研究其源码后发现，vuepress 对于 markdown 的支持相当完善，而且代码也规范易懂。于是心生一计，把里面部分相关...
vue展示md文件
认真和努力总没有错
06-28 7753
先安装插件，可以用来编辑md文件，和展示文件： npm install mavon-editor -S 在全局中引用 // 引入makrdown插件 import mavonEditor from 'mavon-editor' import 'mavon-editor/dist/css/index.css' Vue.use(mavonEditor) 然后，你发现导入的md文件报错...
Vue引入并使用md文件方法
小破孩的博客
06-26 6198
第一步：在Vue项目中安装以下依赖： cnpm i markdown-loader html-loader --save cnpm i showdown --save 第二步：在build/webpack.base.conf.js文件中做如下配置：（配置在module里边） { test: /\.md$/, use: [ { loader: 'html-load...
markdown-loader
最新发布
09-06
Markdown-loader是一个用于Webpack构建工具的加载器（loader），用于处理Markdown文件。它可以将Markdown文件转换为HTML或其他格式，并将其作为模块导入到应用程序中。 使用markdown-loader，您可以在Webpack配置...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值