微前端框架之Wujie

这篇具有很好参考价值的文章主要介绍了微前端框架之Wujie。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Wujie简介

无界的官网是这样解释的
wujie,微前端,前端,vue
具体的大家可以去官网看一下,官网上也有现成的例子,喜欢的也可以去看一下,这里只是记录一下我在项目中的使用。因为公司使用的技术框架是Vue,所以这里也是基于vue的使用。
我这里是新建的三个独立的vue项目

#项目主入口
main_view
#子项目1
sub_app_page1
#子项目2
sub_app_page2

安装

在主项目main_view 中安装 Wujie

# vue2 框架
npm i wujie-vue2 -S
# vue3 框架
npm i wujie-vue3 -S

引入

在 主项目main_view的main.js中引入

//根据自己的实际情况引入对应的版本
//vue2
import WujieVue from "wujie-vue2";
// vue3
//import WujieVue from "wujie-vue3";

Vue.use(WujieVue);

另外需要建立sub_app_page1sub_app_page2两个menu
wujie,微前端,前端,vue
接下来需要在主项目main_view 的router里面新建两个路由

  {
    path: "/sub_app_page1",
    name: "sub_app_page1",
    component: () =>import( "@/subEntry/index.vue"),
  },
  {
    path: "/sub_app_page2",
    name: "sub_app_page2",
    component: () =>import( "@/subEntry/index.vue"),
  },

看一下 @/subEntry/index.vue中的代码

<template>
  <WujieVue
    class="wujie-vue-sub"
    width="100%"
    height="100%"
    :name="$route.name"
    :url="url"
    :loadError="errorHandler"
  ></WujieVue>
</template>

<script>
import WujieVue from 'wujie-vue2';
export default {
  name: 'index',
   computed: {
    url() {
      return this.urlDict[this.$route.name];
    }
  },
  data() {
  	return{
	 urlDict: {
        sub_app_page1: 'http://localhost:8082',
        sub_app_page2: 'http://localhost:8083',
      },
	name: '', //项目唯一标识
	}
  }
  mounted() {}
};
</script>

<style lang="scss"></style>

主要配置nameurl ,其中name为 项目唯一标识,用户必须保证 ,url为需要渲染的地址,根据实际情况具体配置(具体配置参考这里)
好啦,这样三个项目就可以正常访问了(到目前为止sub_app_page1和sub_app_page2不需要配置任何东西)
wujie,微前端,前端,vue
写到这里有同学就会发现不对了,就是当我切换子系统的路由的时候,导航栏上面的地址并没有变化,这是有问题的,我们希望跟vue一样上面的地址随着路由的地址变化而变化
wujie,微前端,前端,vue
官网有提供解决方法,但是这个这个方法好像有bug,所以我们采用另一种解决方式使用bus去动态更新主项目的地址

//主项目中使用$on发出事件
 WujieVue.bus.$on('sub-route-change', (name, path) => {
 //这里动态更改导航栏上面的地址,name为项目标识,path为子项目当前路由地址
})
//子项目,监听路由变化,动态出发主项目的方法
  watch: {
    $route: {
      deep: true,
      handler() {
        window.$wujie.bus.$emit(
          'sub-route-change',
          'sub_app_page1',
          this.$route.path
        );
      }
    }
  },

wujie,微前端,前端,vue

官网有详细的例子,有兴趣可以下载看看文章来源地址https://www.toymoban.com/news/detail-612597.html

到了这里,关于微前端框架之Wujie的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端框架学习-Vue(二)

    最近在学习Vue框架,Vue中的内容很多。相当于把之前后端的MVC,V层转移到前端来编写和部署。下面是学习Vue时的大纲。 Vue生命周期是Vue应用的生命周期 Vue脚手架,即vue-cli,使用node.js 来创建和启动vue项目 Vue组件知识,整体之后一个App组件。其他的都挂在在这个根组件上。

    2024年02月15日
    浏览(42)
  • 快速搭建Vue前端框架

    Vue官方安装过程:https://cli.vuejs.org/zh/guide/installation.html 2.2 安装淘宝镜像 2.1 安装vue命令 通过vue命令来创建一个Vue工程 如果显示:“‘vue’ 不是内部或外部命令,也不是可运行的程序”,说明环境变量没有配置,需要配置一下环境变量,可以参考这个帖子: https://blog.csdn.net

    2024年03月12日
    浏览(42)
  • Vue前端框架入门

    经过一小段时间学习 我认为vue就是在原js上进行的一个加强 简化JS中的DOM操作 vue是分两个层的 一个叫做视图层(View),你可以理解为展现出来的前端页面 一个叫数据模型层(Model),包含数据和一些数据的处理方法 MVVM就是实现这两层之间的数据的双向绑定 {{}}是我们的插值表达式

    2024年02月14日
    浏览(39)
  • 前端框架Vue

    学习HTML、CSS和JavaScript基础知识:Vue是基于JavaScript的框架,所以首先需要掌握HTML、CSS和JavaScript的基础知识,包括DOM操作、事件处理、变量和函数等。 学习Vue的基本概念:了解Vue的核心概念,如Vue实例、组件、指令、生命周期等。可以通过官方文档、教程或者在线课程来学习

    2024年02月12日
    浏览(60)
  • Vue前端框架

    1.vue环境搭建 一般创建vue项目是在cmd命令中用:vue ui 命令,采用ui图形界面的方式直观创建项目。 2.vue基本使用方式:vue组件 3.文本插值 4.属性绑定 5.事件绑定 6.双向绑定 7.条件渲染 1.axios 安装axios命令:npm install axios 导入axios包 1.axios常用api 2.配置代理(解决跨域问题) 3.axio

    2024年04月12日
    浏览(37)
  • Vue(前端框架)

    Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 : 给用户看,刷新后台给的数据 网络通信 : axios 页面跳转 : vue-router 状态管理:vuex Vue-UI : ICE , Element UI Vue (读音/vju/, 类似于view)是一套用于构建用户界面的 渐进式框架 ,发布于2014年2月。与

    2024年02月08日
    浏览(38)
  • 【前端框架】Vue2合集

    1、Vue概念 vue 是一个用于构建用户界面的渐进式框架,由数据驱动 vue 的两种使用方式 vue 核心包开发:局部模块改造 vue 核心包与 vue 插件 工程化开发:整站 开发 2、 创建实例 1、准备容器 2、导包 3、创建Vue实例 4、指定配置项 = 渲染数据 3、插值表达式 插值表达式语法:

    2024年01月19日
    浏览(48)
  • 【前端框架】Vue3合集

    1、create-vue create-vue是Vue官方新的脚手架工具,底层切换到了 vite (下一代前端工具链),为开发提供极速响应 前置条件:16.0或更高版本的Node.js 安装并执行 create-vue 2、项目目录和关键文件 1、setup选项 执行时机:在beforeCreate钩子之前执行 setup函数中,不能获取this 在setup函数

    2024年01月16日
    浏览(42)
  • 【前端】搭建Vue3框架

    VScode/HBuilder等任何一种前端开发工具 node.jsnpm本地开发环境 Node.js官网:Node.js官网 安装成功后,在CMD控制台输入以下两个命令验证是否安装成功 ①、创建默认安装目录和缓存日志目录(我的node.js目录在D盘,所以直接在node.js文件夹下创建) 由于在执行全局安装语句时,安装

    2024年02月08日
    浏览(45)
  • 前端框架Vue3.0

    目录 一、创建Vue3.0工程 1.使用 vue-cli 创建 1.1. 检查@vue/cli的版本,确认是否@vue/cli版本在4.5.0以上 1.2. 安装或者升级@vue/cli 1.3 创建工程 1.4 启动Vue工程 2. 使用 vite 创建 1.1. 检查@vue/cli的版本,确认是否@vue/cli版本在4.5.0以上 代码: 实例: 1.2. 安装或者升级@vue/cli 代码: 实例:

    2024年02月13日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包