精华内容
下载资源
问答
  • angluar6+vue微前端demo

    2020-11-24 22:57:03
    微前端架构具备以下几个核心价值: 技术栈无关 主框架不限制接入应用的技术栈,子应用具备完全自主权 独立开发、独立部署 子应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新 独立运行时 每个子...
  • 我们知道微前端父子通信方式有很多, 例如 location、Cookie、LocalStorage、window, 但是他们都有一个通病, 即无法实时监测变化, 例如换肤或者多语言切换, 想要应用到子项目, 必须进行页面的刷新, 然后才能通知到, ...

    介绍

    我们知道微前端父子通信方式有很多, 例如 locationCookieLocalStoragewindow, 但是他们都有一个通病, 即无法实时监测变化, 例如换肤或者多语言切换, 想要应用到子项目, 必须进行页面的刷新, 然后才能通知到, 而尽量少的改动原项目的原则, 很多Vue项目都是基于vuex进行全局数据的共享, 所以才诞生了vuex-micro-frontends.

    特点

    • 父子传递、实时变化
    • 仅 1kb

    安装

    yarn add vuex-micro-frontends # npm install vuex-micro-frontends
    

    使用

    // master 主应用, 负责发送数据
    import vuexMicroFrontends from "vuex-micro-frontends";
    
    const store = new Vuex.Store({
      state: {
        name: "jack",
        age: 10,
        gender: "men"
      },
      plugins: [vuexMicroFrontends.send()] // 默认下发全部数据
      // plugins: [vuexMicroFrontends.send(['name', 'age'])] // 仅向子应用下发 name 和 age 数据
    });
    
    // slave, 子应用, 负责接受数据
    import vuexMicroFrontends from "vuex-micro-frontends";
    
    const store = new Vuex.Store({
      state: {
        name: ""
      },
      plugins: [vuexMicroFrontends.receive()] // 默认接受全部父组件传递的数据
      // plugins: [vuexMicroFrontends.receive(['name'])], // 仅接受 name 字段数据
    });
    
    展开全文
  • 主应用 UmiJS , 子应用同时支持 Umi , Vue2.x , Vue3.x(不稳定) demo示例 https://github.com/ldinger/umi-qiankun-vue-demo.git 说明 :本例是参考 umi-plugin-qiankun 添加了vue 子应用 。 applications 为所有...
    Demo技术组合选择

    主应用 UmiJS , 子应用同时支持 Umi , Vue2.x , Vue3.x(不稳定)

    demo示例

    https://github.com/ldinger/umi-qiankun-vue-demo.git

    在这里插入图片描述

    说明 :本例是参考 umi-plugin-qiankun 添加了vue 子应用 。
    applications 为所有应用目录 , 安装完环境 后在各各应用目录 分别 执行 tyarn 或者 yarn 安装 依赖
    包后在根目录执行 tyarn start

    master 主应用 --基于 umijs

    app1 子应用 --基于umijs

    vueapp2 子应用 --基于 vue

    环境安装及命令
    #安装tyarn
    npm i yarn tyarn -g
    # umi 安装 
    tyarn global add umi
    # 依赖包安装 (在项目文件所在目录 执行 等价 npm i )
    tyarn
     # 开发环境起动
    tyarn start
    # 打包
    tyarn build 
    
    参考链接

    ​ https://github.com/umijs/umi-plugin-qiankun ( umijs -qiankun 插件demo )

    ​ https://qiankun.umijs.org/zh/guide ( qiankun )

    ​ https://umijs.org/zh-CN/docs ( umijs )

    为什么选UmiJS
    • 基于 React 的 以 路由为基础 。它有很多实用的插件比如 权限、数据流、约定式路由 …
    • 大厂在用 、活跃度高
    动态路由方案

    开发环境 , 修改 mock/app.js

    // 依据映射数据会自动注册对应的子应用服务 
    export default {
    
        "GET /api/apps": [
            { "name": "app1", "entry": "//localhost:8001/", "base": "/app1" },
            { "name": "vueapp2", "entry": "//localhost:8002/", "base": "/vueapp2"},
            { "name": "app3", "entry": "//localhost:8003/", "base": "/app3" }
        ]
    }
    
    // 说明:  name 子应用唯一标识 , entry 子应用入口地址  , base 对应的子应用路由设置
    
    数据共享方案

    主应用参考代码

    主应用根目录/ app.js

    import request from './services/request';
    const fetch = require("dva").fetch;
    import { setData} from './rootExports';
    
    export const qiankun = request('/apps').then(apps => {
    
        const F  = { "mountElementId": "root-subapp-container"};
         // 向子应用传递数据方式一 子应用为vue时建议   ( 添加 props )
        const props = {  k12 : 'google is  died  ' };
    
        apps = apps.map(app => Object.assign({ props }, app  , F ));
    
        // 向子应用传递数据方式二  - 子应用为umi时建议  (rootExports )
        setData( props )
        return {
            apps,
            fetch: url => {
                console.log('静态资源fetch覆盖');
                return fetch( url  );
            }
    
        }
    
    });
    

    子应用 vue 参考代码

    根目录 main .js 中 配置

    // 注册为子应用后的生命周期函数  mount  ,
    export async function mount(props) {
      console.log('[vue] 数据 from 主应用', props );
    
      // 将拿到的数据 提交到全局数据仓库
      store.commit('setK12' , props.k12 ) ;
    	
      // 执行子应用自己的渲染函数 
      render(props);
    }
    

    子应用 Umi 参考

    在任一对应的页面 / 组件中 import useRootExports 组件

    import { useRootExports } from 'umi';
    const DEFAULT = {  k12 : ' 做为非子应用时的数据 '} ;
    
    export default function() {
      const rootExports = useRootExports();
    
      // 共享的数据 
      const gdata = rootExports && rootExports.getData() || DEFAULT;
     
      const style = { color: 'red'}
      console.log('rootExports', rootExports, gdata);
      return (
        <div>
          <h1 style={style}>{`global data from main app   & ${gdata.k12}`}</h1>
        </div>
      );
    }
    
    跨服务器部署方案

    解决跨域问题 , nginx 参考 配置

    # 主应用
    server {
            listen 9527;
            gzip on;
            gzip_min_length 1k;
            gzip_comp_level 9;
            gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
            gzip_vary on;
            gzip_disable "MSIE [1-6]\.";
    
            location / {
                root /datas/umi-qiankun-vue-demo/applications/master/dist;   
                try_files $uri $uri/ /index.html =404;   
            }
            
      
      # 模拟后端返回子应用动态路由及相关数据 
    	    location  ~ ^/api/apps {
               default_type application/json;
               add_header Content-Type 'application/json; charset=utf-8';
               return 200 '[{"name":"app1","entry":"//localhost:9601/","base":"/app1"},{"name":"vueapp2","entry":"//localhost:4002/","base":"/vueapp2"},{"name":"vueapp3", "entry":"//localhost:4003/","base":"/vueapp3"}]';
            }
    }
    
    
    #子应用  - umi  
    server {
            listen 9601;
            gzip on;
            gzip_min_length 1k;
            gzip_comp_level 9;
            gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
            gzip_vary on;
            gzip_disable "MSIE [1-6]\.";
    
            #允许所有可以跨站访问 
            add_header Access-Control-Allow-Origin *;
            # 被允许的request-method
            add_header Access-Control-Allow-Method GET,POST,PUT,DELETE,OPTIONS;
    
            location / {
                root /datas/umi-qiankun-vue-demo/applications/app1/dist;   
                try_files $uri $uri/ /index.html =404;   
            }
    }
    
    
    # 子应用  -  vueapp2
    server {
            listen 9602;
            gzip on;
            gzip_min_length 1k;
            gzip_comp_level 9;
            gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
            gzip_vary on;
            gzip_disable "MSIE [1-6]\.";
    	    index index.html;
            #允许所有可以跨站访问 
            add_header Access-Control-Allow-Origin *;
            # 被允许的request-method
            add_header Access-Control-Allow-Method GET,POST,PUT,DELETE,OPTIONS;
            location / {
                root /datas/umi-qiankun-vue-demo/applications/vueapp2/dist;
                try_files $uri $uri/ /index.html =404;
            }
    }
    
    
    新建子应用方案

    参考 : https://qiankun.umijs.org/zh/guide/tutorial#vue-%E5%BE%AE%E5%BA%94%E7%94%A8

    展开全文
  • 对远程组件进一步的设计和思考 远程组件,是 Genesis 提出的一个概念,它是指通过接口,调用一个另一个服务的... 如果对本项目感兴趣的话,欢迎 Star 基于 Vue SSR 的微前端、微服务、轻量级的解决方案 传输门 文章来源

    对远程组件进一步的设计和思考

    远程组件,是 Genesis 提出的一个概念,它是指通过接口,调用一个另一个服务的组件,它可以是一个按钮、一个模块或者一个页面。

    嵌入式调用

    除了嵌入图片、视频之类的,在日常开发,嵌入调用最多的还是 iframe
    而远程组件,可以让你在服务端、客户端都能无缝的嵌入另外一个服务的页面。
    如下图:

    它的使用方式是这样子

    <template>
        <remote-view :id="1000" @myEvent="onMyEvent" :fetch="fetch" />
    </template>
    <script>
    export default {
        methods: {
            fetch () {
                // 调用其它服务的组件
                const res = await axios.get('/api/ssr-服务名称/render?url=/demo');
                if (res.status === 200) {
                    return res.data;
                }
                return null
            },
            onMyEvent () {
                // 处理远程组件的事件
            }
        }
    }
    </script>
    

    API 形式调用

    假设你有这样的一个弹框
    如下图:

    这个弹窗只有两种状态,要么取消、要么确定,操作完成。那么它可以设计成类似于下面的 API

    const res = await Popup.show(options);
    switch (res) {
        case 'cancel':
            // 用户点击[取消]的时候做些什么
            break;
        case 'confirm':
            // 用户点击[确定]的时候做些什么
            break;
    }
    

    看到上面,是不是很像我们的接口调用的方式,只不过这次调的不是接口,而是一个 UI 组件。

    而远程组件,就可以为我们将这样的 UI 组件,抽象出一个真正类似于接口的组件,所以它的调用可能是下面这样子的

    const res = await remote.get('/api/ssr-服务名称/render?url=/popup');
    switch (res) {
        case 'cancel':
            // 用户点击[取消]的时候做些什么
            break;
        case 'confirm':
            // 用户点击[确定]的时候做些什么
            break;
    }
    

    微服务

    其实 Genesis 最核心的能力在于它可以真正的实现前端版本的微服务架构,独立部署、独立运行、服务和服务之间的调用,通过 API 的形式通信,它将大大的提升了前端的创造力。而微前端的概念,只是它顺便支持的功能而已。

    为什么需要它?
    随着前端 SPA 应用的发展,项目越来越大,我们需要极其灵活的服务拆分方案,利用分治的思想,将一个大的应用,不断的拆解成一个小的应用,通过接口的形式,可以让我们的应用拆分做得更加的灵活。

    最后

    Genesis 已经推广了这么多次,但是丝毫没有引起社区的关注,其实我倒是很乐意这个概念、这个设计的思想普及到,能诞生出更多成熟的微服务架构的解决方案。
    个人的写作能力有点差,如有疑问,欢迎在 issues 讨论。
    如果对本项目感兴趣的话,欢迎 Star 基于 Vue SSR 的微前端、微服务、轻量级的解决方案

    传输门

    展开全文
  • 一、一套微前端框架通常包含四个部分:3.主应用4.子应用这里重点介绍一下,主应用,子应用的搭建过程,首先通过vue-cli创建2个vue应用,vue_main主应用,vue_child子应用二、修改主应用vue_main修改index.html,在...

    一、一套微前端框架通常包含四个部分:

    3.主应用

    4.子应用

    这里重点介绍一下,主应用,子应用的搭建过程,首先通过vue-cli创建2个vue应用,vue_main主应用,vue_child子应用

    二、修改主应用vue_main修改index.html,在head部分添加以下代码:

    {

    "imports": {

    "child": "http://localhost:8081/app.js", // 确保文件浏览器中可以打开

    "single-spa": "https://cdnjs.cloudflare.com/ajax/libs/single-spa/4.3.7/system/single-spa.min.js",

    "vue": "https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js",

    "vue-router": "https://cdn.jsdelivr.net/npm/vue-router@3.0.7/dist/vue-router.min.js"

    }

    }

    2.修改app.html

       logo.png

    export default {

    name: 'App',

    mounted () {

    window.System.import('single-spa').then((res) => {

    var singleSpa = res

    singleSpa.registerApplication('child', () => window.System.import('child'), location => true)

    singleSpa.start()

    })

    }

    }

    #app {

    font-family: 'Avenir', Helvetica, Arial, sans-serif;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    text-align: center;

    color: #2c3e50;

    margin-top: 60px;

    }

    这样主应用就修改好了

    三、修改子应用vue_child

    1.安装项目依赖npm i single-spa-vue systemjs-webpack-interop

    2.修改入口文件main.js// The Vue build version to load with the `import` command

    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.

    import { setPublicPath } from 'systemjs-webpack-interop'

    import Vue from 'vue'

    import App from './App'

    import singleSpaVue from 'single-spa-vue'

    import router from './router'

    setPublicPath('child')

    Vue.config.productionTip = false

    /* eslint-disable no-new */

    // new Vue({

    //   el: '#app',

    //   router,

    //   components: { App },

    //   template: ''

    // })

    const vueLifecycles = singleSpaVue({

    Vue,

    appOptions: {

    render: (h) => h(App),

    router

    }

    })

    export const bootstrap = vueLifecycles.bootstrap

    export const mount = vueLifecycles.mount

    export const unmount = vueLifecycles.unmount

    3.修改webpack配置文件webpack.base.conf.jsoutput: {

    path: config.build.assetsRoot,

    filename: '[name].js',

    library:'child',  // 新添加

    libraryTarget: 'umd',  // 新添加

    publicPath: process.env.NODE_ENV === 'production'

    ? config.build.assetsPublicPath

    : config.dev.assetsPublicPath

    },

    4.修改webpack配置文件webpack.dev.conf.js,确保子应用允许跨域devServer: {

    headers:{

    "Access-Control-Allow-Origin":"*"

    }

    }

    四.运行项目查看效果,这样在主应用中加载了子应用的内容

    1604369787775988.png

    五、通过脚手架生成子应用npm init single-spa

    展开全文
  • Vue搭建微前端

    2021-02-04 09:19:22
    最近公司来了个项目,运行起来后,控制台报错,说是找不到“XXXXX”模块,让检查...接下来,微前端搭建摸索正式开启: 首先放上官网文档地址、配置文件生成说明 一、涉及技术及框架 single-spa:连接主项目与子.
  • qiankun + vue + element 的微前端架构项目,主项目与子应用均使用vue。支持三大前端框架可根据自己需求调整。微前端 qiankun微前端是什么、为什么要做微前端、qiankun是什么这些笔者将不再叙述,在前端微服务话提出...
  • 主要介绍了基于Vue实现微前端的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 基于Vue实现微前端

    千次阅读 2020-04-19 20:52:53
    前端微服务化一直是前端社区的一个热门话题,早在2018年就有不少开发者提出过各种解决方案。或许是未得精髓,个人认为基于Web Components的实现脱离整体打包逻辑的,难以工程化。直到遇到了vue-cli 3,子模块打包的...
  • vue项目微前端试水

    2020-12-30 17:37:57
    文章目录微前端概念主应用(安装qiankun)1.存放注册的微应用2.注册微应用3.启动微应用微应用(无需安装依赖)1.修改运行时的public-path 主要解决的是微应用动态载入的 脚本、样式、图片 等地址不正确的问题。2.导出主...
  • Vue微前端实践 前言 基于目前业务需求,需要使用微前端方案进行构建。对比了 Single-SPA 和 qiankun,最终选择 qiankun 进行实现。 2018 年 Single-SPA 诞生了, single-spa 是一个用于前端微服务化的 ...
  • 微型前端脚本 微前端vue,qiankun,打字稿,例如脚手架

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 748
精华内容 299
关键字:

vue微前端

vue 订阅