由于项目需求要显示高亮代码块，本来最初选择的是vue-codemirror插件，结果安装的时候由于是vue2，报错安装失败，好像vue3之后才能使用该插件，故决定使用highlight.js。

1. 安装

npm install highlight.js --save

2. 新建highlight.js文件，该文件一般是放在utils文件夹下，如图，这是我创建的位置
   
   复制如下代码到highlight.js文件。

// highlight.js  代码高亮指令
import Vue from 'vue';
import Hljs from 'highlight.js';
import 'highlight.js/styles/atom-one-dark.css';
 
let Highlight = {};
Highlight.install = function (Vue, options) {
    // 先有数据再绑定，调用highlightA
    Vue.directive('highlightA', {
        inserted: function(el) {
            let blocks = el.querySelectorAll('pre code');
            for (let i = 0; i < blocks.length; i++) {
                const item = blocks[i];
                Hljs.highlightBlock(item);
            };
        }
    });
 
    // 先绑定，后面会有数据更新，调用highlightB
    Vue.directive('highlightB', {
        componentUpdated: function(el) {
            let blocks = el.querySelectorAll('pre code');
            for (let i = 0; i < blocks.length; i++) {
                const item = blocks[i];
                Hljs.highlightBlock(item);
            };
        }
    });
 
};
 
export default Highlight;

其中第三行代码是引入代码高亮的样式，我引入的是atom-one-dark，可以去官网查看样式示例https://highlightjs.org/static/demo/，然后将样式名字复制替换我引入的atom-one-dark就行。

3. 在main.js中引入指令，注意这个路径就是你上一步创建highlight.js文件的路径
   

// highlight.js代码高亮指令
import Highlight from '@/utils/highlight';
 
Vue.use(Highlight)

4. 在页面中使用指令

  <pre v-highlightA>
      <code class="json">{{watch_data}}</code>
  </pre>

pre标签中的v-highlightA和v-highlightB根据需求自己选择，对于code标签中的class，定义成自己数据需要格式，我的需求是显示json格式，所以就有class=“json”，然后进行数据的绑定。如图是我绑定的数据

最后界面展示出的高亮代码如图：

大功告成！