vue展示SQL语句第一篇：vue格式化显示后端返回的SQL语句

效果图：

 方法：
        1：下载插件：vue-codemirror：npm i vue-codemirror -S

                官方网址：https://codemirror.net/index.html

        2：下载格式化SQL语句插件：sql-formatter：npm i sql-formatter -S

                注意：sql-formatter插件的版本要求4以下，否则会报错

                网址：https://www.npmjs.com/package/sql-formatter

  步骤：

        1：vue子组件：preview.vue文件代码：

 2：父组件中引入

        （1）：引入sql-formatter插件：

        （2）：引入子组件preview.vue组件，并注册

import sqlFormatter from 'sql-formatter'    //引入sql-formatter插件

import preview from './preview.vue' //引入子组件

export default {
  //注册子组件
  components: {
    preview,
  },
  data(){
    return{
      basicInfoForm:{
        sqlMain:''      //后端返回的sql语句
      }
    }
  },
  methods:{
    //设置sql语句
    changeTextarea(val) {
      this.$set(this.basicInfoForm, 'sqlMain', val)
      this.formaterSql(val)
    },
    //格式化sql语句显示
    formaterSql(val) {
      let dom = this.$refs.sqleditor
      console.log('formaterSql', sqlFormatter)
      dom.editor.setValue(sqlFormatter.format(dom.editor.getValue()))
    },
  }
}

结果：问题：sql语句格式化样式没问题，但是comment注释语句并没格式化

 解决comment注释语句并没格式化的方法：

vue展示SQL语句第二篇：vue的sql-formatter插件解决sql语句前端展示comment注释语句并没格式化问题_丽雪的空间的博客-CSDN博客