update: 集成vant,可以正常渲染

Author: shangbin

src/libs/UIComponentInit.js

@@ -1,19 +1,16 @@
 // 其它UI组件库应该在这里集成
 function loadVant() {
-  const vantLoadPromise = (() => import("vant"))();
   (() => import("vant/lib/index.css"))();
-  vantLoadPromise.then((vantModule) => {
-    self.globalApp.use(vantModule);
-  });
+  const vantLoadPromise = (() => import("vant"))();
+  return vantLoadPromise;
 }
 
 function loadAntD() {
-  const vantLoadPromise = (() => import("ant-design-vue"))();
   (() => import("ant-design-vue/dist/antd.css"))();
-  vantLoadPromise.then((vantModule) => {
-    self.globalApp.use(vantModule);
-  });
+  const vantLoadPromise = (() => import("ant-design-vue"))();
+  return vantLoadPromise;
 }
 
-loadAntD();
-loadVant();
+export default function loadCompontents() {
+  return Promise.all([loadAntD(), loadVant()]);
+}

src/libs/main-panel.js

@@ -71,7 +71,7 @@ export class MainPanelProvider {
         if (this.editMode) {
             // 渲染当前代码
             const readyForMoutedElement = this.createMountedElement();
-            createBaseApp(componentOptions).mount(readyForMoutedElement);
+            createBaseAppAsync(componentOptions).then(app => app.mount(readyForMoutedElement));
 
             // 拍平数据结构
             this.flatDataStructure(rawDataStructure);
@@ -80,7 +80,7 @@ export class MainPanelProvider {
             this.enableEditMode();
         } else {
             // 渲染当前代码
-            createBaseApp(componentOptions).mount(this.mountedEle);
+            createBaseAppAsync(componentOptions).then(app => app.mount(this.mountedEle));
         }
 
         return this;

src/libs/store.js

@@ -21,4 +21,7 @@ const store = createStore({
   }
 })
 
-globalApp.use(store);
+export default function loadStore(app) {
+  app.use(store);
+  return app;
+}

src/main.js

@@ -11,27 +11,44 @@ import {
 import "element-plus/dist/index.css";
 
 import APP from "./App.vue";
+import loadCompontents from "@/libs/UIComponentInit.js";
+import loadStore from "@/libs/store.js";
 
-function createBaseApp(renderComponent = {}) {
+function loadTemplate(renderComponent, loadFinished = () => {}) {
   const app = createApp(renderComponent);
   app.use(ElementPlus);
+  loadCompontents().then((modules) => {
+    for (let index = 0; index < modules.length; index++) {
+      const module = modules[index];
+      app.use(module);
+      loadFinished(app);
+    }
+  });
+  return app;
+}
 
-  app.component("question-filled", QuestionFilled);
-  app.component("circle-plus", CirclePlus);
-  app.component("refresh", Refresh);
-  app.component("delete", Delete);
-  app.component("document-copy", DocumentCopy);
-  app.component("minus", Minus);
+function createBaseAppSync(renderComponent = {}) {
+  return loadTemplate(renderComponent);
+}
 
-  return app;
+function createBaseAppAsync(renderComponent = {}) {
+  return new Promise((resolve, reject) => {
+    loadTemplate(renderComponent, (app) => {
+      resolve(app);
+    });
+  });
 }
 
-const globalApp = createBaseApp(APP);
-globalApp.mount("#app");
+const app = createBaseAppSync(APP);
 
-// 内部需要同样配置的全局Vue
-self.createBaseApp = createBaseApp;
-self.globalApp = globalApp; // 内部需要使用Vuex
+app.component("question-filled", QuestionFilled);
+app.component("circle-plus", CirclePlus);
+app.component("refresh", Refresh);
+app.component("delete", Delete);
+app.component("document-copy", DocumentCopy);
+app.component("minus", Minus);
+
+loadStore(app).mount("#app");
 
-import("@/libs/store.js");
-import("@/libs/UIComponentInit.js");
+// 内部需要同样配置的全局Vue
+self.createBaseAppAsync = createBaseAppAsync;