微前端系列
文章平均质量分 89
一笑程序猴
工欲善其事,必先利其器
展开
-
【微前端】手把手从零开始带你实现一个React子应用的接入
前言小伙伴们大家好。今天继续给大家分享关于微前端qiankun的相关知识。前面的文章我们基于qiankun+vue2.0已经实现了一个简单的微前端应用了,并且还实现了history和hash两种路由模式的切换。在该应用中无论是主应用还是子应用我们用的都是vue的技术栈,这并没有体现出微前端的最大特点(与技术栈无关)。因此本文将在原有微前端应用的基础上再接入一个react的子应用。另外:本文目的仅仅是为了体现一下微前端与技术栈无关的特点,所以这里只描述一下接入react项目的简单步骤和关键代码,关于更多原创 2021-11-06 20:46:23 · 2544 阅读 · 2 评论 -
【微前端】手把手带你改造一个qiankun+vue2.0的hash模式的微前端应用
前言小伙伴们大家好。上篇文章我们分享了如何使用qiankun+vue2.0实现一个简单的微前端应用。在文章的最后还提到:在实现的微前端应用中,所用到的路由模式都是以history模式为基础进行路由配置的,如果按照当前的配置一旦改成hash模式,那么就会出现各种问题,页面找不到或者资源加载错乱等等。那如果就是想用hash模式该怎么办呢,接下来我们就一起来看下如何配置一个hash模式的微前端应用!本文将基于上篇文章实现的微前端应用进行修改配置,所以这里只会整理出配置的操作步骤以及需要修改的代码。完整的代码原创 2021-11-05 10:36:49 · 4215 阅读 · 0 评论 -
【微前端】手把手带你从零开始搭建一个qiankun+vue微前端应用
前言小伙伴们大家好。上一篇文章中我们分享了qiankun的一些概念和特性,以及基于qiankun实现有一个微前端应用的大概步骤,最后以qiankun加vue2.0为例给出了快速搭建qiankun微前端的一些核心代码。那么接下来将基于前面文章的操作步骤及核心代码,从零开始实现一个简单而又完整的qiankun微前端项目。此项目中仍以vue2.0为主进行项目构建。话不多说,我们马上开始。主应用利用vue脚手架创建一个vue2.0项目:qiankun-main(vue create qiankun-m原创 2021-11-04 15:55:40 · 4361 阅读 · 3 评论 -
如何利用qiankun快速搭建一个微前端项目
前言小伙伴们大家好。前一篇文章跟大家分享了一些关于微前端的知识点,包括什么是微前端,为什么要用微前端以及如何实现一个微前端,在文章的最后我们还提到了能够实现微前端的两个库:single-spa和qiankun。今天我们就一qiankun+vue为例来实现一个简单的微前端。qiankun是什么qiankun是基于single-spa封装的一个库,旨在帮助大家能够更简单。更无痛的构建一个生产可用的微前端架构系统。qiankun的核心设计理念简单由于主应用微应用都能做到技术栈无关,qia原创 2021-11-03 11:02:40 · 2360 阅读 · 1 评论 -
2021是时候了解一下微前端了
前言小伙伴们大家好。今天将给大家分享一款微前端框架 - qiankun。那么在学习框架之前我们先来了解一下什么是微前端,它是怎么产生的,又是干什么用的,为什么要使用微前端?带着这些问题我们继续往下看!什么是微前端微前端是一种可以将多个独立发布的功能构建成一个完整的web应用的技术手段。说白了就是:将一个完整web应用按照不同的功能模块拆分成一个个不同的独立的子应用,然后再通过主应用来动态的加载这些子应用。核心就是先拆然后后再合。来看个例子:比如现有一个庞大的项目管理系统,该系统由项目模块,计划模原创 2021-11-02 10:21:13 · 1635 阅读 · 0 评论