用vue实现json模版编辑器

要在Vue中实现一个JSON模板编辑器，你可以使用codemirror或ace这样的编辑器库，并结合Vue的双向数据绑定功能。以下是一个简单的例子，使用了codemirror实现JSON编辑器：

1. 安装codemirror及其Vue组件库vue-codemirror：

npm install codemirror vue-codemirror --save

2. 安装JSON模式插件，以便代码编辑器能识别JSON语法高亮等：

npm install jsonlint --save

3. 在Vue组件中使用vue-codemirror：

<template>
  <codemirror ref="myCodeMirror" v-model="jsonContent" :options="cmOptions" />
</template>
 
<script>
import { codemirror } from 'vue-codemirror'
import 'codemirror/mode/javascript/javascript'
import 'codemirror/addon/edit/closebrackets'
import 'codemirror/addon/edit/closetag'
import 'codemirror/addon/edit/matchtags'
import 'codemirror/addon/lint/lint.css'
import 'codemirror/addon/lint/lint'
import jsonlint from 'jsonlint-mod'
 
export default {
  components: { codemirror },
  data() {
    return {
      jsonContent: '{\n  "key": "value"\n}',
      cmOptions: {
        mode: 'application/json',
        theme: 'base16-dark',
        lineNumbers: true,
        gutters: ['CodeMirror-lint-markers'],
        lint: true,
        json: true,
        matchBrackets: true,
        autoCloseTags: true,
        lineWrapping: true
      }
    }
  },
  mounted() {
    this.jsonlint = jsonlint.parser
    const CodeMirror = require('codemirror')
    require('codemirror/addon/lint/json-lint')
    // 设置lint addon的全局配置
    CodeMirror.lintAddon = jsonlint
  }
}
</script>
 
<style>
/* 引入codemirror样式 */
@import 'codemirror/lib/codemirror.css';
@import 'codemirror/theme/base16-dark.css';
</style>

这个例子中，我们创建了一个Vue组件，其中包含了codemirror组件。我们设置了v-model来实现双向绑定，并通过cmOptions配置了编辑器的一些基本选项，如主题、行号显示等。我们还启用了代码检查功能，这样当你输入的JSON不符合格式时，编辑器会显示错误。

请注意，你需要根据自己的需求调整cmOptions中的配置。例如，如果你不需要代码检查功能，可以移除lint相关的配置项。