vue导入.md文件的步骤(markdown转HTML)

前言

  刚接到这个需求的时候,觉得很简单(的确很简单)但是这玩意的坑真的也让人无奈。

  网上找了很多的资料,都没有写出痛点(这就很难过了)。通过实践并且在我们项目中平稳运行,想分享给后面的人

  我的博客上也写了100多篇文章,点击量有上万的也有个位数的,能够帮助到他人这就是写作记录的动力。

需求

  vue项目中可以良好展示markdown(只是展示功能 没有编辑功能)

痛点问题

  1. .md文件类型,直接模块加载(只有字符串,这得多难受,怎么维护呢),还是一个文件一个文件的好维护并且好修改复用
  2. 用第三方插件,只是md转HTML,不带样式的(重点强调 没有样式没有样式)

解决方案

一、vue需要有markdown这样良好的展示效果,什么样的插件是最好的?

  货比三家,我推荐以下方式

//安装
npm install --save html-loader;
npm install -- save markdown-loader;

//webpack
 {
   test: /\.md$/,
   loader: "html-loader",
 },
 {
   test: /\.md$/,
   loader: "markdown-loader"
 }

  大坑预警:我不知道在哪里抄的配置,一定不要配置option(配置了的话表格 代码 都不能好好转化)

  以上真的就完成了转化了。是不是so easy !!! 再来换个皮肤(穿上衣服)

二、一定要引用CSS,找了很多样式真的都特别的丑(当然可以自己写,但是费时间啊)

  强烈推荐

npm install github-markdown-css
import 'github-markdown-css'; //哪里用markdown 就在哪里引用 可以放在min.js

//自己也可以再调整调整 (贡献一版 我们调整的一版样式)
.markdown-body {
 padding: 20px;
 min-width: 200px;
 max-width: 900px;
 font-size: 12px;
 h2 {
 font-size: 18px;
 margin: 1em 0 15px;
 padding-top: 0.8em;
 padding-bottom: 0.8em;
 }
 h3 {
 font-size: 14px;
 margin: 22px 0 16px;
 }
 h4 {
 font-size: 13px;
 margin: 20px 0 16px;
 }
 h5 {
 font-size: 12px;
 margin: 16px 0 16px;
 font-weight: 700;
 }
 p {
 font-size: 12px;
 line-height: 24px;
 color: #666666;
 margin-top: 0px;
 margin: 8px 0;
 margin: 14px 0 14px;
 }
 pre {
 background-color: #eee;
 margin-bottom: 8px;
 margin-top: 8px;
 margin: 12px 0 12px;
 }
 blockquote {
 margin-bottom: 8px;
 margin-top: 8px;
 margin: 14px 0 14px;
 background-color: #eee;
 padding: 16px 16px;
 }
 tr {
 background-color: #f5f5f5;
 }
 code {
 background-color: #eee;
 }
 ul,
 ol,
 li {
 list-style: unset;
 font-size: 12px;
 line-height: 20px;
 color: #666666;
 margin-top: 0px;
 margin: 8px 0;
 }
 blockquote {
 border-color: #48b6e2;
 }
 table {
 display: table;
 width: 100%;
 max-width: 100%;
 margin-bottom: 20px;
 }
}

三、页面运用(实践检验真理)

页面
<template>
 <div class="markdown-body" v-html="htmlMD"></div> //markdown-body 一定要写这个class名
</template>

<script>
export default {
 name: 'GitBook',
 data() {
 return {
  htmlMD: ''
 };
 },
 mounted() {
 this.getHtmlMD(this.$route.query.databaseType);
 },
 methods: {
 getHtmlMD(type) {
  this.htmlMD = require(`./GitBook/${type.toLowerCase()}.md`); //导入md 我这里根据不同的类型拿不同md文件
 }
 }
};
</script>

四、最终效果 (表格,代码(缩进完全没有问题)我懒的去写一个实例了)打码勿怪

以上就是vue导入.md文件的步骤(markdown转HTML)的详细内容,更多关于vue 导入.md文件的资料请关注我们其它相关文章!

(0)

相关推荐

  • 实现Vue的markdown文档可以在线运行的方法示例

    markdown 文档中Vue代码 可执行啦,而且可以边看边执行.这样就可以用markdown文档的形式,写自己的Vue博客了, 可以方便介绍自己的原创组件,很酷的执行. Github https://github.com/zhangKunUserGit/vue-markdown-run DEMO https://zhangkunusergit.github.io/vue-markdown-run/dist/ 安装 npm install vue-markdown-run --save 用法 (

  • vue中利用simplemde实现markdown编辑器(增加图片上传功能)

    前言 最近在搭个人博客网站,需要一个 markdown 编辑器,来进行博客的编写 看了网上的教程,决定使用 simplemde 以为可以直接能拿来用的 不过实际运用的时候发现还是有要完善的地方 比如令人头疼的图片上传 最终效果 安装及初始化 npm install simplemde --save 在html中加入一个textarea <textarea id="simplemde"></textarea> 在vue的生命周期函数 mounted 中,添加 si

  • 利用Vue实现一个markdown编辑器实例代码

    前言 前段时间做项目的时候,需要一个Markdown编辑器,在网上找了一些开源的实现,但是都不满足需求 说实话,这些开源项目也很难满足需求公司项目的需求,与其实现一个大而全的项目,倒不如实现一个简单的,易于在源码上修改的项目,核心功能都有的,以供修改使用 本文的源码地址如下:https://github.com/jiulu313/HelloMarkDown(本地下载) 喜欢的朋友可以帮忙star一下,欢迎交流学习 先看一下本项目的效果图(图片经过压缩) 本文的目的就是实现一个有核心功能的,简单,

  • vue组件文档(.md)中如何自动导入示例(.vue)详解

    症结(懒癌患者) 在写组件库文档的时候,会把示例代码粘贴到文档里,这样做有一个很恶心的地方:每次组件迭代或修改示例都需要重新修改文档中的代码片段.长年累月,苦不堪言. 猜想(狂想曲) 所以我想,可不可以把.vue文件里的template块和script块取出来,放入对应的.md文件中 比如在.md文件中 {{:xx.vue?type=(template|script)}} 便替换示例中对应的template|script块 # xx ## 示例代码 // {{:}} 定义变量规则模版(加个冒号防

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

    [版本] 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(/\.

  • Vuejs中使用markdown服务器端渲染的示例

    啊哈,又是来推荐一个 vuejs 的 package,miaolz123/vue-markdown. 对应的应用场景是:你想使用一个编辑器或者是在评论系统中支持 markdown.这个 package 的有点还是挺多了,比如默认就支持 emoji,这个就很完美啦!laravist 的新版就使用了 vue-markdown 来渲染评论. 安装 直接使用 npm 来安装: npm install --save vue-markdown 使用 也是很简单的,可以直接这样: import VueMark

  • 详解基于mpvue的小程序markdown适配解决方案

    美团点评近日开源了 mpvue ,这是一个使用 Vue.js 开发小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为 H5,mpvue 将是十分契合的一种解决方案. mpvue 的核心目标是提高开发效率,增强开发体验.使用该框架,开发者只需初步了解小程序开发规范.熟悉 Vue.js 基本语法即可上手.框架提供了完整的 Vue.js 开发体验,开发者编写 Vue.js

  • vue导入.md文件的步骤(markdown转HTML)

    前言 刚接到这个需求的时候,觉得很简单(的确很简单)但是这玩意的坑真的也让人无奈. 网上找了很多的资料,都没有写出痛点(这就很难过了).通过实践并且在我们项目中平稳运行,想分享给后面的人 我的博客上也写了100多篇文章,点击量有上万的也有个位数的,能够帮助到他人这就是写作记录的动力. 需求 vue项目中可以良好展示markdown(只是展示功能 没有编辑功能) 痛点问题 .md文件类型,直接模块加载(只有字符串,这得多难受,怎么维护呢),还是一个文件一个文件的好维护并且好修改复用 用第三方插件,

  • Vue导入excel文件的两种方式(form表单和el-upload)

    目录 前言 第一种方法:form表单 一.文件上传的三要素是什么? 二.具体使用步骤 第二种方法:el-upload 总结 前言 两种导入文件的方法:form表单和el-upload 第一种方法:form表单 一.文件上传的三要素是什么? 文件上传的三要素: 表单post请求 input框的type=file 在form表单中添加enctype=“multipart/form-data” 二.具体使用步骤 代码如下(示例): <form action="/" method=&qu

  • vue导入excel文件,vue导入多个sheets的方式

    目录 html 导入按钮和选择文件的弹框 js 重中之重 导入 excel 开始啦 1.data里面的数据 2. 导入弹框 3. 导入方法 4.确认导入 vue导入处理excel表格 1.vue导入Excel表格 2. 总体代码与效果 用input 导入 excel ,然后生成表格,然后调用接口上传到后台 html 导入按钮和选择文件的弹框 <el-button v-waves :loading='downloadLoading' class='filter-item' type='primar

  • 详解如何实现在Vue中导入Excel文件

    目录 一.安装依赖 二.template中 三.script中js代码 以将此Excel导出为json数据为例 一.安装依赖 npm install file-saver --save npm install xlsx --save npm install script-loader --save-dev 二.template中 <span>导入表格</span> <input id="upload" type="file" @chan

  • vue导入处理Excel表格功能步骤详解

    目录 1. 前言 2.vue导入Excel表格 2.1 使用ElementUI中的upload组件 2.2 使用input文件上传 3. 总体代码与效果 4. 总结 1. 前言 最近遇到前端导入并处理excel表格的情况,趁此机会刚好研究一下vue导入并处理excel数据:当然自己手撸一个工具没有那么多时间,本文只是借助现有的工具来做一下工具使用总结. 2.vue导入Excel表格 vue导入Excel表格主要有两种常用的方法,一个是借助ElementUI文件上传进行表格导入,另一个是自带的in

  • BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤

    bootstrap-fileinput源码:https://github.com/kartik-v/bootstrap-fileinput bootstrap-fileinput在线API:http://plugins.krajee.com/file-input bootstrap-fileinput Demo展示:http://plugins.krajee.com/file-basic-usage-demo 这个插件主要是介绍如何处理图片上传的处理操作,原先我的Excel导入操作使用的是Upl

  • 使用navicat导入sql文件的方法步骤

    一.打开navicat,打开连接,右击连接名(如果新建连接,需要使用对应数据库的ip地址和密码,本机的是地址localhost,密码是自己mysql数据库的密码),选择新建数据库,数据库名要和想要导入的文件名一样(这种情况针对的是sql文件是直接由整个数据库导出的一个sql文件,如果表导出的sql文件,应该是随便命名数据库的名字,表名应该是和需要导入的文件名字相同(第二种情况没有亲自试过)). 二.右击建好的数据库,选择运行SQL文件,在出现的页面中选择要导入的SQL文件.然后点击开始,等待导入

  • Navicat Premium如何导入SQL文件的方法步骤

    今天开始写期末项目,不过今年用的MySQL数据库,所以就用了Navicat premium进行管理,数据库是另一个小伙伴写的,需要导入,但是Navicat没有直接导入SQL文件的按钮,尝试了几次,都不行,查了度娘,好多都文不对题,最后终于解决,写一下解决方案,原来很简单.... 1.首先,链接上Navicat,在链接下新建数据库,数据库名和要导入的一样,字符集选utf-8,确定 2.先右键点击打开数据库,然后,直接将数据库文件拖拽到新建的数据库上 3.弹出这个对话框,直接点击开始,完成后.然后直

  • Vue单页面应用中实现Markdown渲染

    之前渲染 Markdown 的时候, 笔者使用的是 mavonEditor 的预览模式, 使用起来比较爽, 只需要引入组件即可, 但是在最近的开发中, 遇到了困难. 主要问题在于作为单页面应用, 站内链接必须是使用 router-link 跳转, 如果使用 mavonEditor 默认渲染的 a 标签, 就会重新加载页面, 用户体验较差. 动态渲染 想要实现在前端动态地根据用户内容渲染router-link , 需要使用动态渲染, 根据 官方文档, 直接修改vue.config.js 即可: /

  • Vue项目引入PWA的步骤

    Vue项目引入PWA很简单,操作步骤如下: 1. 安装依赖 vue add @vue/pwa 由于使用add关键字,安装成功后会在项目中创建一些文件,如果项目使用了git,可以很容易的看出文件变化: src文件夹下会生成一个registerServiceWorker.js文件,并在main.js中导入,这个文件自动生成了注册service worker的代码.registerServiceWorker.js的代码如下: import { register } from 'register-ser

随机推荐