7 步实现 Vue SFC Web编辑器

目录

• 7 步实现 Vue SFC Web编辑器
• 构建属于自己的 Vue SFC Playground
• 6 步搭建 GitHub Page 个人网站

本文会通过 7 步带您创建一个Vue SFC Web编辑器。编辑器基于 CodeMirror 实现。

CodeMirror 是用于 Web 的代码编辑器组件。它被设计为可以渐进式添加语法高亮、搜索、替换等功能。

CodeMirror：

• 官网
• 中文 - 持续翻译

前置条件

• Node.js@18.18.0

初始化

1. 创建项目

   选择目录后输入下方命令，创建一个 vite 项目：

   npm create vite@latest
   # Need to install the following packages:
   # create-vite@5.2.3
   # Ok to proceed? (y) y
   # ✔ Project name: … vue-playground
   # ✔ Select a framework: › Vue
   # ✔ Select a variant: › JavaScript
   

2. 进入项目并安装codemirror, @codemirror/lang-vue。

   cd vue-playground
   npm install codemirror @codemirror/lang-vue
   

3. 修改 style.css。

   html,
   body,
   #app {
     width: 100%;
     height: 100%;
     margin: 0;
     padding: 0;
   }
   

4. 启动

   npm run dev
   

开发

使用喜欢的编辑器打开该项目

1. 创建VueSfcEditor组件

   在 src 目录下创建 VueSfcEditor.vue 文件。

   <template>
       <div style="width: 100%; height: 100%" ref="vueSfcEditor"></div>
   </template>
   
   <script setup>
   import { ref, onMounted } from "vue";
   import { basicSetup, EditorView } from "codemirror";
   import { vue } from "@codemirror/lang-vue";
   
   const vueSfcEditor = ref();
   
   onMounted(() => {
     if (!vueSfcEditor.value) return;
   
     new EditorView({
       doc: "",
       extensions: [
           basicSetup, // 添加行号、撤销历史、代码折叠、语法高亮等功能
           vue(), // 添加 vue sfc 的语法解析,
           // 全屏展示
           EditorView.theme({
               "&": { height: "100%" },
               ".cm-scroller": { overflow: "auto" },
           }),
       ],
       parent: vueSfcEditor.value
     });
   });
   </script>
   
   

2. 修改 App.vue

   <script setup>
   import VueSfcEditor from './VueSfcEditor.vue';
   </script>
   
   <template>
     <vue-sfc-editor></vue-sfc-editor>
   </template>
   

   此时你已经拥有一个白色全屏的 Vue SFC Web 编辑器。

3. 安装one dark主题依赖并添加配置

   npm install @codemirror/theme-one-dark
   

   // VueSfcEditor.vue
   
   <script>
   // ...
   import { oneDark } from "@codemirror/theme-one-dark";
   
   new EditorView({
      // ...
      extensions: [
          // ...
          oneDark,
      ]
   })
   </script>
   

效果

最后的效果如下：

预告

项目是刻意命名为 vue-playground ，下一篇文档会带您实现vue官方Playground 的简易效果。