导包

npm 安装

npm install --save vue-markdown

引入github-markdown-css

npm 安装

npm install github-markdown-css

导入github-markdown.css文件

import 'github-markdown-css/github-markdown.css

并设置markdoen-body样式

.markdown-body {box-sizing: border-box;min-width: 200px;max-width: 980px;margin: 0 auto;padding: 45px;
}@media (max-width: 767px) {.markdown-body {padding: 15px;}
}

感谢作者：github: https://github.com/sindresorhus/github-markdown-css

完整代码写法

<!--* @Description: 渲染markdown文件-->
<template><div id="my-markdown" class="markdown-body"><vue-markdown :source="md"></vue-markdown></div>
</template>
<script>
import VueMarkdown from "vue-markdown";
export default {name: "MyMarkdown",components: {VueMarkdown},data() {return {md: ""};},created() {// 从后端请求README.mdthis.$axios.get("/api/public/docs/README.md", {}).then(res => {this.md = res.data.data;}).catch(err => {return Promise.reject(err);});}
};
</script>
<style>
@import 'github-markdown-css/github-markdown.css';
.markdown-body {box-sizing: border-box;margin: 0 auto;padding: 0 40px;
}
</style>

后端接口

@RequestMapping("/api/public/docs/README.md")public ResT getAbout() throws IOException {String readme = "README.md";//1.获取通道FileInputStream fin = new FileInputStream(readme);FileChannel fc = fin.getChannel();//2.创建缓冲区ByteBuffer buffer = ByteBuffer.allocate(1024);int length = -1;StringBuffer stringBuffer = new StringBuffer();//3.将数据从通道读到缓冲区中while ((length = fc.read(buffer)) != -1) {stringBuffer.append(new String(buffer.array()));buffer.clear();}fin.close();return ResT.ok().setData(stringBuffer.toString().trim());}

截图

【操作】vue-markdown使用相关推荐

vue3 项目创建(UI图形化界面方式，可视化操作Vue项目，vue ui)
vue3 项目创建 (UI图形化界面方式,可视化操作Vue项目,vue ui) 目录一.图形化界面方式搭建vue3 项目前提条件 1.检查node 和 @vue/cli 版本信息 2.升级你的 No ...
Vue - Markdown编辑器
Hello,我是 Alex 007,一个热爱计算机编程和硬件设计的小白,为啥是007呢?因为叫 Alex 的人太多了,再加上每天007的生活,Alex 007就诞生了. 最近在做工作室的官网,需要一套 ...
不使用架构工具在vscode中操作vue,扩展添加vue.js.devtools（Hollo案例）
1.请直接复制下面的代码到一个 HTML 文件中,并在浏览器中打开它 <div id = "root"&g ...
java双端加密操作 vue+springboot+AES(CBC-ECB) ------------------前传后
一.前端vue 控制台先加载AES npm install crypto-js --save-dev 编写AES-CBC加密解密方法 import CryptoJS from "cr ...
使用git bash 启动和操作vue或者nodejs等文件是否关于文件访问的一些基本操作质量
git bash 下操作文件及文件夹命令 1, cd : change directory的简写,改变目录的意思,就是切换到哪个目录下, 如 cd e:\fff 切换 E 盘下面的fff 目录. 当我 ...
mac OS系统：操作vue文件需要权限
出现需要权限的提示原因是因为Mac本身的保护机制,需要取得管理员权限. 提示无法写入文件"/Users/****/Desktop/blog-xjy/docs/.vuepress/confi ...
VUE动态切换皮肤 VUE动态切换背景图片操作 / VUE 主题切换
上正文使用:root ,var()函数实现 1. 创建皮肤或主题 css目录一个公共主题文件 theme.css,一个main.js引入文件theme-all.css,一个单独的主题样式文件 ...
怎样操作vue.js使用3DES加密
如何在VUE-CLI手脚架建立的工程中使用3des加密: 1 npm install crypto-js --save-dev 1 import CryptoJS from 'crypto-js' 1 ...
Markdown 基础操作 | 高级操作大全+Typora常用快捷键
目录 Markdown 基础操作 | 高级操作大全 1. Markdown基础操作 2. Markdown高级操作 1. 键盘按钮样式 2. 下拉展开 3. 脚注 4. 文章内部跳转 5. 隐藏文字 ...
使用vue的富文本编辑器操作
使用vue的富文本编辑器操作 vue的富文本编辑器使用以及多图片文件上传与回显一. vue-quill-edit 1. 安装vue的富文本 cd 当前的vue项目路径 npm install qui ...

【操作】vue-markdown使用

导包

npm 安装

引入github-markdown-css

npm 安装

导入github-markdown.css文件

并设置markdoen-body样式

完整代码写法

截图

【操作】vue-markdown使用相关推荐

最新文章

热门文章