哪位达人指导下，在 vue cli 中如何使用 highlightjs-line-numbers 插件？

highlight.js是用来高亮显示代码的工具。 配合它还有一个显示行号的插件highlightjs-line-numbers.js

在传统网页中，使用方法：

hljs.initHighlightingOnLoad();
hljs.initLineNumbersOnLoad();

在 vue cli 开发中无法使用成功，这是我的语法，哪位大哥指导下：

<script>
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css'
import 'highlightjs-line-numbers.js/src/highlightjs-line-numbers.js'
 
 //Markdown 编辑器之行号与加色显示
 
 /*
// lineNumbersBlock 不会引用，无法产生行号
文档：
https://rkroom.com/post/nuxt-vue-layout-style
https://github.com/wcoder/highlightjs-line-numbers.js/
*/



const highlightCode = () => {
  const preEl = document.querySelectorAll('pre')
  
  preEl.forEach((el) => {
    hljs.highlightBlock(el);
  });
  
  
}




export default {
name: 'myContent',
 data: function () {
	var ref = this;
	var id = ref.$route.params.id;
	var model = {conMod: {createTime:""}, node: {}};
	this.jsp("content_get",{"id":id}).then((ret)=>{
		model.conMod=JSON.parse(ret.result)[0];
		this.jsp("model_get",{"id":model.conMod.modelId}).then((ret)=>{model.node=JSON.parse(ret.result);})
	})
	return model;
},
methods: {
	navToList: function () { this.$route.push("/list/" + this.conMod.ModelID); }
	
},
mounted() {
        highlightCode()
        lineNumbersBlock()
    },
updated () {
	highlightCode()
	lineNumbersBlock()
	}
}
</script>