data: "child子应用",
}, //传参

},
]);
// 启动
start();


##### 跨域配置


* vue.config.js



const { defineConfig } = require(‘@vue/cli-service’)
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
port: 30001, //主应用启动端口号,视情况而定
headers: {
“Access-Control-Allow-Origin”: “*”, // 允许跨域访问子应用页面
},
},
})


#### 子应用配置


##### 路由配置



import {
createRouter,
createWebHistory
} from ‘vue-router’
import ‘…/public-path’ // 引入public-path文件
const router = createRouter({
base: window.POWERED_BY_QIANKUN ? ‘/vue’ : ‘/’, // qiankun进入子应用时,返回true
history: createWebHistory(), // 不带#
routes: [{
path: ‘/’,
redirect: ‘/child’
},
{
path: ‘/child’,
component: () => import(‘@/components/child’) //绑定一个child组件
}
]
})
export default router


##### qiankun配置


* src路径下添加public-path.js



// eslint-disable-next-line no-undef
if (window.POWERED_BY_QIANKUN) {
webpack_public_path = window.INJECTED_PUBLIC_PATH_BY_QIANKUN;
}


* main.js抛出生命周期钩子



import ‘./public-path’; // 注意需要引入public-path
import { createApp } from ‘vue’
import App from ‘./App.vue’
import router from ‘./router’
import store from ‘./store’;
let instance = null;

function render({ container } = {}) {
instance = createApp(App);
instance.use(router);
instance.use(store);
instance.mount(container ? container.querySelector(‘#app’) : ‘#app’);//app.

真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
详情关注公中号【编程进阶路】

vue有对应的div
}

// 如何独立运行微应用?
if (!window.POWERED_BY_QIANKUN) {
render();
}

export async function bootstrap(props) {
// 启动
}
export async function mount(props) {
// 挂载
render(props);
}
export async function unmount(props) {
// 卸载
instance.unmount();
instance = null;
}


##### 跨域配置


vue.config.js



const { name } = require(“./package.json”);
const { defineConfig } = require(“@vue/cli-service”);

module.exports = defineConfig({
transpileDependencies: true,
devServer: {
port: 30000, // 指定端口 与主应用一致
headers: {
“Access-Control-Allow-Origin”: “*”, // 配置跨域
“Access-Control-Allow-Headers”: “*”,
“Access-Control-Allow-Credentials”: “true”,
“Access-Control-Allow-Methods”: “*”,
“Cache-Control”: “no-cache”,
},
client: {
overlay: {
errors: true,
warnings: false,
}
},
},
configureWebpack: {
output: {
library: ${name}-[name],
libraryTarget: “umd”,
chunkLoadingGlobal: webpackJsonp\_${name},
}
},
});


#### 整体效果


![在这里插入图片描述](https://img-blog.csdnimg.cn/18f24e15c3454024bf391191d47d7688.png)  


### HTTP

* HTTP 报文结构是怎样的?

* HTTP有哪些请求方法?

* GET 和 POST 有什么区别?

* 如何理解 URI?

* 如何理解 HTTP 状态码?

* 简要概括一下 HTTP 的特点?HTTP 有哪些缺点?

* 对 Accept 系列字段了解多少?

* 对于定长和不定长的数据,HTTP 是怎么传输的?

* HTTP 如何处理大文件的传输?

* HTTP 中如何处理表单数据的提交?

* HTTP1.1 如何解决 HTTP 的队头阻塞问题?

* 对 Cookie 了解多少?

* 如何理解 HTTP 代理?

* 如何理解 HTTP 缓存及缓存代理?

* 为什么产生代理缓存?

* 源服务器的缓存控制

* 客户端的缓存控制

* 什么是跨域?浏览器如何拦截响应?如何解决?  



![](https://img-blog.csdnimg.cn/img_convert/3a28cc7b978db5d78ce5f1c5ec78122b.png)
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐