vue3+vite+ts实现qiankun微前端子应用

 本文章只是使用vue3实现在vue2主应用程序下的子应用哈,主应用创建可以看我这篇vue2使用qiankun微前端(跟着步骤走可实现)-CSDN博客

1.项目创建

我用的pnpm创建的,看你们,具体创建项目不会的话可以网上搜下,我就不多说了

pnpm create vite@latest

或者

npm create vite@latest

2.下载qiankun的vite包

vite-plugin-qiankun

3.在main.ts文件下添加如下代码(建议复制)

记得下vue-router包,不然获取不到路由啦

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import router from "./router";
import {
  renderWithQiankun,
  qiankunWindow,
} from "vite-plugin-qiankun/dist/helper";

let app: any;
// 判断是否在qiankun环境下
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  createApp(App).use(router).mount("#app");
} else {
  renderWithQiankun({
    // qiankun的生命周期,挂载
    mount(props) {
      // 传递的值可以获取到了
      app = createApp(App);
      app.use(router);
      app.mount(
        props.container
          ? props.container.querySelector("#app")
          : document.getElementById("app")
      );
    },
    // 应用加载
    bootstrap() {
      console.log("--bootstrap");
    },
    // 修改
    update(props) {
      console.log("--update", props);
    },
    // 销毁
    unmount() {
      console.log("--unmount");
      app?.unmount();
    },
  });
}

4.创建2个路由页面(名字随意)

在router/index.ts文件下添加路由

注意!!

  // 路由模式必须改为history模式,不然不生效

  history: createWebHistory(import.meta.env.BASE_URL),

// 通过vue-router实现路由配置
import { createRouter, createWebHistory } from "vue-router";
// import { constantRoute } from "./routers";
const constantRoute = [
  {
    path: "/",
    component: () => import("../view/admin.vue"),
    name: "login", //命名路由做菜单权限
  },
  {
    path: "/son",
    component: () => import("../view/son.vue"),
    name: "son", //命名路由做菜单权限
  },
];
// 创建路由器
let router = createRouter({
  // 路由模式必须改为history模式,不然不生效
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: constantRoute,
  //   滚动行为
  scrollBehavior() {
    return {
      left: 0,
      top: 0,
    };
  },
});
export default router;

5.在vite.config.ts文件添加如下代码

  activeRule: '/sub-vite',和  base: "/sub-vite", //必须和基座也就是主应用的activeRule值一致

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import qiankun from "vite-plugin-qiankun";
// const packName = require('./package').name  // 必须要指定当前子应用命名
// https://vitejs.dev/config/
export default ({ mode }) => {
  return defineConfig({
    base: "/sub-vite", //必须和基座也就是主应用的activeRule值一致
    server: {
      port: 3002, //端口号
      cors: true,
      origin: "http://localhost:3002", //运行地址
      headers: {
        "Access-Control-Allow-Origin": "*", //避免跨域
      },
    },
    plugins: [
      vue(),
      qiankun("sub-vite", {
        useDevMode: true,
      }),
    ],
  });
};

记得在App.vue下写router-view哦

运行的地址如下:http://127.0.0.1:3002/sub-vite/

7.在主应用main-app.js添加vue3的子应用 (主应用在我的上一篇,连接在最上面)

这个entry就是上面vue3运行的地址


const microApps = [
    {
        name: 'test', // 子应用名称
        entry: 'http://localhost:7663/', //子应用运行地址
        activeRule: '/test-web',//匹配的路由
        sanbox: true //解决css冲突
    },
    {
        name: 'sub-vite', // app name registered
        entry: 'http://127.0.0.1:3002/sub-vite/', //项目地址
        activeRule: '/sub-vite',
        sanbox: true //解决css冲突
    },
]

const apps = microApps.map(item => {
    return {
        ...item,
        container: '#test-web', // 子应用挂载的div
        props: {
            routerBase: item.activeRule // 下发基础路由
        }
    }
})

export default apps

主应用的router/index.js添加如下

import Vue from "vue";
import VueRouter from "vue-router";
import HomeView from "../views/HomeView.vue";
import layout from '../views/qiankun/index.vue'
Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "home",
    component: HomeView,
  },
  {
    path: "/about",
    name: "about",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
  },
  {
    path: "/test-web/*",
    meta: 'test-web',
    component: layout
  },
  {
    path: "/sub-vite/*",
    meta: 'sub-vite',
    component: layout
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;

8.效果

文章到此结束,希望对你有所帮助~

  • 14
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
对于Vue 3 + Vite + TypeScript实现PC端适配,你可以遵循以下步骤: 1. 安装Vue 3和Vite:首先,确保你已经安装了Node.js和npm。然后运行以下命令来全局安装Vite和创建一个新的项目: ``` npm install -g create-vite create-vite my-app --template vue-ts cd my-app npm install ``` 2. 安装依赖:进入项目目录后,使用npm安装所需的依赖项,包括一些可能用到的UI库或CSS框架,例如Element Plus、Ant Design等等。 3. 创建布局组件:在src目录下创建一个Layout组件,作为整个应用的主要容器。这个组件将包含头部、侧边栏和主体内容。 4. 使用路由:在src目录下创建一个router目录,并在其中创建一个index.ts文件。在这个文件中,你可以使用Vue Router创建路由配置,并在主要布局组件中使用<router-view>来渲染不同的页面。 5. 创建页面组件:在src目录下创建一个views目录,并在其中创建各个页面的组件。每个页面组件将包含该页面的内容。 6. 创建样式文件:你可以使用CSS、SCSS或者其他CSS预处理器来编写样式。在src目录下创建一个styles目录,并在其中创建一个全局样式文件。 7. 实现响应式布局:Vue 3引入了Composition API,你可以使用`reactive`和`ref`等函数来处理响应式布局。根据不同的屏幕尺寸,你可以使用媒体查询或CSS框架的栅格系统来调整布局。 8. 添加适配代码:你可以使用Vue的全局mixin或自定义指令来添加适配代码。在适配代码中,你可以根据屏幕尺寸或其他条件,动态改变样式、布局或内容。 以上是一个大致的步骤,你可以根据实际需求和项目的复杂性进行调整。希望对你有所帮助!如果有任何问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值