一种基于Webpack解析含有Vue组件的Markdown的方法技术

技术编号：41182214 阅读：5 留言：0更新日期：2024-05-07 22:16

本发明专利技术涉及一种基于Webpack解析含有Vue组件的Markdown的方法。本方法包括：基于Webpack编写自定义Markdown Loader，首先新建一个Loader文件夹，并在其目录下创建一个工具类index.js文件，然后通过npm安装markdown‑it插件，导出一个Vue组件结构代码；在Loader文件夹目录下新建一个config.js，然后使用npm安装markdown‑it‑container和markdow‑it‑chain插件，完成自定义Markdown Loader的构建；需要解析含有Vue组件的Markdown文件时，先通过npm安装上述的自定义Markdown Loader，然后更改根目录下vue.config.js的配置，引入编写的my‑markdown‑loader处理Markdown文件，最后执行打包构建命令。本方法能够快速解析Markdown文件并对其含有的Vue组件进行渲染，且只需引用一个Loader就可以同时执行解析和渲染的功能，操作流程简单，使用非常便捷。

全部详细技术资料下载

【技术实现步骤摘要】

本专利技术属于markdown解析方法，尤其涉及一种基于webpack解析含有vue组件的markdown的方法。

技术介绍

1、在vue项目(基于vue.js框架的前端项目)开发中，在解析markdown文件(md文件)的时候，需要特定的markdown loader进行处理，但当markdown中的内容包含组件信息需要在html中渲染显示时，当前webpack提供的markdown loader并不具备满足该应用需求的相应功能，需要额外引用专门的loader组合才能够进行显示。

2、针对此问题，传统的处理方式主要有以下两种：方法一：通过markdown loader解析为html后，vue组件内容再利用vue loader进行处理；方法二：由专门编写的markdownloader统一解析和编译vue组件信息，然后渲染到页面上。上述处理方式均具有一定的不足，方法一的不足是webpack提供的loader功能单一，无法满足一些自定义的功能处理需求；方法二的不足是必须确保安装该自定义loader，配置过程比较复杂，需要改动原有的vue.config.js里的配置。

技术实现思路

1、为了克服现有的含有vue组件的markdown解析方法存在的上述不足，本专利技术提出了一种新的基于webpack解析含有vue组件的markdown的方法。本方法通过编写自定义markdown loader，快速实现了markdown文件的解析和将其含有的vue组件信息渲染到页面上。

<p>2、具体地，本专利技术提供了一种基于webpack解析含有vue组件的markdown的方法，如图1所示，本方法包括以下步骤：

3、s1.基于webpack编写自定义markdown loader，首先新建一个loader文件夹，并在其目录下创建一个工具类index.js文件，然后通过npm安装markdown-it插件，导出一个vue组件结构代码；

4、s2.在loader文件夹目录下新建一个config.js，然后使用npm安装markdown-it-container和markdow-it-chain插件，完成自定义markdown loader的构建；

5、s3.需要解析含有vue组件的markdown文件时，先通过npm安装上述的自定义markdown loader，然后更改根目录下vue.config.js的配置，引入编写的my-markdown-loader处理markdown文件，最后执行打包构建命令。

6、进一步地，本专利技术基于webpack解析含有vue组件的markdown的方法步骤s2中所述的在loader文件夹目录下新建的config.js中包含了对markdown文件中vue组件信息的解析操作。

7、进一步地，本专利技术基于webpack解析含有vue组件的markdown的方法中所述的对markdown文件中vue组件信息的解析操作，包括：

8、(1)通过require引入markdown-it-container插件来解析markdown文件中vue组件的内容；

9、(2)通过require引入markdow-it-chain插件来进行vue组件信息的导出。

10、进一步地，本专利技术基于webpack解析含有vue组件的markdown的方法中由config.js导出的vue组件信息发送给vue-loader进行vue组件编译，vue-loader解析出vue组件信息的结构代码，然后进行页面渲染。

11、另外，本专利技术还提供了一种计算机可读存储介质，所述存储介质上存储有计算机程序，所述程序被处理器执行时实现上述的基于webpack解析含有vue组件的markdown的方法的步骤。

12、综上，本专利技术基于webpack解析含有vue组件的markdown的方法通过自定义工具loader解析和处理含有vue组件的markdown文件，本方法具有以下特点：

13、(1)本专利技术方法便于ui组件文档的编写和组件展示。

14、(2)本专利技术方法能够快速解析markdown文件并对其含有的vue组件进行渲染。

15、(3)本专利技术方法只需引用一个loader就可以同时执行解析和渲染的功能，操作流程简单，使用非常便捷。

本文档来自技高网...

【技术保护点】

1.一种基于Webpack解析含有Vue组件的Markdown的方法，其特征在于，所述方法包括：

2.根据权利要求1所述的基于Webpack解析含有Vue组件的Markdown的方法，其特征在于，步骤S2中所述的在Loader文件夹目录下新建的config.js中包含了对Markdown文件中Vue组件信息的解析操作。

3.根据权利要求2所述的基于Webpack解析含有Vue组件的Markdown的方法，其特征在于，所述的对Markdown文件中Vue组件信息的解析操作，包括：

4.根据权利要求3所述的基于Webpack解析含有Vue组件的Markdown的方法，其特征在于，由config.js导出的Vue组件信息发送给Vue-Loader进行Vue组件编译，Vue-Loader解析出Vue组件信息的结构代码，然后进行页面渲染。

5.一种计算机可读存储介质，所述存储介质上存储有计算机程序，所述程序被处理器执行时实现权利要求1-4任一项所述的基于Webpack解析含有Vue组件的Markdown的方法的步骤。

【技术特征摘要】

1.一种基于webpack解析含有vue组件的markdown的方法，其特征在于，所述方法包括：

2.根据权利要求1所述的基于webpack解析含有vue组件的markdown的方法，其特征在于，步骤s2中所述的在loader文件夹目录下新建的config.js中包含了对markdown文件中vue组件信息的解析操作。

3.根据权利要求2所述的基于webpack解析含有vue组件的markdown的方法，其特征在于，所述的对markdown文件中vue组件...

【专利技术属性】
技术研发人员：陈俊如，沈杰，龚益，冯锦辉，叶圣强，耿惠莉，
申请(专利权)人：中电云计算技术有限公司，
类型：发明
国别省市：

全部详细技术资料下载我是这个专利的主人