1.安装vue-prism-editor

npm install vue-prism-editor

由于vue-prism-editor需要依赖 prismjs，所以还需要安装prismjs

npm install prismjs

2.在需要使用vue-prism-editor的组件中引入

import { PrismEditor } from "vue-prism-editor";
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere

// import highlighting library (you can use any library you want just return html string)
import { highlight, languages } from "prismjs/components/prism-core";
import "prismjs/components/prism-clike";
import "prismjs/components/prism-javascript";
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles

3.html代码

code----为需要高亮显示的代码内容
highlighter----定义在methods中的一个方法，用于把code高亮显示
lineNumbers----是否可编辑标识

4.js代码

export default {
 components: {
 PrismEditor
 },
 data: () => ({
 code: 'console.log("Hello World")',
 lineNumbers: true, // true为编辑模式， false只展示不可编辑
 }),
 methods: {
 highlighter(code) {
 return highlight(code, languages.js); //returns html
 }
 }
};

5.css代码

注意： css样式必写，不然编辑器没有样式，只是纯白页面展示
“height-300” 是给编辑器设置高度的，高度可自行设置，也可以不设置，这个样式非必需

到这里，功能基本就实现了。
但是在过程中遇到一些问题，这里也一并总结。

问题

1.如果仅安装vue-prism-editor，没有安装prismjs，会报以下错误，npm install prismjs即可

2.如果报错中有提示升级或者安装ajv或者vue2.6.X版本，根据提示安装即可

npm install ajv@^6.9.1
npm install vue@^2.6.11

个人理解，如果ajv和vue版本过低，可能会导致vue-prism-editor依赖的相关东西安装不上，建议升级完ajv和vue之后，再重新安装vue-prism-editor和prismjs.

3.vue与vue-template-compiler版本不一致

卸载低版本vue-template-compiler

npm uninstall vue-template-compiler

然后安装跟vue同样版本的vue-template-compiler

npm install vue-template-compiler@2.6.11