導包

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使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。