diff --git a/package-lock.json b/package-lock.json
index eacf6ec..537c653 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4042,6 +4042,11 @@
       "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
       "dev": true
     },
+    "codemirror": {
+      "version": "5.62.3",
+      "resolved": "https://r.cnpmjs.org/codemirror/download/codemirror-5.62.3.tgz",
+      "integrity": "sha1-XP3uaTHIstGzmudzqqrsLMa1VY4="
+    },
     "collection-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/collection-visit/download/collection-visit-1.0.0.tgz",
@@ -5076,6 +5081,11 @@
       "integrity": "sha1-AU7o+PZpxcWAI9pkuBecCDooxGw=",
       "dev": true
     },
+    "diff-match-patch": {
+      "version": "1.0.5",
+      "resolved": "https://r.cnpmjs.org/diff-match-patch/download/diff-match-patch-1.0.5.tgz",
+      "integrity": "sha1-q7WE1fEM0Rlt/FWqA3AVkq4/ezc="
+    },
     "diffie-hellman": {
       "version": "5.0.3",
       "resolved": "https://registry.npm.taobao.org/diffie-hellman/download/diffie-hellman-5.0.3.tgz",
@@ -12910,6 +12920,15 @@
       "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.12.tgz?cache=0&sync_timestamp=1600188494896&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue%2Fdownload%2Fvue-2.6.12.tgz",
       "integrity": "sha1-9evU+mvShpQD4pqJau1JBEVskSM="
     },
+    "vue-codemirror": {
+      "version": "4.0.6",
+      "resolved": "https://r.cnpmjs.org/vue-codemirror/download/vue-codemirror-4.0.6.tgz",
+      "integrity": "sha1-t4a7gNjXYqk6q45G95qBAG8EN8Q=",
+      "requires": {
+        "codemirror": "^5.41.0",
+        "diff-match-patch": "^1.0.0"
+      }
+    },
     "vue-eslint-parser": {
       "version": "7.1.0",
       "resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.1.0.tgz?cache=0&sync_timestamp=1589539313907&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-eslint-parser%2Fdownload%2Fvue-eslint-parser-7.1.0.tgz",
diff --git a/package.json b/package.json
index cdaea60..9ddd937 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
     "vant": "^2.10.7",
     "view-design": "^4.3.2",
     "vue": "^2.6.11",
+    "vue-codemirror": "^4.0.6",
     "vue-nestable": "^2.6.0",
     "vue-router": "^3.4.9",
     "vuex": "^3.1.2"
diff --git a/src/App.vue b/src/App.vue
index 9aeb031..be5a6cd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,7 +8,7 @@ const initCodeStr = '{"template":{"lc_id":"root","__children":[{"div":{"class":"
 
 export default {
   components: {
-    vcc: () => import('./components-v2/VCC.vue')
+    vcc: () => import('./components/CodeEditor.vue')
   },
   data() {
     return {
diff --git a/src/components/CodeEditor.vue b/src/components/CodeEditor.vue
new file mode 100644
index 0000000..c1707e0
--- /dev/null
+++ b/src/components/CodeEditor.vue
@@ -0,0 +1,171 @@
+<template>
+  <div class="example">
+    <div class="codemirror">
+      <codemirror
+        v-model="code" 
+        :options="cmOption"
+        @cursorActivity="onCmCursorActivity"
+        @ready="onCmReady"
+        @focus="onCmFocus"
+        @blur="onCmBlur"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  import dedent from 'dedent'
+  import { codemirror } from 'vue-codemirror'
+
+  // base style
+  import 'codemirror/lib/codemirror.css'
+
+  // theme css
+  import 'codemirror/theme/monokai.css'
+
+  // language
+  import 'codemirror/mode/vue/vue.js'
+
+  // active-line.js
+  import 'codemirror/addon/selection/active-line.js'
+
+  // styleSelectedText
+  import 'codemirror/addon/selection/mark-selection.js'
+  import 'codemirror/addon/search/searchcursor.js'
+
+  // highlightSelectionMatches
+  import 'codemirror/addon/scroll/annotatescrollbar.js'
+  import 'codemirror/addon/search/matchesonscrollbar.js'
+  import 'codemirror/addon/search/searchcursor.js'
+  import 'codemirror/addon/search/match-highlighter.js'
+
+  // keyMap
+  import 'codemirror/mode/clike/clike.js'
+  import 'codemirror/addon/edit/matchbrackets.js'
+  import 'codemirror/addon/comment/comment.js'
+  import 'codemirror/addon/dialog/dialog.js'
+  import 'codemirror/addon/dialog/dialog.css'
+  import 'codemirror/addon/search/searchcursor.js'
+  import 'codemirror/addon/search/search.js'
+  import 'codemirror/keymap/sublime.js'
+
+  // foldGutter
+  import 'codemirror/addon/fold/foldgutter.css'
+  import 'codemirror/addon/fold/brace-fold.js'
+  import 'codemirror/addon/fold/comment-fold.js'
+  import 'codemirror/addon/fold/foldcode.js'
+  import 'codemirror/addon/fold/foldgutter.js'
+  import 'codemirror/addon/fold/indent-fold.js'
+  import 'codemirror/addon/fold/markdown-fold.js'
+  import 'codemirror/addon/fold/xml-fold.js'
+
+  export default {
+    name: 'codemirror-example-vue',
+    title: 'Mode: text/x-vue & Theme: monokai',
+    components: {
+      codemirror
+    },
+    data() {
+      return {
+        code: dedent`
+          <template>
+            <h1>Hello World!</h1>
+            <codemirror v-model="code" :options="cmOption" />
+          </template>
+
+          <script>
+            // import 'some-codemirror-resource'
+            export default {
+              data() {
+                return {
+                  code: 'const A = 10',
+                  cmOption: {
+                    tabSize: 4,
+                    styleActiveLine: true,
+                    lineNumbers: true,
+                    line: true,
+                    foldGutter: true,
+                    styleSelectedText: true,
+                    mode: 'text/javascript',
+                    keyMap: "sublime",
+                    matchBrackets: true,
+                    showCursorWhenSelecting: true,
+                    theme: "monokai",
+                    extraKeys: { "Ctrl": "autocomplete" },
+                    hintOptions:{
+                      completeSingle: false
+                    }
+                  }
+                }
+              }
+            }
+          ${'<\/script>'}
+
+          <style lang="scss">
+            @import './sass/mixins';
+            @import './sass/variables';
+            main {
+              position: relative;
+            }
+          </style>
+        `,
+        cmOption: {
+          tabSize: 4,
+          foldGutter: true,
+          styleActiveLine: true,
+          lineNumbers: true,
+          line: true,
+          keyMap: "sublime",
+          mode: 'text/x-vue',
+          theme: 'monokai',
+          extraKeys: {
+            'F11'(cm) {
+              cm.setOption("fullScreen", !cm.getOption("fullScreen"))
+            },
+            'Esc'(cm) {
+              if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false)
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      onCmCursorActivity(codemirror) {
+        console.debug('onCmCursorActivity', codemirror)
+      },
+      onCmReady(codemirror) {
+        console.debug('onCmReady', codemirror)
+      },
+      onCmFocus(codemirror) {
+        console.debug('onCmFocus', codemirror)
+      },
+      onCmBlur(codemirror) {
+        console.debug('onCmBlur', codemirror)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .example {
+    display: flex;
+    height: 100%;
+
+    .codemirror,
+    .pre {
+      width: 50%;
+      height: 100%;
+      margin: 0;
+      overflow: auto;
+    }
+
+    .pre {
+      display: block;
+      padding: 1rem;
+      font-size: 14px;
+      line-height: 1.6;
+      word-break: break-all;
+      word-wrap: break-word;
+    }
+  }
+</style>
\ No newline at end of file