feat: 支持输出Vue2以及Vue3代码

2026-01-12 07:13:08 +08:00 · 2022-03-16 19:57:21 +08:00
parent 45e13cde40
commit fbac556ed6
4 changed files with 147 additions and 42 deletions
--- a/src/components/Code.vue
+++ b/src/components/Code.vue
@@ -6,7 +6,7 @@
    <div style="color: #666; font-size: 12px; text-align:center; margin: 5px;">使用代码前请确认相应的组件库已集成至项目</div>
    <div style="text-align:left;">
      <el-row>
-        <el-col :span="6">
+        <el-col :span="5">
          输出形式：
          <el-radio-group v-model="outputMode" style="display: flex; flex-direction: column;">
            <el-radio label="vue">Vue</el-radio>
@@ -14,7 +14,7 @@
          </el-radio-group>
        </el-col>

-        <el-col :span="6" v-if="outputMode === 'html'">
+        <el-col :span="5" v-if="outputMode === 'html'">
          选择所使用的组件库：
          <el-checkbox-group v-model="checkList" style="display: flex; flex-direction: column;">
            <el-checkbox label="ele">Element UI</el-checkbox>
@@ -22,6 +22,13 @@
            <el-checkbox label="vant">Vant</el-checkbox>
          </el-checkbox-group>
        </el-col>
+        <el-col :span="4" v-if="outputMode === 'html'">
+          选择Vue版本：
+          <el-radio-group v-model="vueVersion" style="display: flex; flex-direction: column;">
+            <el-radio label="2">Vue 2</el-radio>
+            <el-radio label="3">Vue 3</el-radio>
+          </el-radio-group>
+        </el-col>
        <el-col :span="10" style="display: flex; flex-direction: column;">
          代码获取方式：
          <div style="margin-top: 10px;">
@@ -33,7 +40,8 @@
            </el-tooltip>
          </div>
          <div style="margin-top: 10px;" v-if="outputMode === 'html'">
-            <el-input v-model="fileName" placeholder="部署文件名" style="width: 150px; margin-right: 10px;" size="small"></el-input>
+            <el-input v-model="fileName" placeholder="部署文件名" style="width: 150px; margin-right: 10px;" size="small">
+            </el-input>
            <el-button size="small" type="danger" :loading="loading" @click="release">
              一键部署至VCC静态页面托管服务</el-button>
            <div v-if="accessUrl">部署成功：<a :href="accessUrl" target="_blank">{{accessUrl}}</a></div>
@@ -71,7 +79,8 @@ export default {
      loading: false,
      accessUrl: '',
      fileName: '',
-      checkList: ['ele']
+      checkList: ['ele'],
+      vueVersion: '3'
    };
  },
  beforeCreate() { },
@@ -150,7 +159,7 @@ export default {
    },

    singleIndex() {
-      const htmlCode = singleIndexOutput(this.rawCode);
+      const htmlCode = singleIndexOutput(this.rawCode, this.checkList, this.vueVersion === '3');
      try {
        return prettier.format(htmlCode, {
          parser: "html",
--- a/src/libs/singleIndexOutput.js
+++ b/src/libs/singleIndexOutput.js
@@ -1,39 +1,105 @@
-import { parseComponent } from 'vue-template-compiler/browser';
+import { parseComponent } from "vue-template-compiler/browser";
+import ejs from "ejs";

-const outputVue2Template = `<!DOCTYPE html>
+const outputVueTemplate = `
+<!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>
+  <title>页面预览</title>
+  <style stype="text/css">
+    <%= style %>
+  </style>
+  <% for(var i = 0; i < cssLibs.length; ++i) { %>
+  <link href="<%= cssLibs[i] %>" rel="stylesheet"><% } %>
 </head>
 <body>
  <div id="app">
-    #templateHolder
+    <%- 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>`
+<% for(var i = 0; i < scriptLibs.length; ++i) { %>
+<script src="<%= scriptLibs[i] %>"></script><% } %>
+<script>

-export default function (vueCode) {
+  <% if(vue3) {%>Vue.createApp(<%-logicHolder%>)<% for(var i = 0; i < vue3UseLib.length; ++i) { %>
+      .use(<%= vue3UseLib[i] %>)<%}%>
+      .mount("#app"); %>
+  <% } else {%>new Vue(<%- logicHolder %>).$mount("#app")<%}%>
+</script>
+</html>`;
+
+const libAddressMap = {
+  vue: {
+    js: ["https://cdn.bootcdn.net/ajax/libs/vue/3.2.31/vue.global.min.js"],
+    css: "",
+  },
+  ele: {
+    js: ["https://cdn.bootcdn.net/ajax/libs/element-plus/2.1.0/index.full.min.js"],
+    css: "https://cdn.bootcdn.net/ajax/libs/element-plus/2.1.0/theme-chalk/index.min.css",
+    libName: "ElementPlus",
+  },
+  antd: {
+    js: [
+      "https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.8/dayjs.min.js",
+      "https://cdn.bootcdn.net/ajax/libs/ant-design-vue/3.0.0-alpha.14/antd.min.js",
+    ],
+    css: "https://cdn.bootcdn.net/ajax/libs/ant-design-vue/3.0.0-alpha.14/antd.min.css",
+    libName: "antd",
+  },
+  vant: {
+    js: ["https://cdn.bootcdn.net/ajax/libs/vant/3.3.7/vant.min.js"],
+    css: "https://cdn.bootcdn.net/ajax/libs/vant/3.3.7/index.min.css",
+    libName: "vant",
+  },
+};
+
+export default function (vueCode, dependenciesLibs, vue3 = true) {
  const { template, script, styles, customBlocks } = parseComponent(vueCode);

  let newScript = script.content.replace(/\s*export default\s*/, "");

-  let output = outputVue2Template;
+  const tempDependenciesLibs = dependenciesLibs.slice();
+  const tempLibAddressMap = vue3 ? libAddressMap: libAddressMapForVue2

-  output = output.replace("#templateHolder", template.content);
-  output = output.replace("#logicHolder", newScript);
-  output = output.replace("#styleTemplate", styles[0].content);
+  tempDependenciesLibs.unshift("vue");
+
+  const output = ejs.render(outputVueTemplate, {
+    cssLibs: tempDependenciesLibs.map((item) => tempLibAddressMap[item].css).filter((item) => !!item),
+    scriptLibs: tempDependenciesLibs
+      .map((item) => tempLibAddressMap[item].js)
+      .flat()
+      .filter((item) => !!item),
+    vue3,
+    vue3UseLib: tempDependenciesLibs
+      .filter((item) => item != "vue")
+      .map((item) => tempLibAddressMap[item].libName),
+    style: styles[0].content,
+    templateHolder: template.content,
+    logicHolder: newScript,
+  });

  return output;
 }

+const libAddressMapForVue2 = {
+  vue: {
+    js: ["https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"],
+    css: "",
+  },
+  ele: {
+    js: ["https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.7/index.min.js"],
+    css: "https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.7/theme-chalk/index.min.css",
+  },
+  antd: {
+    js: [
+      "https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js",
+      "https://cdn.bootcdn.net/ajax/libs/ant-design-vue/1.7.8/antd.js",
+    ],
+    css: "https://cdn.bootcdn.net/ajax/libs/ant-design-vue/1.7.8/antd.css",
+  },
+  vant: {
+    js: ["https://cdn.bootcdn.net/ajax/libs/vant/2.12.44/vant.min.js"],
+    css: "https://cdn.bootcdn.net/ajax/libs/vant/2.12.44/index.min.css",
+  },
+};