① 轻量、高效、功能强大的微前端框架-MicroApp
这几年后端的微服务是比较火爆，我们公司目前只要是新项目，基本上都是基于微服务去架构的，那么微前端是什么呢？
微前端是借鉴了微服务的架构理念，核心在于将一个庞大的前端应用拆分成多个独立灵活的小型应用，每个应用都可以独立开发、独立运行、独立部署，再将这些小型应用融合为一个完整的应用，或者将原本运行已久、没有关联的几个应用融合为一个应用。微前端既可以将多个项目融合为一，又可以减少项目之间的耦合，提升项目扩展性，相比一整块的前端仓库，微前端架构下的前端仓库倾向于更小更灵活
以前我们为了把几个独立运行的小型应用合并成一个应用都是通过iframe的方式去实现的，如果不考虑体验问题，iframe 几乎是最完美的微前端解决方案了。
iframe 最大的特性就是提供了浏览器原生的硬隔离方案，不论是样式隔离、js 隔离这类问题统统都能被完美解决。但他的最大问题也在于他的隔离性无法被突破，导致应用间上下文无法被共享，随之带来的开发体验、产品体验的问题
micro-app不是基于iframe架构的
micro-app提供了js沙箱、样式隔离、元素隔离、预加载、数据通信、静态资源补全等一系列完善的开箱即用功能
micro-app没有任何依赖
为了保证各个业务之间独立开发、独立部署的能力，micro-app做了诸多兼容，在任何技术框架中都可以正常运行。
下面我讲一下如何在Vue中使用micro-app
1、初始化一个基座应用
2、基座应用的文件修改
main.js修改
router.js修改
3、main-page.vue页面
4、创建一个子应用
5、子应用的router.js文件修改
6、src目录下新建 public-path.js
7、 main.js 引入public-path.js
到此这个简单的微应用就搭好了
觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧
② 5分钟看懂VUE项目
VUE是前端开发框架。诞生于2014年吧。
原始的前端开发框架需要工程师写html、写css、写javascript(js)。js是脚本语言，浏览器可以运行js来执行一些js支持的动作，例如点击反馈，下拉菜单、操作html的DOM元素之类。这样开放效率就很低了。
后来诞生了一些前端开发框架，VUE就是其中之一。目前在国内前端开发中，特别是手机app的h5页面的开发部分，被很多公司采用。
使用VUE开发的时候，不需要js直接操作html元素，只需要管理js的变量值，html会自动更新这些值。传统的html配合js能完成的功能，VUE都给出了实现方案，开发只写简单的html和js语句就可以实现。
VUE开发的工具一般是visio stdio code（vscode），稍微适应两天就可以熟练应用了。还是很强大的。
但是vscode本身只是编辑器，开发编译类语言需要自己配编译环境，具体我没配过。
前端开发不需要配编译环境了，只需要把需要的各种库、工具在命令行界面安装就行。具体过程网上搜“从零开始搭建vue项目”。
刚建立好的项目一定是下面这种目录结构（ranktable.vue是我后加的
这对于新手村的人会引起头晕呕吐，老子啥都没写就出来这么多文件，不但数量不少，文件种类还齐全。
学习VUE别想一下吃的太多，除非你本身前端经验丰富。否则先看懂红色箭头的几个文件吧，看懂这几个就算入门了。看的顺序严格按照下面这样。
index.html->main.js->App.vue->index.js->HelloWorld.vue
我将这几个文件大概讲一讲，你就能有个清晰的脉络了。
一、index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>tradedatapy</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
页面开发当然是要有html了，VUE开发也不例外。这个html就是整个项目的入口了。只不过是<body>里面过于简单。<div id="app"></div>表示本html绑定了一个id为app的VUE对象。
二、main.js
new Vue({ //new Vue语句就是定义了一个VUE对象
el: '#app', //vue对象的id是app
router,
components: { App }, //vue的组件名是APP
template: '<App/>' //template 名是APP
})
这就定义了一个app的VUE对象，index.html就可以找到它了。
三、App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App' //export 了名为App的组件，main.js就可以找到它了
}
</script>
上面的template都理解为html的一部分片断就行了，片断可以拼接到html对应的位置，构成一个有内容的完整的页面。<img src="./assets/logo.png">这句被我注释了，否则页面会显示这个图片的。下面的<route-view/>部分是路由，根据用户的url不同，会路由到不同的vue文件，进而展示不同的页面内容。
四、index.js
项目里有不只一个index.js，一定看准了，我要讲解的是router目录下的index.js.
//这里的配置决定了App.vue里<router-view/>位置会展示什么内容
export default new Router({
routes: [
{
path: '/', //当用户访问 http://localhost:8080/ 根目录也就是默认目录会被路由到HelloWorld组件，
//这个组件的所有内容会被在App.vue里<router-view/>显示出来
name: 'HelloWorld',
component: HelloWorld
},
{//当用户访问 http://localhost:8080/ranktable 会显示ranktable.vue内容
//ranktable.vue是我后加的
path: '/ranktable',
name: '/ranktable',
component: ranktable
}
]
})
五、HelloWorld.vue
最后看看这里有什么
<template>
<div>
原来的内容被我删除了，现在页面显示这句话。
</div>
</template>
<script>
</script>
vscode命令行执行npm run dev，看见下面说明成功了，将地址贴进浏览器
Compiled successfully in 983ms 15:43:26
I Your application is running here: http://localhost:8080
如果想要更复杂的功能，在helloworld.vue实现就行了，比如我要一个填表查询功能，里面改成
<template>
<div>
<group title="城市">
<selector placeholder="请选择城市" v-model="demo01" title="" name="district" :options="list" @on-change="onChange1"></selector>
</group>
<group title="街道">
<selector placeholder="请选择街道" v-model="demo03" title="" name="district" :options="list4" @on-change="onChange3" @click.native="onClickpz"></selector>
</group>
<group title="小区">
<selector placeholder="请选择小区" v-model="demo02" title="" name="district" :options="list3" @on-change="onChange2" @click.native="onClickheyue"></selector>
</group>
<group title="日期">
<selector placeholder="请选择日期" v-model="demo04" title="" name="district" :options="list5" @on-change="onChange4" @click.native="onClickdate"></selector>
</group>
<group title="统计类型">
<selector placeholder="请选择统计类型" v-model="demo06" title="" name="district" :options="list6" @on-change="onChange6"></selector>
</group>
<div style="padding:15px;">
<x-button type="primary" @click.native="getValue('plainValueRef')">查询</x-button>
</div>
</div>
</template>
<script>
import { Selector, Group, Cell, CellBox, XButton } from 'vux'
此处省略很多东西
</script>
这个例子有点复杂，需要下面<script>里实现很多内容，引入vux的一些组件，vux大家可以自行研究。效果是这样的
③ 如何通俗地理解前端开发，它与后端开发有何联系与不同
对于这个问题，我是这么理解的:前端开发面向用户，后端开发面向机器。
前端开发理解和定位
如何理解和定位前端开发，最简单的方法是从各大招聘网站上，查看各个公司对前端开发职位的岗位要求，就能清晰了解前端开发:前端开发主要负责图形化类产品的研发、制作和升级，参与手机端和PC端的WEB产品、APP开发，根据产品需求开局兆发高质量前端页面，积极探索前端开发技术的发展，优化用户交互方式，提升用户体验。
前端开发主要技术
前端技术包括Javascript、CSS、XML、HTML5、JSON等，需要熟悉使用HTML和CSS进行页面布局，掌握JQuery、Vue、React、Angular等框架或库的技术原理和使用方法，前端开发也需要对不同设备及平台有一定了解，理解不同操作系统及浏览器的兼容性区别。
后端开发理解和定位
后端开发的工作职责主要包括参与业务系统需求分析、产品讨论、系统架构设计、技术选型、产品研发、系统优化重构等。后端开发需要具有扎实的计算机科学功底、扎实的编程基础，掌握常用的系统架构原理、搭建和优化方法，解决系统建设面临的关键问题和技术难点。
后端开发主要技术
后端开发以设计开发高可用、高效率、高安全系统为目标，不局限于单一编程语言，主要技术包括分布式计算、中间件、数据库、计算机网络、人工智能、信息安全等方面技术，由于后端开发涉及面广，后端开发人员最好具备一定的项目管理知识和经验，有助于组织协调，推进项目开展。
前端开发与后端开发的联系
如果将系统睁氏分为视图-控制-模型三层，前端开发主要实现视图层，后端开发实现控制和模型层。技术上都是桐早租运用分层、解藕、模块化的思路提高开发集成效率、增强可维护行和可扩展性，近年来前端开发出现的Vue,React,Angular等框架大大推动了前端技术的发展，前端开发前途光明。
④ 前端Vue框架作用是什么
简洁高效方便的开发前端页面，提升前端渲染性能，数据驱动，让开发者将注意力集中在数据的渲染上而不是其他事情上
⑤ 微前端qiankun
微前端qiankun 使用，一些注意事项。附上 qiankun官网
主应用(vue)
1、安装qiankun
2、修改 main.js
主应用到这就可以了，下面的是一些扩展加载微应用事项
3、router页面配置加载微应用
修改主应用router.js
在About.vue文件中加入
4、如果在vue-admin模板中使用干坤，需要注意的是：
<div id="container"></div> 不能写在页面中，只能写在Appmain.vue 中，
路由需要配置重定向
判断改变路由（这里可写配置文件，偷懒就写死了）
AppMain.vue,需要判断显示的是哪个微应用，改变其id显示
微应用（vue）
1、在 src 目录新增 public-path.js：
2、 main.js 修改。
3、打包配置修改（vue.config.js）：
微应用（react）
1、在 src 目录新增 public-path.js：
2、设置 history 模式路由的 base：
3、 index.js 修改
4、webpack 配置
安装插件 @rescripts/cli。
根目录新增 .rescriptsrc.js：
修改 package.json：
⑥ qiankun 微前端应用实践与部署（四）
一般情况下，我们对应用进行配置打包，要对图片字体等资源进行下面配置，使得资源路径正常加载。但是，在微前端模式下，子应用打包部署后，往往会出现子应用 css 文件里面引入资源路径加载失败的问题，下面就让我们来探究一下。
👉 独立应用下的 url-loader 配置：
因为 url-loader 的 options 项的属性 publicPath 属性默认是 '' ，表示相对路径，即打包出来的资源引用 url 都会加上相对路径寻找 static 静态资源入口，比如：
所有应用编译打包部署后，当主应用加载子应用，子应用加载自身的 css 文件样式时，由于 其对应的 css 文件里面的图片 url 引用是相对路径，会出现子应用的资源相对路径拼接主应用 domain 的情况，即子应用的 ../../static/img/bg_header.790a94f4.png 会在主应用的 domain 下进行资源的寻找，导致加载失败 404 的情况。
如果项目有用到第三方库，比如 element-ui ，那么就更有必要进行处理了。因为 element-ui 的字体图标是在 css 里面引入的，还有相关背景图片的引入也是在 css 里，所以需要配置 webpack 的 url-loader ，生产模式情况下直接指定资源前缀，使之成为绝对路径。
这样配置后，打包出来的 css 样式文件会变成：
资源是绝对路径，就不会出现上面子应用资源加载失败的情况。
但是，这种前端配置文件写死路径的做法灵活性并不好，比如不能做到编译一次，任意部署，因为路径写死，所以如果需要部署到其他服务器的话，就需要重新编译了。
接下来，讲的是实现灵活部署的方案。
我们在只编译打包一次前端应用的前提下，为了实现灵活部署，需要借助 nginx 来实现。
下面以 vue-cli 3 的配置为例，与 vue-cli 2 只是写法上的区别，其他都一样。
假设主应用部署地址是 192.168.2.192 ，子应用的部署地址是 192.168.2.192:7102 。
打包编译部署后，子应用的 css 文件里面的图片资源引用 url 如下：
主应用加载子应用的时候，子应用的资源拼接主应用 domian 后，子应用的 css 文件里面的图片资源加载路径 url 就会变成：
此时的关键就是要访问到子应用的资源，而不是去主应用资源目录去找。
所以我们采用 nginx 路径代理转发端口的方案，当应用访问 192.168.2.192/live 这个路径时，经过 nginx 进行路径代理转发配置，转发到子应用端口。
配置 nginx 代理规则：
此时真正访问的资源路径（子应用资源路径）是：
👋 至此，通过修改配置 url-loader 的 publicPath 以及配置 nginx 的路径代理转发，就可以实现编译打包一次，到处部署的目的。
⑦ qianKun + VUE 实现微前端架构 (基于vue2实现)
创建两个项目作为实现demo，一个为主应用，一个为子应用
3.配置函数文件 microAppSetting
4.微应用出口文件 index.js
5.在App.vue内配置微应用容器及跳转菜单
6.在main.js文件内引入微应用出口文件 index.js
7.运行后展示
8.在配置完子应用后的主应用展示
点击子应用菜单
1.修改子应用路由文件内路由实例属性： base 为 "/child"
2.在main.js文件内导出生命周期钩子
3.配置Webpack、跨域与端口号
在vue.config.js内添加：
4.运行后展示
package.json
⑧ 微前端quankun Vue应用 action+Vuex通信方式的实现
action + Vuex 通信主要是使用官方的 action 进行通信，之后再将值更新到 vuex 中
1、初始化 action
创建 src -> shared -> actions.js
2、在 Vue 组件中使用
1、把主应用中的初始化的action映射到微应用中
创建 src -> shared -> actions.js
2、在mounted的生命周期里注入actions实例
main.js
3、在 Vue 组件中使用
这样就实现 action + Vuex 的通信方式。
主要还是开篇这句话：
action + Vuex 通信主要是使用官方的 action 进行通信，之后再将值更新到 vuex 中
主要参考文章：
干坤官网通信API
微前端qiankun Vue应用间通信的思考
qiankun的简单使用和通信