在 Vue.js 中使用 Markdown 来编写文档、博客等,已成为前端开发者的常用方式。而 vue-marked-loader 可以让我们更方便地将 Markdown 转换成 HTML ,并嵌入到 Vue 的组件中使用。本文将详细介绍 vue-marked-loader 的使用教程。
vue-marked-loader 组件的安装
首先,我们需要将 vue-marked-loader 安装到我们的项目中。使用以下命令行:
npm i vue-marked-loader -D
其中,-D 参数代表该依赖为开发时依赖。
vue-marked-loader 的使用
- 首先,在我们的 .vue 文件中使用
<template lang="markdown">
标签来标识该组件使用 Markdown 语言编写。
<template lang="markdown"> # Hello Vue </template>
- 在使用 Markdown 编写的内容中,我们可以使用 Vue 组件。
-- -------------------- ---- ------- --------- ---------------- - ----- --- --------- ----------------------------- ----------- -------- ------ ------- - ----------- - ----------- - - ---------
- 在使用 vue-marked-loader 转换 Markdown 为 HTML 之前,我们需要配置一些选项。在
vue.config.js
文件中添加以下代码:
-- -------------------- ---- ------- -------------- - - ------------- ------ -- - ------------- ----------- -------------- ------------------ --------------------- ------ --------------------------- ---------------------------------------------------- ---------- ---- ---- -- - -
- 最后,在使用 Vue CLI 3 构建项目或者使用 Webpack 打包项目时,vue-marked-loader 将自动将 Markdown 转换为 HTML ,并嵌入到 Vue 组件中,使用方式如下:
-- -------------------- ---- ------- ---------- ----- ------ ----- ------- ---- --------------------------------------------------- ------ ----------- -------- ------ ------- ---- ---------------------- ------ ------- - ---- -- - ------ - ------ --- -------- - -- --- - --------------------- ------- - - ---------
注意事项
基于 vue-loader v15 的版本,安装 vue-markdown-loader 需要指明
loader
,即vue-markdown-loader/lib/markdown-compiler
。在使用 vue-marked-loader 转换 Markdown 时,需要配置
raw: true
。
结语
在 Vue.js 中使用 Markdown 可以让我们更快速地编写文档、博客等内容。vue-marked-loader 可以让我们更方便地使用 Markdown ,并将其嵌入到 Vue 组件中使用。希望通过本文的介绍,可以帮助大家更好地使用 vue-marked-loader 。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005518181e8991b448ced44