本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云
Miox 是一个SPA管理框架。根据 github 上开源信息显示，应该是来自51信用卡团队的开源产品。本文介绍 Miox 的使用教程。
在经典的网页开发中，浏览器创建和管理一系列网页生命周期活动，如会话历史，页面创建，丢弃，页面展示，页面隐藏等，开发人员可以在这些活动上处理自己的逻辑。
在SPA应用程序中，开发人员必须自己处理所有这些事件，或者由一个处理这些事件的框架来处理。Miox是另一个框架与他们交易。
- Miox特别的地方在于它支持任何渲染核心，这意味着与Miox开发人员可以同时将Miox引入到他们的项目中，并留下他最喜欢的反应或vue。
- Miox专注于作为一个SPA运行时间，具有如此有限的小目标，它开发了能够轻松集成最基本的技术，包括redux / vuex，SSR等。
到目前为止，51信用卡几乎所有的网络前端项目都是在PC和移动端都使用Miox作为SPA框架，这意味着Miox已经在生产中得到了广泛的使用和测试。
Miox的特点
- 轻量：空项目打包体积170K+，Miox仅打包体积40K+，轻量的体积大小完成更多的逻辑。
- 高效：基于尽可能最大限度复用页面的原则，采用缓存算法优化性能。
- 稳定：代码覆盖率达到90%，基本覆盖所有场景，稳定项目运行。
- 强大：Miox提供强大的插件支持，满足用户多变的需求。方便的扩展API接口，随心所欲驾驭整个项目。
下面我们看看Miox的命令行安装，创建，应用安装，运行案例，和构建案例的命令。
npm install miox-cli -g miox create npm install npm run dev npm run build
相关代码可以从https://github.com/51nb/miox上克隆。
基本用法
index.js 是我们项目的入口。加入如下代码：
import Miox from 'miox';
import Engine from 'miox-react';
import router from './route';
const app = new Miox({...options});
app.install(Engine);
app.use(router.routes());
export default app.listen();
route.js：路由文件。
import Router from 'miox-router';
import Page from './page.jsx';
const route = new Router();
export default route;
route.patch('/', async ctx => {
await ctx.render(Page);
});
page.jsx：呈现webview文件。
import React from 'react';
import ReactDOM from 'react-dom';
export default class ExamplePage extends React.Component {
render() {
return <h1>Hello World!</h1>;
}
}
运行前面的命令，将呈现“Hello World！” 到页面上的一个容器中。
Miox安装
Miox作为npm上的miox软件包提供。
我们提供一个脚手架来促进项目的安装。一旦项目安装完毕，您就可以开始编写业务逻辑了。
安装miox-cli创建项目：
npm install -g miox-cli
然后运行miox create创建一个新项目的代码：
miox create
更多学习资料，请参考官方文档：https://github.com/51nb/miox。
最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！
本文原文出处：业余草： » SPA管理框架 Miox 教程