vue3 主应用

作者: sweetBoy_9126 | 来源:发表于2023-02-23 16:21 被阅读0次

无星的微前端之旅（三）——qiankun改造
1、CreateApp
Vue3学习与实战 · 组件通信
文档基础
学习vue3 proxy
ViewUI Icon组件的vue3改造
快速上手微前端框架 icestark （二）
Vue3中使用vue-router、vuex
qiankun
Elements in iteration expect to

main

main.ts

import { createApp } from "vue"
import App from "./App"
import router from "./router"
import "@/micro"
import { store } from "@/store"

createApp(App).use(router).use(store).mount("#app")

micro/app.ts

import actions from "@/shared/action"
import { store } from "@/store"

const getActiveRule = (hash: string) => (location: { hash: string }) =>
  location.hash.startsWith(hash)

const microApps: {
  name: string
  entry: string
  activeRule: string
}[] = [
  {
    name: "subapp",
    entry: "http://127.0.0.1:8082",
    activeRule: "#/subapp",
  },
]

export const apps = microApps.map((item) => {
  return {
    ...item,
    container: "#subapp", // 子应用挂载的div
    activeRule: getActiveRule(item.activeRule),
    props: {
      routerBase: item.activeRule, // 下发基础路由
      // getGlobalState: actions.getGlobalState, // 下发getGlobalState方法
      store,
    },
  }
})

micro/index.ts

import {
  addGlobalUncaughtErrorHandler,
  registerMicroApps,
  start,
} from "qiankun"
import Nprogress from "nprogress"
import "nprogress/nprogress.css"
import { ElLoading } from "element-plus"
import { apps } from "./app"
let loadingInstance: ReturnType<typeof ElLoading.service>

registerMicroApps(apps, {
  beforeLoad: (app) => {
    Nprogress.start()
    loadingInstance = ElLoading.service()
    console.log("before load", app.name)
    return Promise.resolve()
  },
  afterMount: (app) => {
    Nprogress.done()
    loadingInstance.close()
    console.log("after mount", app.name)
    return Promise.resolve()
  },
})

addGlobalUncaughtErrorHandler(() => {
  loadingInstance.close()
  console.log("子应用加载失败，请检查应用是否可运行")
})

export { start }

router/index.ts

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';

export const routes: RouteRecordRaw[] = [
  // 基座应用自己的路由
  {
    path: '/login',
    component: () => import('../views/Login'),
  },
  {
    path: "",
    component: () => import('../views/Layout'),
    redirect: "/home",
    children: [
      {
        path: "/home",
        name: "首页",
        component: () => import('../views/Home'),
      },
      {
        path: "/subapp",
        component: () => import('../views/SubApp'),
        name: "子应用",
        children: [
          {
            path: "/subapp/child1",
            name: "child1",
            // 这里的二级菜单组件是没有意义的，但是 ts 必须要传一个 component，所以随便写一个就行，为了解决 ts bao'cuo
            component: import("../views/Portal")
          },
          {
            path: "/subapp/child2",
            name: "child2",
            component: import("../views/Portal")
          }
        ]
      }
    ]
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

store/index.ts

import actions from "@/shared/action"
import { createStore } from "vuex"

export const store = createStore({
  state() {
    return {
      token: "111",
      name: "",
    }
  },
  mutations: {
    setToken(state, token) {
      state.token = token
      actions.setGlobalState({ ...state, token })
      actions.offGlobalStateChange()
    },
    setName(state, name) {
      state.name = name
    },
  },
})

App.tsx

import { defineComponent } from "vue"
import "element-plus/dist/index.css"
import "./App.less"
import { useStore } from "vuex"
const App = defineComponent({
  setup: (props, context) => {
    const store = useStore()

    return () => (
      <>
        <div>token: {store.state.token}</div>
        <router-view />
      </>
    )
  },
})
export default App

这里需要注意如果你的子应用是二级菜单那么你的容器 id，必须在根 Layout 组件或者一级路由组件里声明，而且容器id和子应用调用必须写在同一个组件里，否则打包后无效，因为我们可能有多个子应用，所以我直接在 Layout 里写，这样就避免我每次都要写一遍容器id和调用一次start

views/Layout

import { defineComponent, onMounted } from "vue"
import { ElContainer, ElAside, ElMain, ElHeader } from "element-plus"
import s from "./index.module.less"
import { SlideBar } from "../../components/SliderBar"
import { start } from "qiankun"
import { store } from "@/store"
const Layout = defineComponent({
  setup: (props, context) => {
    const handleClick = () => {
      store.commit("setToken", "2222")
    }
    onMounted(() => {
      if (!window.qiankunStarted) {
        window.qiankunStarted = true
        start({
          sandbox: {
            experimentalStyleIsolation: true,
          },
        })
      }
    })
    return () => (
      <div class={[s.layoutWrapper, "common-layout"]} onClick={handleClick}>
        <ElContainer>
          <ElHeader class={s.header}>header</ElHeader>
          <ElContainer>
            <ElAside width='240px' class={s.aside}>
              <SlideBar />
            </ElAside>
            <ElMain class={s.main}>
                <div id="subapp" />
              <router-view />
            </ElMain>
          </ElContainer>
        </ElContainer>
      </div>
    )
  },
})
export default Layout

SlideBar/index.tsx

import { ElMenu, ElMenuItem, ElSubMenu } from 'element-plus';
import { defineComponent } from 'vue';
import { RouteRecordRaw } from 'vue-router';
import { routes } from '../../router';
import s from './index.module.less'
export const SlideBar = defineComponent({
  setup: (props, context) => {
    const filterRoutes = routes.filter((route)=> route.path === "")[0]?.children

    const renderItem = (route: RouteRecordRaw) => {
      return (
        <>
          {route.path ? (
            <ElMenuItem index={route.path}>{route.name}</ElMenuItem>
          ) : null} 
        </>
      )
    }

    return () => (
      <div class={s.slideBarWrapper}>
        <ElMenu
          activeTextColor='#ffd04b' 
          backgroundColor='#545c64'
          class={"el-menu-vertical-demo"}
          textColor="#fff"
          router
        >
          {
            filterRoutes!.map(route => (
              <>
                {
                  route.children && !!route.children.length ? (
                    <ElSubMenu index={route.path}
                      v-slots={
                        {
                          title: () => (<span>{route.name}</span>)
                        }
                      } 
                    >
                        {
                          route.children.map(child => renderItem(child))
                        }
                      </ElSubMenu>
                  ) : renderItem(route)
                } 
              </>
            ))
          }
        </ElMenu>
      </div>
    )
  }
});

views/Portal/index.tsx

import { start } from "@/micro"
import { defineComponent, onMounted } from "vue"

const Portal = defineComponent({
  setup: (props, context) => {
    return () => <div  />
  },
})
export default Portal

views/SubApp/index.tsx

import { start } from 'qiankun';
import { defineComponent, onMounted } from 'vue';
const SubApp = defineComponent({
  setup: (props, context) => {
    return () => (
      <>
      <router-view />
      </>
    )
  }
});
export default SubApp;

vite.config.ts

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import vueJsx from "@vitejs/plugin-vue-jsx"
import { resolve } from "path"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx({
      transformOn: true,
      mergeProps: true,
    }),
  ],
  resolve: {
    extensions: [".ts", ".tsx", ".json", ".js", ".vue"],
    alias: {
      "@": resolve("src"),
    },
  },
})

子应用

main.ts

import { createPinia } from "pinia"
import {
  renderWithQiankun,
  qiankunWindow,
  QiankunProps,
} from "vite-plugin-qiankun/dist/helper"
import { createApp, App as VueApp } from "vue"
import App from "./App"
import { router } from "./router"
import { useUserStore } from "./store/user"

let app: VueApp<Element>

const render = (props: QiankunProps | { container: string }) => {
  const { container } = props
  app = createApp(App)
  app
    .use(router)
    .use(createPinia())
    .mount(
      container
        ? container instanceof HTMLElement
          ? container.querySelector("#app")!
          : container
        : document.getElementById("app")!
    )
}

if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  render({ container: "#app" })
} else {
  renderWithQiankun({
    mount(props) {
      console.log(props, "sss")
      const { store: parentStore, onGlobalStateChange, setGlobalState } = props
      console.log(1)
      onGlobalStateChange((state, prev) => {
        console.log(state, prev)
        store.setToken(state.token)
      })
      console.log("--mount")
      render(props)
      const store = useUserStore()
      store.setToken(parentStore.state.token)
    },
    bootstrap() {
      console.log("--bootstrap")
    },
    update() {
      console.log("--update")
    },
    unmount() {
      console.log("--unmount")
      app?.unmount()
    },
  })
}

vite.config.ts

iimport vueJsx from "@vitejs/plugin-vue-jsx"
import { defineConfig, loadEnv } from "vite"
import { resolve } from "path"
import vue from "@vitejs/plugin-vue"
import qiankun from "vite-plugin-qiankun"

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  // base: "http://localhost:3002/",
  const root = process.cwd()
  const env = loadEnv(mode, root)
  const { VITE_PUBLIC_PATH, VITE_DROP_CONSOLE } = env
  return {
    base: mode !== "production" ? "/" : "http://127.0.0.1:8082/", // 生产环境需要指定域名
    server: {
      port: 8082,
      cors: true,
    },
    resolve: {
      extensions: [".ts", ".tsx", ".json", ".js", ".vue"],
      alias: {
        "@": resolve("src"),
      },
    },
    plugins: [
      vue(),
      vueJsx({
        transformOn: true,
        mergeProps: true,
      }),
      qiankun("subapp", {
        useDevMode: true,
      }),
    ],
  }
})

router

import { qiankunWindow } from "vite-plugin-qiankun/dist/helper"
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"

const routes: RouteRecordRaw[] = [
  {
    path: "/subApp",
    component: () => import("@/views/Layout"),
    name: "Layout",
    children: [
      {
        path: "a",
        component: () => import("@/views/A"),
      },
    ],
  },
]

export const router = createRouter({
  history: createWebHashHistory(
    qiankunWindow.__POWERED_BY_QIANKUN__ ? "/subapp" : "/"
  ),
  routes,
})

无星的微前端之旅（三）——qiankun改造
微前端改造这里以Vue3为例子，主应用和子应用均使用vue3 路由的话，建议主应用和子应用使用相同模式，即均为h...
1、CreateApp
CreateApp 创建应用之前Vue2 现在Vue3: 使用createApp返回一个提供应用上下文的应用实例...
Vue3学习与实战 · 组件通信
在使用Vue3构建中大型web应用时，组件通信肯定是不可避免的。本文就具体介绍一下使用Vue3的 props、...
文档基础
Vue3中文文档收获基础一.应用&组件实例 1.1.根组件 constRootComponent={/* 选项...
学习vue3 proxy
vue3的数据响应用了proxy的方式，所有特来实验一下下。
ViewUI Icon组件的vue3改造
为了学习和应用vue3，我们开始了把viewui（https://github.com/view-design/V...
快速上手微前端框架 icestark （二）
思考微前端中都需要哪些通信主应用与子应用通信子应用之间的通信主应用与子应用通信主应用传参到子应用 sto...
Vue3中使用vue-router、vuex
1. Vue3程序主入口 2. vue-router 的使用官方文档[https://next.router.v...
qiankun
主应用子应用
Elements in iteration expect to
开发vue3应用时，下面的模板提示错误：运行没有问题，但在eslint中提示错误Elements in iter...