vue安装codemirror

在Vue.js项目中集成CodeMirror编辑器，首先需要确保你已经安装了Vue CLI和Node.js环境。以下是安装并使用的步骤：

1. **安装依赖**：
使用npm或yarn添加`@codemirror/vue`插件到你的项目中。如果你使用npm，可以在命令行中运行：

   npm install @codemirror/vue codemirror --save

或者如果使用yarn：

   yarn add @codemirror/vue codemirror

2. **引入组件**：
在你的Vue文件（如`App.vue`或`components`目录下的新文件）中，导入`<Codemirror>`组件：

   <script setup>
   import { h } from 'vue';
   import { Codemirror } from '@codemirror/vue';
   </script>

   <template>
     <div>
       <Codemirror :options="{ theme: 'default' }" v-model="codeValue"></Codemirror>
     </div>
   </template>

这里设置了默认主题，你可以根据需要自定义选项。

3. **初始化数据**：
在setup部分，创建一个data属性来存储初始值和代码模型：

   <script setup>
   const codeValue = '';
   </script>

4. **配置编辑器**：
如果你想在`<Codemirror>`上做一些定制，可以在组件的setup部分提供`options`对象，例如设置语言模式、线程等。

现在，你已经在Vue应用中成功安装并使用了CodeMirror编辑器。