inti

src/App.tsx

@@ -1,22 +1,18 @@
 import { defineComponent } from 'vue'
-import RayTransitionComponent from '@/components/RayTransitionComponent/index.vue' // 以封装动画路由组件
-import DraggableComponent from '@/components/DraggableComponent/index.vue'
-import RayScrollReveal from '@/components/RayScrollReveal/index'
-import R from '@/icons/ray.svg' // 使用 vite-svg-loader 作为 svg 使用插件, 故而不需要使用 RayIcon 作为组件引入
-import RayIcon from '@/components/RayIcon/index'
 
 const App = defineComponent({
   name: 'App',
   setup() {
-    const { x, y } = useMouse()
     const { height: windowHeight } = useWindowSize()
-    const { t } = useI18n()
+    const numRef = ref(1)
+
+    window?.$wujie?.bus.$on('addState', (val: number) => {
+      numRef.value += val
+    })
 
     return {
-      x,
-      y,
       windowHeight,
-      ray: t,
+      numRef,
     }
   },
   render() {
@@ -25,24 +21,8 @@ const App = defineComponent({
         class="app-wrapper"
         style={`height: ${this.windowHeight}px;font-size: 22px; color: #FDD192;padding: 20px;`}
       >
-        组件形式使用 svg: <R style="width: 24px; height: 24px;" />
+        <p>这个页面是保持激活状态</p>
-        <br />
+        <p>当前计数: {this.numRef}</p>
-        icon componet 形式使用 svg: <RayIcon name="ray" size="24" />
-        <br />
-        hello! Welcome to this template!
-        <h1>
-          当前鼠标位置: x: {this.x}, y: {this.y} {this.ray('Test')}
-        </h1>
-        <DraggableComponent />
-        {Array.from({ length: 10 }, (_, i) => i).map((_, idx) => (
-          <RayScrollReveal>
-            <div
-              style={`width: 100%; height: 300px;border: 1px solid #FDD192;margin: 20px;background: #e7f5ee;`}
-            >
-              {idx}
-            </div>
-          </RayScrollReveal>
-        ))}
       </div>
     )
   },

src/main.ts

@@ -1,5 +1,7 @@
 import { createApp } from 'vue'
 
+import type { App as AppType } from 'vue'
+
 import '@/styles/base.scss'
 
 // import 'amfe-flexible' // 如果为移动端项目, 解开该注释即可
@@ -12,15 +14,36 @@ import { setupStore } from './store/index'
 import { setupI18n } from './language/index'
 
 const setupTemplate = () => {
-  const app = createApp(App)
+  const instance = createApp(App)
 
-  setupRouter(app)
+  setupRouter(instance)
 
-  setupStore(app)
+  setupStore(instance)
 
-  setupI18n(app)
+  setupI18n(instance)
 
-  app.mount('#app')
+  instance.mount('#app')
 }
 
-setupTemplate()
+if (window.__POWERED_BY_WUJIE__) {
+  let instance: AppType<Element>
+
+  window.__WUJIE_MOUNT = () => {
+    instance = createApp(App)
+
+    setupRouter(instance)
+
+    setupStore(instance)
+
+    setupI18n(instance)
+
+    instance.mount('#app')
+  }
+  window.__WUJIE_UNMOUNT = () => {
+    instance.unmount()
+  }
+
+  window.__WUJIE.mount()
+} else {
+  setupTemplate()
+}

src/router/modules/demo.ts

@@ -1,5 +0,0 @@
-export default {
-  path: '',
-  name: 'app',
-  component: () => import('@/App'),
-}

src/router/modules/index.ts

@@ -1,5 +0,0 @@
-import demo from './demo'
-
-const routes = [demo]
-
-export default routes

src/router/routes.ts

@@ -1,3 +1,7 @@
-import autoLayoutChildrenRoutes from './modules/index'
+export const constantRoutes = [
-
+  {
-export const constantRoutes = autoLayoutChildrenRoutes
+    path: '/',
+    name: 'demo-active',
+    component: () => import('@/App'),
+  },
+]

src/types/index.d.ts

@@ -3,6 +3,32 @@ export {}
 import type CryptoJS from 'crypto-js'
 
 export global {
+  interface Window {
+    // 是否存在无界
+    __POWERED_BY_WUJIE__?: boolean
+    // 子应用公共加载路径
+    __WUJIE_PUBLIC_PATH__: string
+    // 原生的 `querySelector`
+    __WUJIE_RAW_DOCUMENT_QUERY_SELECTOR__: typeof Document.prototype.querySelector
+    // 原生的 `querySelectorAll`
+    __WUJIE_RAW_DOCUMENT_QUERY_SELECTOR_ALL__: typeof Document.prototype.querySelectorAll
+    // 原生的 `window` 对象
+    __WUJIE_RAW_WINDOW__: Window
+    // 子应用沙盒实例
+    __WUJIE: WuJie
+    // 子应用mount函数
+    __WUJIE_MOUNT: () => void
+    // 子应用unmount函数
+    __WUJIE_UNMOUNT: () => void
+    // 注入对象
+    $wujie: {
+      bus: EventBus
+      shadowRoot?: ShadowRoot
+      props?: { [key: string]: unknown }
+      location?: Object
+    }
+  }
+
   declare interface IUnknownObjectKey {
     [propName: string]: unknown
   }

vite.config.ts

@@ -67,7 +67,9 @@ export default defineConfig(async ({ mode }) => {
       },
     },
     server: {
-      ...useViteServerPlugin(),
+      ...useViteServerPlugin({
+        port: 7749,
+      }),
     },
   }
 })