## **Vue3 js工程** ## 添加插件 **npm方式：** ``` 1、安装代码编译器插件 npm install vue-codemirror --save 2、选择安装编程语言插件 npm install @codemirror/commands npm install @codemirror/lang-cpp npm install @codemirror/lang-css npm install @codemirror/lang-html npm install @codemirror/lang-java npm install @codemirror/lang-javascript npm install @codemirror/lang-json npm install @codemirror/lang-lezer npm install @codemirror/lang-markdown npm install @codemirror/lang-php npm install @codemirror/lang-python npm install @codemirror/lang-rust npm install @codemirror/lang-sql npm install @codemirror/lang-xml npm install @codemirror/legacy-modes 3、安装编译器主题插件 npm install @codemirror/theme-one-dark 4、业务页面如何使用 <template> <!-- 代码编译器 --> <div class="codemirror-tbody"> <codemirror v-model="fileContent" :style="{ height: '633px;', fontSize: '16px;'}" :options="{ // 加载完成后自定定焦 autofocus: true, // 自动缩进 smartIndent: true, // 缩进单位 indentUnit: 4, // 启用table按键 indentWithTab: true, // table按键缩进空格数 tabSize: 2, // 是否显示行 lineNumbers: true, // 第一行的行号 firstLineNumber: 1, // 在选择时是否显示光标 showCursorWhenSelecting: true, // 光标高度 cursorHeight: 1, // 是否只读,不能获取焦点 readOnly: false, // 当前行背景高亮 styleActionLine: true, // 自动换行 lineWrapping: true, // 允许用户将一个编辑器高度的空白区域滚动到编辑器底部的视图 scrollPastEnd: true }" :extensions="extensions" /> </div> </template> <script setup> import { ref, watch } from 'vue'; import { Codemirror } from "vue-codemirror"; import { css } from "@codemirror/lang-css"; import { html } from "@codemirror/lang-html"; import { javascript } from "@codemirror/lang-javascript"; import { json } from "@codemirror/lang-json"; import { java } from "@codemirror/lang-java"; import { sql } from "@codemirror/lang-sql"; import { xml } from "@codemirror/lang-xml"; import { oneDark } from "@codemirror/theme-one-dark"; // 变量-代码编译器额外配置 const extensions = [java(), oneDark]; // 变量-文件内容 const fileContent = ref(); </script> <style lang="less" scoped> /* 代码编译器自适应高度 */ .codemirror-tbody { min-height: calc(100vh - 320px); max-height: calc(100vh - 320px); overflow: auto; } </style>