Optimization Demo

package.json

@@ -5,7 +5,7 @@
   "main": "dist/mavon-editor.js",
   "types": "./mavon-editor.d.ts",
   "scripts": {
-    "dev": "webpack-dev-server --open --progress --config webpack/webpack.dev.js",
+    "dev": "webpack-dev-server --config webpack/webpack.dev.js",
     "build": "webpack --progress --config webpack/webpack.build.js",
     "test": "jest",
     "test:coverage": "jest --coverage",

src/dev/demo.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <div class="navigate">
+      <span @click="viewIndex = 1">Full demo</span>
+      <span @click="viewIndex = 2">Simple demo</span>
+    </div>
+    <div>
+      <App v-if="viewIndex == 1"></App>
+      <Editor v-if="viewIndex == 2"></Editor>
+    </div>
+  </div>
+</template>
+
+<script>
+import app from './app.vue';
+import editor from './editor.vue';
+
+export default {
+  name: 'demo',
+  components: {
+    App: app,
+    Editor: editor,
+  },
+  data() {
+    return {
+      viewIndex: 1,
+    };
+  },
+};
+</script>
+<style>
+.navigate {
+  text-align: center;
+  font-size: 18px;
+  color: blue;
+}
+
+.navigate span {
+  margin-right: 5px;
+}
+
+.navigate span:hover {
+  cursor: pointer;
+  font-weight: bolder;
+}
+</style>

src/dev/index.js

@@ -10,11 +10,11 @@
  */
 
 import Vue from 'vue';
-var editor = require('./app.vue');
+var demo = require('./demo.vue');
 var sMd = require('../index.js');
 
-Vue.use(sMd)
+Vue.use(sMd);
 var app = new Vue({
-    el: '#main',
-    render: h => h(editor)
+  el: '#main',
+  render: (h) => h(demo),
 });