update: 支持输出单页html

shangbin · shangbin · commit 8bc06d5ca62e · 2022-01-20T13:14:39.000+08:00
diff --git a/src/components/Code.vue b/src/components/Code.vue
@@ -1,18 +1,27 @@
 <template>
   <el-dialog title="代码预览" v-model="codeDialogVisible" width="70%" top="10vh" :before-close="handleClose" :center=true>
     <!-- 这里加v-if是因为CodeEditor内部不支持watch数据监测 -->
-    <CodeEditor v-if="codeDialogVisible" style="max-height: 65vh;" ref="codeEditor" :initCode="prettyCode" mode="text/html"></CodeEditor>
+    <CodeEditor v-if="codeDialogVisible" style="max-height: 65vh;" ref="codeEditor" :initCode="outputCode"
+      mode="text/html"></CodeEditor>
     <div style="color: #666; font-size: 12px; text-align:center; margin: 5px;">使用代码前请确认相应的组件库已集成至项目</div>
-    <template v-slot:footer>
-      <span>
-        <el-tooltip effect="dark" content="拷贝" placement="left">
-          <img class="round-icon" :src="iconCopy" alt="" @click="copyCheck">
-        </el-tooltip>
-        <el-tooltip effect="dark" content="下载" placement="right">
-          <img class="round-icon" :src="iconDownload" alt="" @click="download">
-        </el-tooltip>
-      </span>
-    </template>
+    <div style="text-aligin:center;">
+      <el-row>
+        <el-col :span="12">
+          <el-radio-group v-model="outputMode">
+            <el-radio label="vue">Vue</el-radio>
+            <el-radio label="html">单页Html</el-radio>
+          </el-radio-group>
+        </el-col>
+        <el-col :span="12">
+          <el-tooltip effect="dark" content="拷贝" placement="left">
+            <img class="round-icon" :src="iconCopy" alt="" @click="copyCheck">
+          </el-tooltip>
+          <el-tooltip effect="dark" content="下载" placement="right">
+            <img class="round-icon" :src="iconDownload" alt="" @click="download">
+          </el-tooltip>
+        </el-col>
+      </el-row>
+    </div>
   </el-dialog>
 
 </template>
@@ -25,6 +34,7 @@ import copy from 'copy-to-clipboard';
 import { saveAs } from "file-saver";
 
 import CodeEditor from './CodeEditor.vue'
+import singleIndexOutput from '../libs/singleIndexOutput.js';
 
 export default {
   props: ['rawCode', 'codeDialogVisible'],
@@ -35,7 +45,7 @@ export default {
   data() {
     return {
       // 在此自动生成
-
+      outputMode: "vue",
       iconCopy: ("https://static.imonkey.xueersi.com/download/vcc-resource/icon/copy-outline.svg"),
       iconDownload: ("https://static.imonkey.xueersi.com/download/vcc-resource/icon/code-download-outline.svg"),
     };
@@ -59,14 +69,14 @@ export default {
       this.copy();
     },
     copy() {
-      if (copy(this.prettyCode)) {
+      if (copy(this.outputCode)) {
         this.$message.success("代码已复制到剪贴板");
       } else {
         this.$message.error("代码复制有点问题?");
       }
     },
     download() {
-      let blob = new Blob([this.prettyCode], {
+      let blob = new Blob([this.outputCode], {
         type: "text/plain;charset=utf-8",
       });
       saveAs(blob, "VueComponent.vue");
@@ -83,6 +93,14 @@ export default {
     }
   },
   computed: {
+    isVueMode() {
+      return this.outputMode === 'vue';
+    },
+    outputCode() {
+      return this.isVueMode ? this.prettyCode : this.singleIndex;
+    },
+
+
     prettyCode() {
       try {
         return prettier.format(this.rawCode, {
@@ -95,6 +113,19 @@ export default {
       }
 
     },
+
+    singleIndex() {
+      const htmlCode = singleIndexOutput(this.rawCode);
+      try {
+        return prettier.format(htmlCode, {
+          parser: "html",
+          plugins: [parserHtml],
+          vueIndentScriptAndStyle: true,
+        });
+      } catch (error) {
+        return htmlCode;
+      }
+    }
   },
   fillter: {},
 };
diff --git a/src/libs/singleIndexOutput.js b/src/libs/singleIndexOutput.js
@@ -0,0 +1,39 @@
+import { parseComponent } from 'vue-template-compiler/browser';
+
+const outputVue2Template = `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>VCC预览</title>
+  <!-- import CSS -->
+  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
+  <style stype="text/css">#styleTemplate</style>
+</head>
+<body>
+  <div id="app">
+    #templateHolder
+  </div>
+</body>
+  <!-- import Vue before Element -->
+  <script src="https://unpkg.com/vue/dist/vue.js"></script>
+  <!-- import JavaScript -->
+  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
+  <script>
+    new Vue(#logicHolder).$mount("#app");
+  </script>
+</html>`
+
+export default function (vueCode) {
+  const { template, script, styles, customBlocks } = parseComponent(vueCode);
+
+  let newScript = script.content.replace(/\s*export default\s*/, "");
+
+  let output = outputVue2Template;
+
+  output = output.replace("#templateHolder", template.content);
+  output = output.replace("#logicHolder", newScript);
+  output = output.replace("#styleTemplate", styles[0].content);
+
+  return output;
+}
+
