• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

SPA管理框架 Miox 教程

JAVA web前端中文站 2年前 (2017-11-28) 1100次浏览 已收录 0个评论
文章目录[隐藏]

Miox 是一个SPA 管理框架。根据 github 上开源信息显示,应该是来自 51 信用卡团队的开源产品。本文介绍?Miox 的使用教程。

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

在经典的网页开发中,浏览器创建和管理一系列网页生命周期活动,如会话历史,页面创建,丢弃,页面展示,页面隐藏等,开发人员可以在这些活动上处理自己的逻辑。

SPA 管理框架 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。

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:SPA 管理框架 Miox 教程
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址