html_0">markdown 转换html
需要用到三个库
- EJS 可以帮助我们在HTML中潜入动态内容
- Marked 一个流行的解析器和编译器，可以将markdown转换成html标记
- BrowserSync 可以实施帮助你同步和更换你的网页修改，当你对markdown文件进行编辑将其转换成html时，browserSync可以自动刷新你的浏览器，使你能够及时查看你转换后的结果
建立ejs模版，template.ejs
入门语法 https://ejs.bootcss.com/#install
html"><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title><%= title %></title><!-- index.css 为markdown转html后需要的样式模版 --><link rel="stylesheet" href="./index.css" /></head><body><!-- % 代表可以动态插入 --><%- content %></body>
</html>建立markdown模版文件，README.md(随便写了点内容)
### 命名路由，编程式跳转```js
const routes: RouteRecordRaw[] = [{path: "/",name: "A",component: () => import("../A.vue"),},{path: "/B",name: "B",component: () => import("../B.vue"),},
];
### 处理markdown转换成html的逻辑语法，建立index.js文件
```js
const ejs = require("ejs");// 读取文件
const fs = require("fs");// 编译为html
const marked = require("marked");// 创建一个全局变量
let browser;
// 浏览器自动启服务，加载相应页面
const browserSync = require("browser-sync");const server = () => {// 创建一个服务browser = browserSync.create();// 调用init启动browser.init({server: {// 根目录baseDir: "./",index: "index.html", // 渲染index.html页面},});
};// 通过ejs读取文件
const init = (callback) => {// 读取markdown里的内容const md = fs.readFileSync("README.md", "utf-8");// 通过parse方法转换成html// console.log(marked.parse(md));// 把转换的markdown语法插入到html中ejs.renderFile("template.ejs", // 使用此模版{content: marked.parse(md), // 替换模版里的内容title: "markdown 转换成 html",},(err, data) => {if (err) throw err;fs.writeFileSync("index.html", data); // 根目录下创建一个index.html,若是存在，则会替换// 调用当前服务callback && callback();});
};// 监听文件变动，保持实时更新
fs.watchFile("README.md", (curr, prev) => {console.log("curr", curr);// 若是md有修改，则时间会是最新的if (curr.mtime !== prev.mtime) {init(() => {browser.reload(); // 当前启动的服务里重新加载，不会再启动第二个服务});}
});// 初始化调用
init(() => {server();
});
