## **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>