feat(core): adapt createApp

didi · Dec 4, 2023 · 1a44d0d · 1a44d0d
1 parent d3f7410
commit 1a44d0d
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 26 deletions.
diff --git a/packages/core/src/index.js b/packages/core/src/index.js
@@ -1,4 +1,4 @@
-import Vue from './vue'
+// import Vue from './vue'
 import { error, diffAndCloneA, hasOwn, makeMap } from '@mpxjs/utils'
 // import { APIs, InstanceAPIs } from './platform/export/api'
 import { APIs } from './platform/export/api'
@@ -132,7 +132,9 @@ function factory () {
   // Object.assign(Mpx.prototype, InstanceAPIs)
   // 输出web时在mpx上挂载Vue对象
   if (__mpx_mode__ === 'web') {
-    Mpx.__vue = Vue
+    // Mpx.__vue = Vue
+    Mpx.__vue = {}
+    // Mpx.__vue = app
   }
   return Mpx
 }

diff --git a/packages/webpack-plugin/lib/runtime/optionProcessor.js b/packages/webpack-plugin/lib/runtime/optionProcessor.js
@@ -101,20 +101,40 @@ export function getWxsMixin (wxsModules) {
 
 function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, tabBarMap }) {
   const option = {}
+
+  if (App.onAppInit) {
+    Object.assign(option, App.onAppInit() || {})
+  }
+
+  if (isBrowser && global.__mpxPinia) {
+    // 注入pinia
+    option.pinia = global.__mpxPinia
+  }
+
+  // const app = new Vue({
+  //   ...option,
+  //   render: (h) => h(App)
+  // })
+  const app = Vue.createApp({
+    ...option,
+    render: (h) => h(App)
+  })
+
+  app.directive('animation', animation)
+
+  // 过滤器需要重写
+  // Vue.filter('transRpxStyle', transRpxStyle)
+
+  app.config.ignoredElements = ['page']
+
   // 对于app中的组件需要全局注册
   for (const componentName in componentsMap) {
     if (hasOwn(componentsMap, componentName)) {
       const component = componentsMap[componentName]
-      Vue.component(componentName, component)
+      app.component(componentName, component)
     }
   }
 
-  Vue.directive('animation', animation)
-
-  Vue.filter('transRpxStyle', transRpxStyle)
-
-  Vue.config.ignoredElements = ['page']
-
   const routes = []
 
   for (const pagePath in pagesMap) {
@@ -266,7 +286,7 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
           throw args[0]
         }
       }
-      Vue.config.errorHandler = (...args) => {
+      app.config.errorHandler = (...args) => {
         return errorHandler(args, true)
       }
       window.addEventListener('error', (event) => {
@@ -306,20 +326,6 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
       global.__mpxRouter.__mpxHistoryLength = global.history.length
     }
   }
-
-  if (App.onAppInit) {
-    Object.assign(option, App.onAppInit() || {})
-  }
-
-  if (isBrowser && global.__mpxPinia) {
-    // 注入pinia
-    option.pinia = global.__mpxPinia
-  }
-
-  const app = new Vue({
-    ...option,
-    render: (h) => h(App)
-  })
   return {
     app,
     ...option

diff --git a/packages/webpack-plugin/lib/web/processMainScript.js b/packages/webpack-plugin/lib/web/processMainScript.js
@@ -27,11 +27,12 @@ module.exports = function (script, {
 
   let output = `\n  import { processAppOption, getComponent } from ${stringifyRequest(loaderContext, optionProcessorPath)}
           import '@mpxjs/webpack-plugin/lib/runtime/base.styl'
-          import Vue from 'vue'
+          // import Vue from 'vue'
+          import { createApp } from 'vue'
           import VueRouter from 'vue-router'
           import Mpx from '@mpxjs/core'
           import App from ${stringifyRequest(loaderContext, addQuery(resource, { isApp: true }))}
-          Vue.use(VueRouter)
+          // Vue.use(VueRouter)
   \n`
 
   if (i18n) {