SPA管理框架 Miox 教程

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。

： » SPA管理框架 Miox 教程