- 准备环境
express
我们安装express，只是为了应用一下express的静态服务资源。随便安装一下...
npm i express -g
- 新建app.js
var express = require('express');
var path = require('path');
var app = express();
// app.all('', function(req, res, next) {
// res.header("Access-Control-Allow-Origin", "*");
// });
var allowCors = function(req, res, next) {
res.header("Access-Control-Allow-Origin", req.headers.origin);
res.header("Access-Control-Allow-Methods", "GET,POST,OPTIONS");
res.header("Access-Control-Allow-Headers", "DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-
Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization");
next();
}
app.use(allowCors)
app.use(express.static(path.join(__dirname, 'public')));
var server = app.listen(8082, function () {
var host = server.address().address
var port = server.address().port
console.log("应用实例，访问地址为 http://%s:%s", host, port)
})
- 新建 public文件夹
4.public文件夹下新建index.html
<!DOCTYPE html><!-- DTD文档类型声明为HTML5版本的格式 -->
<html lang="zh-CN"><!--指定为中文网站，主要避免触发谷歌浏览器翻译功能-->
<!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
<head>
<!-- 字符编码写法 优于 html4.01的<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> -->
<meta charset="UTF-8">
<!-- 网站标题，最好在自己使用对应框架的路由拦截中每次设置不同的标题较好 -->
<title>子应用2</title>
<!-- 用于告诉搜索引擎，你网页的关键字，特别有用 -->
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="sNMk592JV2wwHn6DPJ8C5oy/hHDnjIlZBOHyngtTbpQ=" />
<style>
.dfg{
color: rgb(30, 20, 158)
}
</style>
</head>
<body class="dfg">
<div class="dfg">
子应用2
</div>
</body>
<script>
// 生命周期 - 挂载前
window.one = {}
window.one.bootstrap = async function (props) {
console.log('tow bootstrap');
}
// 生命周期 - 挂载后
window.one.mount = async function () {
console.log('tow mount');
// 渲染
}
// 生命周期 - 解除挂载
window.one.unmount = async function (){
console.log('tow unmount');
}
</script>
</html>
至此构建传统的子引用构建完成。
demo 到此也结束。运行起来可以看到完整的效果。
网友评论