npm 包 vue-marked-loader 使用教程

阅读时长 4 分钟读完

在 Vue.js 中使用 Markdown 来编写文档、博客等,已成为前端开发者的常用方式。而 vue-marked-loader 可以让我们更方便地将 Markdown 转换成 HTML ,并嵌入到 Vue 的组件中使用。本文将详细介绍 vue-marked-loader 的使用教程。

vue-marked-loader 组件的安装

首先,我们需要将 vue-marked-loader 安装到我们的项目中。使用以下命令行:

其中,-D 参数代表该依赖为开发时依赖。

vue-marked-loader 的使用

  1. 首先,在我们的 .vue 文件中使用 <template lang="markdown"> 标签来标识该组件使用 Markdown 语言编写。
  1. 在使用 Markdown 编写的内容中,我们可以使用 Vue 组件。
-- -------------------- ---- -------
--------- ----------------
- ----- --- ---------
-----------------------------
-----------

--------
------ ------- -
  ----------- -
    -----------
  -
-
---------
  1. 在使用 vue-marked-loader 转换 Markdown 为 HTML 之前,我们需要配置一些选项。在 vue.config.js 文件中添加以下代码:
-- -------------------- ---- -------
-------------- - -
  ------------- ------ -- -
    -------------
      -----------
      --------------
      ------------------
      ---------------------
      ------
      ---------------------------
      ----------------------------------------------------
      ----------
        ---- ----
      --
  -
-
  1. 最后,在使用 Vue CLI 3 构建项目或者使用 Webpack 打包项目时,vue-marked-loader 将自动将 Markdown 转换为 HTML ,并嵌入到 Vue 组件中,使用方式如下:
-- -------------------- ---- -------
----------
  -----
    ------ ----- -------
    ---- ---------------------------------------------------
  ------
-----------

--------
------ ------- ---- ----------------------

------ ------- -
  ---- -- -
    ------ -
      ------ --- --------
    -
  --
  --- -
    --------------------- -------
  -
-
---------

注意事项

  1. 基于 vue-loader v15 的版本,安装 vue-markdown-loader 需要指明 loader ,即 vue-markdown-loader/lib/markdown-compiler

  2. 在使用 vue-marked-loader 转换 Markdown 时,需要配置 raw: true

结语

在 Vue.js 中使用 Markdown 可以让我们更快速地编写文档、博客等内容。vue-marked-loader 可以让我们更方便地使用 Markdown ,并将其嵌入到 Vue 组件中使用。希望通过本文的介绍,可以帮助大家更好地使用 vue-marked-loader 。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005518181e8991b448ced44

纠错
反馈