vue-cli3 导入.md文件，vue中markdown文件的解析与渲染

最新推荐文章于 2024-04-22 10:56:08 发布

HappyBiblee

最新推荐文章于 2024-04-22 10:56:08 发布

阅读量775

点赞数 2

分类专栏： Vue插件文章标签： vue.js javascript

本文链接：https://blog.youkuaiyun.com/yeziyuCoder/article/details/120289970

版权

本文介绍如何在Vue CLI3项目中导入并渲染.md文件。通过在package.json添加依赖，然后配置vue.config.js，可以实现.md文件的支持，包括渲染引用块样式和Vue组件的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

package.json文件中添加以下依赖，然后重新运行npm install

"vue-template-compiler": "2.6.10",
"github-markdown-css": "^4.0.0",
"highlight.js": "^10.5.0",
"html-loader": "^1.3.2",
"markdown-it": "^12.0.4",
"markdown-it-container": "^3.0.0",
"markdown-loader": "^6.0.0",
"vue-loader": "^15.9.6",
"vue-markdown-loader": "^2.4.1"

vue.config.js中添加以下配置：

module.exports = {
   
  chainWebpack: config => {
   
    config

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

HappyBiblee

关注关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

基于vue-cli4.*开发的UI库（极光UI）《二》

禅思院

12-17

3392

在工程中加入markdown 库 npm install -D markdown-it markdown-it-anchor markdown-it-chain markdown-it-container, transliteration 使用highlight.js高亮代码 npm install -D highlight.js 清除 aurora-ui/examples下无用的目录和文...

如何在 Vue 中解析和渲染 Markdown

厦门在乎科技

09-15

2908

HTML是超文本标记语言的缩写，可能是当今网络上使用最多的标记语言。Markdown在我们程序界也是一个必备的技能。我们可以使用 makrdown来渲染文本，它实际上是一种更快的写作方式，因为它学习成本很低，不需要掌握很多知识就可以开始。如果你的想写博客，甚至想作为技术作家写作时，Markdown 是你首先的写作工具。本文主要介绍如果在 Vue 中使用 Markdown，废话说了很多了，我们就这开始按摩。为什么使用Marked.js库 Vue 没有像React 那么多 MD 的插件。如...

参与评论您还未登录，请先登录后发表或查看评论

vue-cli3项目展示本地Markdown文件的方法

12-11

【版本】 vue-cli3 webpack@4.33.0 【步骤】1、安装插件vue-markdown-loader npm i vue-markdown-loader -D ps：这个插件是基于markdown-it的，不需要单独安装markdown-it。 2、修改vue.config.js配置文件（如果没有，在项目根目录新建一个）： module.exports = { chainWebpack: config => { config.module.rule('md') .test(/\.md/) .use('vue-loader') .loader(

vue3引入md文件

Hero_rong的博客

04-22

1232

vue3中使用 vite-plugin-md解析 md 文档并展示，因为项目是通过vite构建的，所以我们使用vite-plugin-md解析

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 : {

Vue md编辑器的使用及md的渲染

菜虚鲲的博客

01-07

1265

<template> <div> <mavonEditor v-model="markdown" :codeStyle="codeStyle"></mavonEditor> <div v-html="compiledMarkdown"></div> </div> </template> <script> // 编辑 import { mavonEditor } from '.

一站式解决vue解析markdown,代码高亮,目录获取

qq_42689380的博客

06-26

2314

解析文件安装markdown的loader cnpm i html-loader markdown-loader --save-dev 在vue.config.js文件内添加配置,添加完后需要重新启动项目 module.exports = { chainWebpack: config => { config.module .rule('md') .test(/\.md/) .use('html-loader') .loader('html-

vue3 v-md-editor markdown编辑器（VMdEditor）和预览组件（VMdPreview ）的使用

10-17

V-Md-Editor依赖于@vuepress/core，因为它使用了其中的Markdown解析和渲染功能。现在，在你的`src/App.vue`或新建的组件中引入V-Md-Editor和VMdPreview。在`<template>`部分，你可以这样使用它们： ```html ...

vue-cli3.0后台管理模板.zip

最新发布

12-01

cli3.0后台管理模板基于vue3.0实现后台管理模板通过自己所学的vue知识，从0开始自己搭建的一个关于后台管理的模板界面，有时间就会更新新的内容，实现一些常用的功能，使用vue最新脚手架搭建环境，编写界面，使用...

vue-element-admin-master3.9.3.zip

03-01

9. **vue.config.js**：Vue CLI 的配置文件，可以自定义项目的构建设置。 Vue.js 的特点是声明式渲染，允许开发者通过声明式语法来处理DOM更新，简化了DOM操作。ECMAScript（ES）是JavaScript的标准化规范，随着ES6...

静态markdown渲染框架VuePress之路

weixin_61387700的博客

08-24

630

Vue版的markdown静态网站生成器

Vue引入并使用md文件方法

qq_32530255的博客

04-11

3184

第一步：在Vue项目中安装以下依赖： cnpm i markdown-loader html-loader --save cnpm i showdown --save 第二步：在build/webpack.base.conf.js文件中做如下配置：（配置在module里边） { test: /\.md$/, use: [ { loader: 'html-loade...

在vue中使用marked解析markdown文件

♀我爱摇滚，更爱金属乐♀

11-26

2788

1、安装marked npm install marked 2、在Vue中引用 <template> <div> <div v-html="output" class="html_output"></div> </div> </template> <script> import { marked } from "marked"; // 局部导入marked包 export default { nam

Vue解析markdown，并将其展示到页面(代码高亮 + 显示代码行号)

冥丶小虎牙的博客

03-16

8057

Vue解析markdown，并将其展示到页面(代码高亮 + 显示代码行号)，具体步骤如下：安装依赖在vue项目下打开命令窗口，并输入以下命令：// marked 用于将markdown转换成html npm install -g marked // 用于代码高亮显示 npm install highlight.js // 代码行号显示插件 npm install highlightjs-line-numbers.js 在main.js文件中引入highlight.jsimport hljs f

vue-cli3解析并展示本地Markdown文件

前端开发

01-22

921

展示本地Markdown文件

Vue3中Markdown文件的直接渲染以及锚点跳转

qq_40850482的博客

03-09

1827

markdown文件在vue3中的直接渲染

Vue3：显示 markdown 文档

苦作舟的空城机

07-18

7035

平时自己的 markdown 文档如何放在网页上，那么就需要将其转换成 html 文本，这次使用了 v-md-editor 库在 vue3 中进行转换

vue cli 3.0中markdown富文本编辑插件

七亿少女的劫丨

08-26

2247

vue 3.0中使用mavon-editor1.执行2.在main.js中全局引入mavon-editor3.在组件中使用mavon-editor4. 运行效果 1.执行 npm install mavon-editor --save 2.在main.js中全局引入mavon-editor import mavonEditor from 'mavon-editor' import 'mavon-...

Vue 渲染带script标签的内容

qq_36126031的博客

07-25

2187

后端返回一个带有标签的字符串，前端去展示，项目前端架构为vue2，尝试使用v-html，but v-html不支持script标签，会令其失效...