基于Vue实现微前端的示例代码

2024-09-30 03:46:44

前端微服务化一直是前端社区的一个热门话题，早在2018年就有不少开发者提出过各种解决方案。或许是未得精髓，个人认为基于Web Components的实现脱离整体打包逻辑的，难以工程化。直到遇到了vue-cli 3，子模块打包的问题得以迎刃而解。2019年秋，团队内部初步实现前端分布式开发，解决了集中式开发部署的“老大难”问题。个人认为，随着WebAssembly等技术的兴起，“前端后移”越来越明显，前端微服务会成为大前端的一个趋势。下面简单分享下本人对前端微服务的一些拙见。

前言

目前的前端技术，大部分是基于JavaScript栈极其衍生的技术栈体系。从当年被人戏称为“玩具语言”发展到今天，JavaScript的经历可谓命途多舛。早期缺少必要的规范，让JavaScript的生态自由的有点泛滥。本就是解析型语言，还多重标准，谁也不能预测下一行代码会产生什么结果。随着Node.js的到来，“前端后移”历史的车轮开始转动了。前端的打包不再是简单地混淆压缩一下，出现了import/export模块的概念，后端工程师嗅到了熟悉的味道。W3C的ES2015标准，前端模块化开始深入人心，Webpack逐渐成了前端开发的事实标准，TpyeScript等强类型衍生语言也开始出现，大前端圈空前繁荣。随着大量了后端语言（特别是Java这类面向对象语言）的标准加入，前端开发终于从Web开发中脱离出来自立门户。前端工程化伴随着“前后端分离”的潮流，席卷了整个互联网。GitHub等开源社区上前端项目如雨后春笋般涌现。

痛点

前端工程化固然是好事，但前端项目一多就存在难以整合的问题。特别是前端技术栈不一致的情况下，React团队开发的小功能不能被Vue团队复用。前端工程也期待能拥有后端的远程调用RPC接口。通过调用前端RPC接口就能跨平台渲染。这就好比是JVM平台都能解析class字节码一样方便。目前整合不同系统的方案大部分是使用iframe简单嵌套，不优雅但能用。谷歌提出的WebAssembly可能是不错的方案，但离商用太远。

方案

目前如何有效整合前端应用呢？综合考虑了新老系统的特点，大致分了三种情况。

关键代码如下：

<div class="puzzle-box">
 <div class="puzzle-item" v-for="puzzle in puzzles" :key="puzzle.id" :style="'height:' + puzzle.height + ';width:' + puzzle.width">
  <div v-if="puzzle.type === 'iframe'">
   <iframe :src="puzzle.src" :style="'width:100%;height:' + puzzle.height "></iframe>
  </div>
  <div v-if="puzzle.type === 'module'">
   <puzzle-module v-bind:url="puzzle.url"></puzzle-module>
  </div>
  <div v-if="puzzle.type === 'native'">
   <div v-append="puzzle.content" :style="'width:100%;height:' + puzzle.height"></div>
  </div>
 </div>
</div>
<script>
  const content=`<h1>前端开发迭代计划</h1><table class="table table-bordered table-striped table-hover"><tr><th>序号</th><th>需求</th><th>优先级</th><th>负责人</th><th>计划完成日期</th></tr><tr><td>1</td><td>大数据的自助分析平台</td><td>高</td><td>工程师A</td><td>2020-04-08</td></tr><tr><td>2</td><td>自定义模板、调用时传入XML，引擎生成报表结果</td><td>高</td><td>工程师A</td><td>2020-04-08</td></tr></table>`
  const puzzles = [
    { id: 1, type: 'module', url: 'http://localhost:9081/list.js',width: '100%',height: '400px'},
    { id: 2, type: 'native', content: content, width: '50%', height: '400px'},
    { id: 3, type: 'iframe', src: 'http://cn.bing.com/',width: '50%',height: '400px'},
  ]
</script>

iframe嵌入

iframe嵌入是是目前大多数人使用的方式，基本没有开发量。

原生html嵌入

这种方式外部接口提供html文本，本地系统划一块地方出来给你自己渲染，如划一个600x800的div用来渲染报表。使用vue-append作为渲染组件。这种方式可以摆脱iframe，自由度也比较大。缺点是不容易实现规范化，有点像内嵌的广告页面。

模块化嵌入

使用模块打包的概念，通过webpack将子模块各个分拆独立打包成模块再通过静态文件方式加载到外部系统做展现。这也是目前团队内部使用的方案。通过遍历模块目录（一般就是业务vue页面）批量生成配置文件。

 .......

  function readDirectory(directory) {
   fs.readdirSync(directory).forEach((file) => {
    const fullPath = path.resolve(directory, file);
    if (fs.statSync(fullPath).isDirectory()) {
     if (scanSubDirectories) readDirectory(fullPath);
     return;
    }
    if (!regularExpression.test(fullPath)) return;
    //files[directory.substring(directory.lastIndexOf(path.sep))+ path.sep +file] = fullPath
    files[directory.substring(parentPath.length+1)+ path.sep +file] = fullPath
    //console.log(files)
   });
  }

  .......

最终就会按模块输出打包好的js文件，发布是可以实现按需集成。

到此这篇关于基于Vue实现微前端的文章就介绍到这了,更多相关基于Vue实现微前端内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

前端框架学习总结之Angular、React与Vue的比较详解

近几年前端的技术发展很快,细分下来,主要可以分成四个方面: 1.开发语言技术,主要是ES6&7,coffeescript,typescript等: 2.开发框架,如Angular,React,Vue.js,Angular2等: 3.开发工具的丰富和前端工程化,像Grunt,Gulp,Webpack,npm,eslint,mocha这些技术: 4.前端开发范围的扩展,如服务端的nodejs,express,koa,meteor,GraphQL;移动端和跨平台的PhoneGap,ionic,Reac
前端框架Vue.js中Directive知识详解

Directive 看上去虽然和Angular中的定义类似,Directive 都是对DOM功能的一种拓展,但是 Vue 的 Directive 要弱的多.因为 Vue Component 其实本来就会包含对DOM的操作,所以大多数时候我们写一个通用组件都是一个Component 而不是一个 Directive,而在 Angular 我们写一个通用的组件一般都是一个 Directive . 所以我说 Vue 的 Directive 相比于 Angular 要弱的多,也可以说纯粹的多,他就是对
VUE前端cookie简单操作

如下是简单cookie操作,当前仅限前端实例,具体内容如下要注意的有两点: 1.cookie内容存贮的名称 2.删除cookie是通过设置过期为过去时间实现的 <body> <div id="app"> <button @click="clearCookie()"> 清除cookie </button> </div> </body> <script> let app = new V
Vuex和前端缓存的整合策略详解

如何存放或更新缓存? 缓存数据来源是预知的,我们可以预先定义哪些 mutation 是缓存相关的. 我们期望这个过程更自然一点,通过某种变化自动映射,使以后不管缓存类别增加还是减少都能修改极少的代码来应对变化. Vuex的插件可以拦截 mutations,借助这个机制,我们可以制定一种策略化的规则. 可以规定,所有需要更新缓存的 mutationType 都要符合这种格式:module-type-cacheKey,非缓存的 mutationType 格式为 module-type. 那么就可以拦
利用vue + element实现表格分页和前端搜索的方法

前言 ElementUI是饿了么前端开源的一个基于Vue的前端框架,已经帮我们封装好了一系列功能性的组件,比如栅格系统.表格.表单.树形菜单.通知等.对于搞后台管理界面的项目,特别是不需要考虑兼容ie8.ie9以下的项目.ElementUI是一个不错的选择. 而且ElementUI的文档写得十分详尽,参照demo可以很快上手. 本文主要介绍了关于vue + element实现表格分页和前端搜索的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 实现思路 1.前端后台管理
详解vue 单页应用（spa）前端路由实现原理

写在前面:通常 SPA 中前端路由有2种实现方式: window.history location.hash 下面就来介绍下这两种方式具体怎么实现的一.history 1.history基本介绍 window.history 对象包含浏览器的历史,window.history 对象在编写时可不使用 window 这个前缀.history是实现SPA前端路由是一种主流方法,它有几个原始方法: history.back() - 与在浏览器点击后退按钮相同 history.forward() - 与
前端框架Vue.js构建大型应用浅析

真正的模块化前端模块化很早就开始了,无论是 require.js,browserify 进行模块化打包, 还是 Angular 进行依赖注入,我们都可以把JS代码分成一个个小的模块并组装起来.然后我们还会通过 less 或者 sass 来把CSS文件也拆成一个个小的模块来写,甚至我们在CSS代码中感受到了封装,继承,多态等面向对象的特性. 然而,在 webpack 出来之前,我们所谓的模块化根本不能算作模块化.为什么这么讲,因为我们存在一个重要的问题没有解决,就是JS模块对CSS模块的依赖
详解前后端分离之VueJS前端

前言前端用什么框架都可以,这里选择小巧的vuejs. 要实现的功能很简单: 1.登录功能,成功将服务器返回的token存在本地 2.使用带token的header访问服务器的一个资源本次实验环境: "dependencies": { "vue": "^2.2.1" }, "devDependencies": { "babel-core": "^6.0.0", "babel-
Vue前端开发规范整理(推荐)

基于Vue官方风格指南整理一.强制 1. 组件名为多个单词组件名应该始终是多个单词的,根组件 App 除外. 正例: export default { name: 'TodoItem', // ... } 反例: export default { name: 'Todo', // ... } 2. 组件数据组件的 data 必须是一个函数. 当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方),它的值必须是返回一个对象的函数. 正例: // In a .vue fi
基于Vue实现微前端的示例代码

前端微服务化一直是前端社区的一个热门话题,早在2018年就有不少开发者提出过各种解决方案.或许是未得精髓,个人认为基于Web Components的实现脱离整体打包逻辑的,难以工程化.直到遇到了vue-cli 3,子模块打包的问题得以迎刃而解.2019年秋,团队内部初步实现前端分布式开发,解决了集中式开发部署的"老大难"问题.个人认为,随着WebAssembly等技术的兴起,"前端后移"越来越明显,前端微服务会成为大前端的一个趋势.下面简单分享下本人对前端微服
基于vue的验证码组件的示例代码

最近在自己写页面,模仿思否论坛,然后写登录注册UI的时候需要一个验证码组件. 去搜一下没找到什么合适的,而且大多都是基于后端的,于是自己手写一个. 演示分析验证码组件分析验证码功能随机出现的数字大小写字母 (基础功能) 不同的数字或者字母有不同的颜色 (功能优化) 不同的数字或者字母有不同的字体大写 (功能优化) 不同的数字或者字母有不同的边距 (功能优化) 不同的数字或者字母有不同的倾斜角度 (功能优化) 更多功能优化... 分析组件功能可以设置生成验证码的长度 (基本功能) 可以设置
基于vue展开收起动画的示例代码

之前用jquery实现还很简单,然后用vue就一直不行,然后在网上找了很多,又仔细看了vue官网的过渡&动画,发现其实很简单 (可以多看vue官网过渡&动画实现更多效果) 1.实际效果 2.代码  .box{ height:200px;width: 200px; background-color:black; } .draw-enter-active, .draw-leave-active { transition: all 1s ease; } .d
Vue qiankun微前端实现详解

目录引言 What:微前端是什么 Why:为什么选择微前端微前端能做到什么为什么不使用iFrame How:微前端实践在主应用中注册微应用在子应用导出相应的生命周期钩子结尾引言前端时间有个契机,让我们团队开始进行微前端的相关实践. 最近正好有些成果了,来一个阶段性的总结,也方便后续进一步的开发. 可能第一次听说微前端的同学都会不明觉厉,那么ta到底是个啥?本章会从以下3个角度阐述我的理解: What:微前端是什么 Why:为什么选择微前端 How:微前端实践 What:微前端是什
基于vue 实现token验证的实例代码

vue-koa2-token 基于vue的做了token验证前端部分(对axios设置Authorization) import axios from 'axios' import store from '../store' import router from '../router' //设置全局axios默认值 axios.defaults.timeout = 6000; //6000的超时验证 axios.defaults.headers.post['Content-Type'] =
vue实现图片滚动的示例代码(类似走马灯效果)

上次写了一个简单的图片轮播,这个相当于在上面的一些改进.这个组件除了可以进行图片滚动外,也可以嵌入任何内容的标签进行滚动,里面用了slot进行封装. 父: <template> <div id="app"> <er-carousel-index :typeNumber=2 :pageNumber=3 :timeSpace=2 :duration=2 :isOrNotCircle="true" url="/src/js/inde
vue 运用mock数据的示例代码

本文介绍了vue 运用mock数据的示例代码,分享给大家,具体如下: 初始化你的项目话不用啰嗦,首先初始化你的项目,最简单的就是使用vue-cli啦 vue init webpack 引入mock.js 安装 mockjs npm install --save-dev mockjs 引入到Vue原型上,方便使用 import mockjs from 'mockjs' Vue.prototype.$mock = Vue.$mock = mockjs.mock 以上引入到Vue原型上,可以使用 t
vue生成随机验证码的示例代码

本文介绍了vue生成随机验证码的示例代码,分享给大家,具体如下: 样式自调,最终效果如图: 实现效果: 点击右边input框会自动切换,如果输入的值与字不同,则清空换一串随机数 HTML <input type="text" placeholder="请输入验证码" class="yanzhengma_input" @blur="checkLpicma" v-model="picLyanzhengma"
如何在vue中使用ts的示例代码

本文介绍了如何在vue中使用ts的示例代码,分享给大家,具体如下: 注意:此文并不是把vue改为全部替换为ts,而是可以在原来的项目中植入ts文件,目前只是实践阶段,向ts转化过程中的过渡. ts有什么用? 类型检查.直接编译到原生js.引入新的语法糖为什么用ts? TypeScript的设计目的应该是解决JavaScript的"痛点":弱类型和没有命名空间,导致很难模块化,不适合开发大型程序.另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程. typescript不仅可
2分钟实现一个Vue实时直播系统的示例代码

前言我们在不敲代码的时候可能会去看游戏直播,那么是前台怎么实现的呢?下面我们来讲一下. 第一步,购买云直播服务首先,你必须去阿里云或者腾讯云注册一个直播服务.也花不了几个钱,练手的话,几十块钱就够了. 这里我拿阿里云举例,购买完了,配置好推流域名跟播流域名,下面我们将进行地址生成.记住下面生成的地址,下面会用到. 第二步,下载本地推流工具 https://obsproject.com/ 第三步,设置OBS 在第一步中图片底部有推流地址,需要注意,分为两部分填入下方图所示. 在AppName字

基于Vue实现微前端的示例代码

相关推荐

随机推荐