首页 > 其他分享 >vue3+vite项目中使用qiankun的方式

vue3+vite项目中使用qiankun的方式

时间:2023-01-30 17:22:48浏览次数:43  
标签:vue container import app props qiankun vue3 router vite

需要安装的依赖:   "vite-plugin-qiankun": "1.0.10", "vue-tsc": "^0.40.7" "vite": "3.0.9", "@vitejs/plugin-vue": "^1.6.0", "vue": "^3.2.37", "vue-router": "^4.1.3",   vue项目入口文件main.ts :   import { createApp } from 'vue' import App from './App.vue' import routes from './router/routes' import store from './store/index' import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper' import { createRouter, createWebHistory } from 'vue-router'   let router: any = null let app: any = null let history: any = null function render(props?) {   let container   if (props) {     container = props.container     props.onGlobalStateChange((state, preState) => {       if (state.globalToken) {         store.commit('setToken', state.globalToken)         localStorage.setItem('token', state.globalToken)       }     }, true)   }   history = createWebHistory(qiankunWindow.__POWERED_BY_QIANKUN__ ? '/appSub' : '/')   router = createRouter({     history,     routes,   })     app = createApp(App)   app.use(store)   app.use(router)   app.mount(container ? container.querySelector('#app') : document.getElementById('app')) }   renderWithQiankun({   bootstrap() {},   mount(props) {     render(props)   },   unmount() {     app.unmount()     app._container.innerHTML = ''     history.destroy() // 不卸载  router 会导致其他应用路由失败     router = null     app = null   }, })   // 独立运行时 if (!qiankunWindow.__POWERED_BY_QIANKUN__) {   render() }          

标签:vue,container,import,app,props,qiankun,vue3,router,vite
From: https://www.cnblogs.com/shidawang/p/17076712.html

相关文章

  • vue3 重置数据
    第一种import{reactive}from'vue'classInitFormData{username:string=''sex:number=1age:number=0}letformData=reactive(newInitForm......
  • vue3实现禁用物理按键返回,但是可以通过自定义app-bar的返回按钮返回
    1.注意app-bar是一个所有页面都会用到的顶部title栏,里面左侧有返回按钮;2.基于1,在app-bar组件的setup里添加这个代码:onMounted(()=>{//不能少history.pu......
  • vue3基础API
    创建项目vitecreatevite项目名--template模板名模板可参考https://github.com/vitejs/vite/tree/main/packages/create-vite以下内容皆使用setup语法糖ref......
  • Vue3+TypeScript 项目中,配置 ESLint 和 Prettier
    接上篇:从0搭建vite-vue3-ts项目框架:配置less+svg+pinia+vant+axios文档同步项目gitee:https://gitee.com/lixin_ajax/vue3-vite-ts-pinia-vant-less.git 一、Eslint:用于......
  • Asp.Net7 与 Vue3 组成的 BFF模式
    大家好,我是没有好工作的后端开发工程师,兼云原生方向的运维,被社会毒打被迫学习前端,写文保平安。介绍BFF模式BackendForFrontend(服务于前端的后端)初看我们会感觉它是M......
  • Vue3学习(二) 全家桶,从 0 到 1 实战项目
    Vue3全家桶,从0到1实战项目 前端发展百花放,一技未熟百技出。未知何处去下手,关注小编胜百书。我是前端人,专注分享前端内容!本篇文章主要是,使用vite创建一个vue......
  • vue3学习(一)
    vue3的搭建项目及启动 1、npm和git提前安装好。新建文件夹右键,选择GitBashHere2、使用npm命令安装vue/cli,这里需要使用--force运行 npminstall-g@vue/cli-......
  • vue3引入ElementPlus实现OOS前端直传
    1.1开通OSS服务登录阿里云官网;将鼠标移至产品标签页,单击对象存储OSS,打开OSS产品详情页面;在OSS产品详情页,单击立即开通。1.2后端整合OSS实现文件上传在pom.xml中添......
  • vue3语法糖+ts组件传值
    在开发中有些功能是通用的,而且逻辑大致相同,像这种东西可以封成一个组件,比较常用的就是函数封装,组件封装,组件封装是需要引入到页面使用的,所以通常它会有一些自己的方法,父子......
  • vue3和百度地图关键字检索 定位 点击定位
    效果图在index.html中引入百度地图开放平台  去申请你的ak非常的简单可以自己百度一下<!--这个用官网给的有好多警告更具百度的把https://api.map.baidu.com......