乾坤微前端，零基础入门到精通，收藏这篇就够了

一、什么是微前端

微前端就是将不同的功能按照不同的未读拆分成多个子应用，通过主应用来加载这些子应用，微前端的核心在于拆，拆完后再合

二、为什么使用微前端

1. 不同团队间开发一个应用技术栈不同
2. 希望每个团队都可以独立开发，独立部署
3. 项目中还需要老的应用代码

我们可以将一个应用划分成若干哥子应用，将子应用打包成一个个的lib，当路径切换时加载不同的子应用，这样每个子应用都是独立的，技术栈也不用做限制了！从而解决了前端协同开发的问题

三、qiankun框架

文档地址：https://qiankun.umijs.org/zh

2018 年 Single-SPA 诞生了， single-spa 是一个用于前端微服务化的 JavaScript 前端解决方案 ( 本身没有处理样式隔离， js 执行隔离 ) 实现了路由劫持和应用加载。

2019 年 qiankun 基于 Single-SPA, 提供了更加开箱即用的 API （ single-spa + sandbox + import-html-entry ） 做到了，技术栈无关、并且接入简单（像 i frame 一样简单）。

四、qiankun框架实例

这里打算建立三个项目进行实操，都是用的vue技术栈（这里不限技术栈）,qiankun-base充当主应用，qiankun-vue和qiankun-vue1充当子应用

1、创建三个应用

1. 创建基座

   1. vue create qiankun-base
      

2. 创建子应用1

   1. vue create qiankun-vue
      

3. 创建子应用2

   1. vue create qiankun-vue1
      

      三个项目：基座：qiankun-base,子应用：qiankun-vue,qiankun-vue1

注意：这里如果时选的vue2.x创建的项目，之后用router和store的时候要注意版本号和写法的对应

2、项目配置（主要）

1、基座qiankun-base配置

项目创建好后我们首先进行主应用qiankun-base的配置，进入man.js文件进行配置，在main.js中加入以下代码，要注意的是，entry这项配置是我们两个子项目的域名和端口，我们必须确保两个子项目运行在这两个端口上面，container就是我们的容器名，就是我们子应用挂载的节点，相当于Vue项目里面的app节点，activeRule就是我们的激活路径，根据路径来显示不同的子应用

• 引入qiankun插件

yarn add qiankun 或者 npm i qiankun -S

• main.js配置

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import less from 'less';
import Vuex from 'vuex';

// 引入乾坤
import { registerMicroApps, start, initGlobalState } from 'qiankun';
import store from './store/store'

Vue.use(ElementUI)
Vue.use(less)
Vue.use(Vuex)
Vue.config.productionTip = false

let propsData = {
  sex: '女',
  age: 18,
  userName: '小莫'
}
const actions = initGlobalState(propsData);
// 主项目项目监听和修改（在项目中任何需要监听的地方进行监听）
actions.onGlobalStateChange((state, prev) => {
  //state变更后的状态，prev变更前的状态
  console.log("改变前的值", prev);
  console.log("改变后的值", state);
});
//将actions对象绑到Vue原型上，为了项目中其他地方方便使用
Vue.prototype.$actions = actions

const apps = [
  {
    name: 'vueApp1',//应用的名字
    entry: '//localhost:8081',//默认会加载这个html解析里面的js动态的执行(子应用必须支持跨域)fetch
    container: '#vue1',//容器名
    activeRule: '/main/vue',//激活的路径
    props: propsData,
  },
  {
    name: 'vueApp2',//应用的名字
    entry: '//localhost:8082',//默认会加载这个html解析里面的js动态的执行(子应用必须支持跨域)fetch
    container: '#vue2',//容器名
    activeRule: '/main/vue1',//激活的路径
    props: propsData,
  }
]

registerMicroApps(apps);//注册应用
start({
  prefetch: false//取消预加载
});//开启
new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

• 配置完之后，这里我写了一个侧边栏引用其他子应用到基座中

• <!--
   * @Author: mowencong 2829621014@qq.com
   * @Date: 2022-08-26 16:51:38
   * @LastEditors: mowencong 2829621014@qq.com
   * @LastEditTime: 2022-08-29 10:11:09
   * @FilePath: \qiankun\qiankun-base\src\views\Main\index.vue
   * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  -->
  <template>
    <div class="main-content">
      <el-container>
        <!-- 顶部 -->
        <el-header>
          <router-link to="/home">
            <img src="../../assets/logo.png" class="logo" />
          </router-link>
        </el-header>
        <el-container>
          <!-- 左侧导航 -->
          <el-aside>
            <el-menu
              default-active="1"
              class="el-menu-vertical-demo"
              background-color="#545c64"
              text-color="#fff"
              :router="true"
            >
            <!--基座中可以放自己的路由-->
              <el-menu-item index="/home">
                <i class="el-icon-menu"></i>
                <span slot="title">Home</span>
              </el-menu-item>
              <el-menu-item index="/about">
                <i class="el-icon-menu"></i>
                <span slot="title">About</span>
              </el-menu-item>
              <!--引用其他子应用-->
              <el-menu-item index="/main/vue">
                <i class="el-icon-document"></i>
                <span slot="title">qiankun-vue1</span>
              </el-menu-item>
              <el-menu-item index="/main/vue1">
                <i class="el-icon-setting"></i>
                <span slot="title">qiankun-vue2</span>
              </el-menu-item>
            </el-menu>
          </el-aside>
          <el-container>
            <!-- 内容 -->
            <el-main>
              <router-view></router-view>
              <!--这里就是子应用挂载的节点，跟main.js里面的配置一一对应-->
              <div id="vue1"></div>
              <div id="vue2"></div>
            </el-main>
          </el-container>
        </el-container>
      </el-container>
    </div>
  </template>
  
  <script>
  import { start } from "qiankun";
  
  export default {
    name: "Main",
    mounted() {
      if (!window.qiankunStarted) {
        window.qiankunStarted = true;
        start();
      }
    },
  };
  </script>
  
  <style lang='less' scoped>
  .main-content {
    height: 100%;
    & > .el-container {
      height: 100%;
      .el-header {
        background-color: #3f4044;
        display: flex;
        align-items: center;
        .logo {
          height: 40px;
          width: auto;
          cursor: pointer;
        }
      }
      & > .el-container {
        height: 100%;
        & > .el-aside {
          background-color: #d3dce6;
          width: 200px !important;
          .el-menu-vertical-demo {
            height: 100%;
          }
        }
        .el-container {
          .el-main {
            //   background-color: #e9eef3;
            //   color: #333;
          }
        }
      }
    }
  }
  </style>
  

  2、子应用qiankun-vue配置

• main.js配置

/*
 * @Author: mowencong 2829621014@qq.com
 * @Date: 2022-08-26 15:57:22
 * @LastEditors: mowencong 2829621014@qq.com
 * @LastEditTime: 2022-08-29 10:50:43
 * @FilePath: \qiankun\qiankun-vue\src\main.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)
Vue.config.productionTip = false

let instance = null
function render(props){
  instance = new Vue({
    router,
    render:h => h(App)
  }).$mount('#qkApp1');//这里是挂载到自己的html中，基座会拿到这个挂载后的html，将其插入进去
//注意：这里#qkApp1在index.html和app.vue的挂载点的id名要同步修改
}
if(window._POWERED_BY_QIANKUN_){//动态添加publicPath
  _webpack_public_path_ = window._INJECTED_PUBLIC_PATH_BY_QIANKUN_;
}
if(!window._POWERED_BY_QIANKUN_){//默认独立运行
  render();
}
//父应用加载子应用，子应用必须暴露三个接口：bootstrap,mount,unmount
//子组件的协议就ok了
export async function bootstrap(props){};
export async function mount(props){
  //加了true之后，会自动调取前面这个回调方法，这样可以拿到主应用（基座）修改的值
  props.onGlobalStateChange((state,prev) => {
    console.log(state,prev);
  },true);
  Vue.prototype.$onGlobalStateChange = props.onGlobalStateChange;
  Vue.prototype.$setGlobalState = props.setGlobalState;
  console.log('是啥类型',Object.prototype.toString.call(props.onGlobalStateChange))
  render(props);
}
export async function unmount(props){
  instance.$destroy();
}

router.js的配置

/*
 * @Author: mowencong 2829621014@qq.com
 * @Date: 2022-08-26 17:05:52
 * @LastEditors: mowencong 2829621014@qq.com
 * @LastEditTime: 2022-08-29 09:37:57
 * @FilePath: \qiankun\qiankun-vue\src\router\index.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter);
const routes = [
    {
        path: '/',
        redirect: '/main/vue/'
    },
    {
        path: '/main/vue/',
        name: 'Home',
        component: Home
    },
    {
        path: '/main/vue/about',
        name: 'About',
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    }
]
const router = new VueRouter({
    mode: 'history',
    base: window.__POWERED_BY_QIANKUN__ ? "/vue" : "/",//基础路径
    routes
})

export default router

//注意：路由前缀必须设置，这个跟基座main.js的激活路径相关

vue.config.js的配置

/*
 * @Author: mowencong 2829621014@qq.com
 * @Date: 2022-08-26 15:57:22
 * @LastEditors: mowencong 2829621014@qq.com
 * @LastEditTime: 2022-08-29 10:08:14
 * @FilePath: \qiankun\qiankun-vue\vue.config.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
module.exports = {
  lintOnSave:false,//关闭eslint检测
  devServer:{
    port:8081,//这里的端口必须和父应用配置的子应用端口一致
    headers:{
      //因为qiankun内部请求都是fetch请求资源，所以子应用必须允许跨域
      'Access-Control-Allow-Origin':'*',
    }
  },
  configureWebpack:{
    output:{
      //资源打包路径
      library:'vueApp1',
      libraryTarget:'umd'
    }
  }
}

3、注意点

1）如何在主应用的某个路由页面加载微应用

react + react-router技术栈的主应用：只需要让子应用的activeRule包含主应用的这个路由即可

vue + vue-router技术栈的主应用

例如：主应用需要在login页面登录，登录成功后跳转到main后台管理页面，在main管理页面下可以显示子应用

修改主应用router.js

//如果这个路由有其他子路由，需要另外注册一个路由，仍然使用这个子组件即可
//本案例就是有子路由，所以需要才后面重新定义main页面的路由
const routes = [
	{
		path:'/',
		name:'Login'，
		component:Login
	},
	{
		path:'/main',
		name:'Main',
		component:Main,
		children:[
			{
				path:'/home',
				name:'Home',
				component:Home
			},
			{
                path: '/about',
                name: 'About',
                // route level code-splitting
                // this generates a separate chunk (about.[hash].js) for this route
                // which is lazy-loaded when the route is visited.
                component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
            }
		]
	},
	{
        path: '/main/*',
        name: 'Main',
        component: Main,
    }
]

修改主应用main.js 的文件

// 子应用的 activeRule 需要包含主应用的这个路由 path
const apps = [
  {
    name: 'vueApp', // 应用的名字
    entry: '//localhost:8081', // 默认会加载这个html 解析里面的js 动态的执行 （子应用必须支持跨域）fetch
    container: '#vue', // 容器名
    activeRule: '/main/vue', // 激活的路径
    props: { a: 1 }
  },
  {
    name: 'reactApp',
    entry: '//localhost:20000', // 默认会加载这个html 解析里面的js 动态的执行 （子应用必须支持跨域）fetch
    container: '#react',
    activeRule: '/main/react',
  }
]
registerMicroApps(apps); // 注册应用

这是前端程序员在某红薯平台自述前端被裁的真实经历！

2025开年，AI技术打得火热，正在改变前端人的职业命运：

阿里云核心业务全部接入Agent体系；

字节跳动30%前端岗位要求大模型开发能力；

腾讯、京东、百度开放招聘技术岗，80%与AI相关……

大模型正在重构技术开发范式，传统CRUD开发模式正在被AI原生应用取代！

最残忍的是，业务面临转型，领导要求用RAG优化知识库检索，你不会；带AI团队，微调大模型要准备多少数据，你不懂；想转型大模型应用开发工程师等相关岗，没项目实操经验……这不是技术焦虑，而是职业生存危机！

曾经React、Vue等热门的开发框架，已不再是就业的金钥匙。如果认为会调用API就是懂大模型、能进行二次开发，那就大错特错了。制造、医疗、金融等各行业都在加速AI应用落地，未来企业更看重能用AI大模型技术重构业务流的技术人。

如今技术圈降薪裁员频频爆发，传统岗位大批缩水，相反AI相关技术岗疯狂扩招，薪资逆势上涨150%，大厂老板们甚至开出70-100W年薪，挖掘AI大模型人才！

不出1年 “有AI项目开发经验”或将成为前端人投递简历的门槛。

风口之下，与其像“温水煮青蛙”一样坐等被行业淘汰，不如先人一步，掌握AI大模型原理+应用技术+项目实操经验，“顺风”翻盘！

大模型目前在人工智能领域可以说正处于一种“炙手可热”的状态，吸引了很多人的关注和兴趣，也有很多新人小白想要学习入门大模型，那么，如何入门大模型呢？

下面给大家分享一份2025最新版的大模型学习路线，帮助新人小白更系统、更快速的学习大模型！

2025最新版CSDN大礼包：《AGI大模型学习资源包》免费分享**

一、2025最新大模型学习路线

一个明确的学习路线可以帮助新人了解从哪里开始，按照什么顺序学习，以及需要掌握哪些知识点。大模型领域涉及的知识点非常广泛，没有明确的学习路线可能会导致新人感到迷茫，不知道应该专注于哪些内容。

我们把学习路线分成L1到L4四个阶段，一步步带你从入门到进阶，从理论到实战。

L1级别:AI大模型时代的华丽登场

L1阶段：我们会去了解大模型的基础知识，以及大模型在各个行业的应用和分析；学习理解大模型的核心原理，关键技术，以及大模型应用场景；通过理论原理结合多个项目实战，从提示工程基础到提示工程进阶，掌握Prompt提示工程。

L2级别：AI大模型RAG应用开发工程

L2阶段是我们的AI大模型RAG应用开发工程，我们会去学习RAG检索增强生成：包括Naive RAG、Advanced-RAG以及RAG性能评估，还有GraphRAG在内的多个RAG热门项目的分析。

L3级别：大模型Agent应用架构进阶实践

L3阶段：大模型Agent应用架构进阶实现，我们会去学习LangChain、 LIamaIndex框架，也会学习到AutoGPT、 MetaGPT等多Agent系统，打造我们自己的Agent智能体；同时还可以学习到包括Coze、Dify在内的可视化工具的使用。

L4级别：大模型微调与私有化部署

L4阶段：大模型的微调和私有化部署，我们会更加深入的探讨Transformer架构，学习大模型的微调技术，利用DeepSpeed、Lamam Factory等工具快速进行模型微调；并通过Ollama、vLLM等推理部署框架，实现模型的快速部署。

整个大模型学习路线L1主要是对大模型的理论基础、生态以及提示词他的一个学习掌握；而L3 L4更多的是通过项目实战来掌握大模型的应用开发，针对以上大模型的学习路线我们也整理了对应的学习视频教程，和配套的学习资料。

二、大模型经典PDF书籍

书籍和学习文档资料是学习大模型过程中必不可少的，我们精选了一系列深入探讨大模型技术的书籍和学习文档，它们由领域内的顶尖专家撰写，内容全面、深入、详尽，为你学习大模型提供坚实的理论基础。（书籍含电子版PDF）

三、大模型视频教程

对于很多自学或者没有基础的同学来说，书籍这些纯文字类的学习教材会觉得比较晦涩难以理解，因此，我们提供了丰富的大模型视频教程，以动态、形象的方式展示技术概念，帮助你更快、更轻松地掌握核心知识。

四、大模型项目实战

学以致用 ，当你的理论知识积累到一定程度，就需要通过项目实战，在实际操作中检验和巩固你所学到的知识，同时为你找工作和职业发展打下坚实的基础。

五、大模型面试题

面试不仅是技术的较量，更需要充分的准备。

在你已经掌握了大模型技术之后，就需要开始准备面试，我们将提供精心整理的大模型面试题库，涵盖当前面试中可能遇到的各种技术问题，让你在面试中游刃有余。

因篇幅有限，仅展示部分资料，需要点击下方链接即可前往获取

2025最新版CSDN大礼包：《AGI大模型学习资源包》免费分享