如何使用Vue和Markdown实现博客功能

最新推荐文章于 2025-03-13 13:49:19 发布
最新推荐文章于 2025-03-13 13:49:19 发布
阅读量289 收藏
点赞数
分类专栏： vue.js 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xiubinxu/article/details/139300781
版权
本文介绍如何利用Vue.js框架结合Markdown，构建一个博客系统。首先，创建Vue项目并安装相关依赖，接着配置Vue项目以支持Markdown解析。然后，创建Markdown组件，并在Vue组件中引入和使用。最后，通过设置路由来展示Markdown编写的博客内容。

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

创建Vue项目和安装依赖

npm install -g @vue/cli
vue create vue-blog
cd vue-blog
npm install vue-markdown-loader --save-dev

配置Vue项目以解析Markdown
在 vue.config.js 文件中添加以下配置：

module.exports = {
   
  chainWebpack
了解本专栏 订阅专栏 解锁全文 超级会员免费看
Vue项目引入Markdown文档、自定义锚点跳转和图片加载问题解决
桉屿念汐
05-21 2899
Vue项目引入Markdown文档，主要涉及到在Vue应用中使用Markdown语言来编写和展示内容。像我们在写用户操作手册或者项目changeLog时，可以直接写成Markdown形式，然后引入到页面中，方便用户查看。
使用vue组件和markdown文件的单个静态博客生成器
08-10
在创建“使用Vue组件和Markdown文件的单个静态博客生成器”时，我们可以利用Vue.js的强大功能和Markdown的简洁易读特性，构建一个高效、灵活的博客系统。 首先，Vue组件是Vue.js中的基本构建块，可以看作是自包含的...
Vue Markdown 编辑器全攻略：轻松集成 MD 编辑器到前端项目
最新发布
算法探险家的博客
03-13 2400
v-md-editor 提供了丰富的配置项和插件支持，你可以根据项目需求进行个性化定制。工具栏定制：通过配置工具栏图标、按钮等，提升用户体验；扩展 Markdown 语法：添加自定义语法解析器，满足特殊业务需求；主题切换：除了 GitHub 主题，还可以使用其他官方或自定义主题实现风格切换。详细配置和插件使用可以参考v-md-editor 官方文档。安装与依赖配置：快速引入编辑器、主题及代码高亮库；全局注册与初始化：在入口文件中配置全局使用；组件中应用。
vue项目嵌入markDown插件
做GIS梦的人
02-24 1546
因为，需要在vue项目中实现markdown的编辑与展示，调研了很多markdown的编辑插件和一些富文本编辑工具，最后还是选择了mavonEditor，比较简洁，需要基本可以满足 安装 npm install mavon-editor --save 使用 <template> <div style="width: 100%;height: 100%"> <mavon-editor v-model="value" @save="save" :toolba
（方法）vue 中展示、读取.md 文件（批量引入、自定义代码块高亮样式）
次顶级的博客
11-29 8532
vue中读取、显示.md文件，单独及批量动态显示组件
vue实现全局函数以及生成md文档目录和html文件
红岸基地
01-01 1693
文章目录vue实现全局函数以及生成md文档目录和html文件vue中写全局函数新建一个log.js文件main.js中引用页面使用md说明文档 vue实现全局函数以及生成md文档目录和html文件 vue中写全局函数 业务介绍：在前面的文章中我们介绍过如果在vue项目中创建一个全局的变量，以便于我们处理一些公共的参数，作出相应的改变与取值，喜欢的可以看一下：vuex的使用，那么其实我们在写项目的...
vue3-markdown-it::sparkles: 一个很棒的 Vue 3 markdown-it 包装插件，甚至可以支持外部插件！
07-23
:sparkles: vue3-markdown-it :sparkles: 一个很棒的 Vue 3 包装插件，甚至可以支持外部插件！ :magnifying_glass_tilted_right: 安装 npm install vue3-markdown-it 支持的插件 -而其中，一切都开始它 - 添加...
实现Vue的markdown文档可以在线运行的方法示例
12-01
markdown 文档中Vue代码 可执行啦，而且可以...这样就可以用markdown文档的形式，写自己的Vue博客了， 可以方便介绍自己的原创组件，很酷的执行。 Github https://github.com/zhangKunUserGit/vue-markdown-run DEMO ...
markdown-it-vue：markdown-it的vue库
02-04
markdown-it的Vue库。 在线演示 安装 npm install markdown-it-vue 支持 图像大小和查看器 官方降价语法。 GFM目录 GFM风格 表情符号 仅简单 Flowcharts.js 下标/上标 信息| 错误警告信息提示 插件清单 降价 ...
Vue读取本地静态.md并侧边栏导航跳转、展示.md文件
林中明月间丶
08-04 945
2、修改webpack.base.config.js，我用的cli所以自己加了一个vue.config.js。最后把图片或者这个展示的文件一起放static 静态资源目录下引入 就成功了。4、markdown文字解析到页面来，以便展示 .md里的内容能够展示出来。我的项目需求展示 .md文件 并带侧边栏跳转。
blog:博客是使用mardkown的go＆vue博客
04-13
blog blog is a go&vue blog using mardkown blog是一个基于go的后端markdown渲染服务，搭配vue实现的前端页面共同组成一个完整的个人博客发布服务 旨在提供markdown文本的博客部署服务 如果你在使用markdown写作 请尝试使用本服务 开发记录 图示 特性:flying_saucer: 完整的迁移工具链 不管你是使用纯净的markdown还是hexo格式md markdown文本的语法高亮支持 高级统计功能 支持统计总访问量，文章访问量，文章分享量，文章点赞量 支持博客留言 文章的评论功能 支持多种排序准则 可以按照自己的方式选择想要的文章显示顺序 完善的后台管理页面，方便管理者管理数据 支持新文章的上传和文章的导出功能 随时备份你的博客 多数据库支持 关系型数据库（sqlite，mysql） 缓存支持 支持redis缓存 后期将更换为我的开源项目 新特性.
Vue中如何进行Markdown文档展示与解析？
热门推荐
it_xushixiong的博客
06-13 2万+
在Vue项目中，Markdown文档的使用越来越普遍，因此在Vue中进行Markdown文档展示与解析也变得越来越重要。本文介绍了两个第三方库：vue-markdown和markdown-it，它们可以帮助我们展示和解析Markdown文档。除此之外，还介绍了一些配置选项和插件，可以帮助我们定制Markdown解析器的行为。希望本文能够对你有所帮助！
Vue生成Markdown目录（TOC）
人的生命周期还还没有代码的生命周期精彩
05-09 835
创建子组件，用于递归toc， 组件名称：MarkdownTocItem.vue。创建父级组件 组件名称：MarkdownContainer.vue。,如果你的改了引用的时候注意改下。工具类名称随意，我的叫。
Vue进阶（幺零三）：Markdown 基本语法
IT全栈 华强工作室
03-19 2672
Markdown是一种纯文本格式的标记语言。通过简单的标记语法，它可以使普通文本内容具有一定的格式。 相比WYSIWYG编辑器 优点： 因为是纯文本，所以只要支持Markdown的地方都能获得一样的编辑效果，可以让作者摆脱排版的困扰，专心写作。 操作简单。比如:WYSIWYG编辑时标记个标题，先选中内容，再点击导航栏的标题按钮，选择几级标题。要三个步骤。而Markdown只需要在标题内容前加#即...
【Vue3】 实现解析markdown字段以及文件
书呆子ITme
09-05 2640
Vue实现博客前端，需要实现markdown的解析，如果有代码则需要实现代码的高亮。 Vue的markdown解析库有很多，如markdown-it、vue-markdown-loader、marked、vue-markdown等。这些库都大同小异。这里选用的是marked。
Vue实现一个MarkDown编辑器
九路
05-18 106
Vue实现一个markdown编辑器 前段时间做项目的时候，需要一个Markdown编辑器，在网上找了一些开源的实现，但是都不满足需求 说实话，这些开源项目也很难满足需求公司项目的需求，与其实现一个大而全的项目，倒不如实现一个 简单的，易于在源码上修改的项目，核心功能都有的，以供修改使用 本文的源码地址如下https://github.com/jiulu313/HelloMarkDown 喜欢的...
基于vueBlog的个人博客系统使用指南
gitblog_00911的博客
12-19 877
基于vueBlog的个人博客系统使用指南 vueBlog vue + node + express + mongodb 个人博客系统 项目地址: https://gitcode.com/gh_mirrors/vue/vueBlo...
【VUE】vue-markdown插件实现markdown文件预览（含目录大纲展示）
VT_馒头的博客
07-17 1万+
Vue-Markdown是一个轻量级且高效的库，用于在Vue.js应用程序中渲染Markdown文本。它允许开发者以简洁的方式将Markdown的强大功能与Vue组件的灵活性相结合，提升开发效率和用户体验。vue-markdown 是一个基于 marked.js 的 Vue Markdown 插件。它是一个简单易用的 Markdown 解析器，可以方便地将 Markdown 文档解析为 HTML。它有如下特点：功能强大：支持 Markdown 语法的全部特性，例如标题、列表、链接等。
vue3使用vue-markdown
02-21
### 如何在 Vue 3 项目中使用 `vue-markdown` 为了在 Vue 3 中集成并使用 `vue-markdown` 组件，可以按照如下方法操作： #### 安装依赖 首先，在终端执行命令安装必要的 npm 包。 ```bash npm install vue-markdown-render ``` 由于 `vue-markdown` 已不再维护，推荐使用其替代品 `vue-markdown-render` 来处理 Markdown 文件渲染[^1]。 #### 修改配置文件 编辑项目的 Vite 或 Webpack 配置文件来支持 `.md` 扩展名解析。对于基于 Vite 的构建工具来说，可以在 `vite.config.ts` 添加相应的插件设置: ```typescript // vite.config.ts import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import markdown from 'vite-plugin-md' export default defineConfig({ plugins: [ vue(), markdown() ] }) ``` 这段代码引入了用于加载和编译 Markdown 文件的插件[^4]。 #### 创建组件 创建一个新的单文件组件 (SFC)，比如命名为 `MarkdownViewer.vue`，并将它加入到应用中的其他部分作为子组件使用。 ```html <!-- src/components/MarkdownViewer.vue --> <template> <section v-html="compiledMarkdown"></section> </template> <script setup lang="ts"> import { ref, computed, watchEffect } from 'vue'; import * as marked from 'marked'; const props = withDefaults(defineProps<{ source?: string; }>(), { source: '' }); const compiledMarkdown = computed(() => marked(props.source)); watchEffect(() => console.log('Compiled:', compiledMarkdown.value)); </script> ``` 此 SFC 使用了来自 `props` 属性传递的内容字符串，并通过计算属性将其转换成 HTML 片段显示出来[^3]。 #### 注册全局或局部组件 最后一步是在根实例或者其他父级组件里注册这个新定义好的 `MarkdownViewer` 组件以便于后续调用。 如果希望在整个应用程序范围内都能访问该组件，则可以通过扩展默认导入的方式实现全局注册；反之亦然，仅需在特定页面内声明即可完成局部范围内的引用。 ```javascript // main.ts import { createApp } from 'vue' import App from './App.vue' import MarkdownViewer from './components/MarkdownViewer.vue' createApp(App).component('MarkdownViewer', MarkdownViewer).mount('#app') ``` 这样就完成了整个流程，现在应该能够在任何地方轻松嵌入 Markdown 文本并正确展示出来了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值