为较完美解决精度丢失问题的json编辑器

其实就是代码编辑器，用到这有点大材小用，不过也正是因为字符串为value，进而完美解决了精度丢失的问题

https://blog.csdn.net/weixin_33852020/article/details/93476324 打包问题

1.安装

npm i monaco-editor
npm i monaco-editor-webpack-plugin

2.配置webpack vue-cli4

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: name,

    plugins: [
      new MonacoWebpackPlugin()
    ],
  },

3.组件

<template>
  <div id="routeManagement"></div>
</template>

<script>
import {formatJson} from '@/utils/format';
import * as monaco from 'monaco-editor';
export default {
  props:{
        value:{
          type:String,
          default:""
        }  
    },
  watch:{
      value:function(newVal,oldVal){
          this.editor.setValue(formatJson(newVal))
      }
  },
  data() {
    return {
      editor:null
    }
  },
  
  mounted(){
      console.log(this.value)
    this.editor = monaco.editor.create(document.getElementById('routeManagement'), {
      value: formatJson(this.value),
      language: 'json',
      theme: 'vs-dark',
    });
  },
  methods: {
      //获取当前编辑的值
      getValue(){
          return this.editor.getValue();
      }
  },
};
</script>

<style scoped>
#routeManagement {
  width: 100%;
  height: 600px;
}
</style>