vue + element +tp5 个人博客后台管理小记

主要来介绍下用的几个插件 的使用

1. mavon-editor 基于Vue的markdown编辑器 github项目地址

2. marked 解析预览markdown文本

3. highlight.js 语法高亮

1. mavon-editor使用

我这里是全局注册使用；也可局部使用，详细请看 github

//在main.js 中
import mavonEditor from 'mavon-editor'
Vue.use(mavonEditor);复制代码

在vue单文件中使用

复制代码

复制代码

复制代码

2.marked使用

复制代码

复制代码

3.highlight.js vue 自定义指令使用

import Hljs from 'highlight.js'
​
import 'highlight.js/styles/github.css'
​
let HighLight = {};
​
HighLight.install = function (Vue) {
  Vue.directive('highlight', function (el) {
    let blocks = el.querySelectorAll('pre code');
    blocks.forEach((block) => {
      Hljs.highlightBlock(block)
    })
  });
}
​
export default HighLight;复制代码

//在main.js 中
import HighLight from './plugins/highlight'
Vue.use(HighLight);复制代码

"markdown-body">
      
"complileMarkdow" v-highlight>
 
复制代码

本项目预览地址 账号密码都是admin

未完待续……

转载于:https://juejin.im/post/5bc17a5df265da0adc18f11e