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);

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

未完待续……