简介
Marko是github上面一款上手快速且高效的UI库,它将Html和JS整合起来,使构建webAPP变得更加快速简洁。
使用起来非常简单,并且在Atom上可以下载他的插件,便于使用者快速开发自己的项目。
Marko 具有以下特性:
● 简单:只要了解 HTML、CSS 和 Java,你就会用 Marko ;
● 快速:通过流传输和微型(〜10kb gzip)运行时让加载更快
● 创新:从简单的 HTML 模板到强大的 UI 组件
● 安全:正在为 eBay.com 等高流量网站提供支持
官网:Marko
官方文档:Introduction | Marko
使用方式
试试Marko
如果你仅仅只是想在浏览器感受一下Marko的好玩之处,可以直接点击Try online | Marko在浏览器中开发Marko应用程序。
安装
如果你想直接使用Marko创建你的应用,可以使用如下两种方式安装Marko:
npm:
npm install marko --save
yarn:
yarn add marko
从零开始创建Marko项目
使用marko-cli快速创建一个新的应用项目,具体命令如下:
![](https://img.haomeiwen.com/i6856694/bb88014cf31d6c1d.png)
直接用浏览器运行项目
一开始当然是最熟悉的hello world简例,这个例子将在浏览器上渲染出一个简单视图:hello marko。
首先,在hello.marko文件上敲下一行类似于Html文件格式代码:
![](https://img.haomeiwen.com/i6856694/f0b9528eafb4353a.png)
其次,创建一个client.js文件,将需要展示的参数渲染到body中:
![](https://img.haomeiwen.com/i6856694/27420cc83f195866.png)
最后,创建一个基础的index.Html文件,用于显示我们程序的结果:
![](https://img.haomeiwen.com/i6856694/3276c645e15f1add.png)
现在,我们需要将这些文件打包,以便在浏览器中使用,打包的工具是lasso,安装命令如下:
![](https://img.haomeiwen.com/i6856694/02c299d81e2aaaba.png)
安装之后,打包这些文件:
![](https://img.haomeiwen.com/i6856694/4f4ea6eebed903a4.png)
使用浏览器加载页面,你就能看到Hello Maeko啦。
脱离浏览器运行程序
Marko中require的用法
Marko提供一个Node.js的require惯例扩展,允许你像标准JavaScript模块一样require Marko视图,下面是server.js例子(hello.marko文件内容同上):
![](https://img.haomeiwen.com/i6856694/d97ff30bfff8d397.png)
(除了Node.js的require以外,你还可以选择使用Marko CLI:
![](https://img.haomeiwen.com/i6856694/456853d2ffe218d5.png)
如果在开发中只想使用require扩展,则可以用条件限制它:
![](https://img.haomeiwen.com/i6856694/a05f5ce143fa5bf4.png)
用这个服务器(后端)模式完成一个上面那个例子:
修改之前例子中的server.js(hello.marko内容不变),用http服务器运行:
![](https://img.haomeiwen.com/i6856694/24f703a4eed7bea4.png)
用Node运行这个例子:
node server.js
并将浏览器打开到http:// localhost:8080,就可以在浏览器看到Hello Marko惹!
【感谢看到这里的你,这是我第一次翻译文档,本意是想让自己能有耐心的去看英文文档,排版什么的不太熟练。如果这篇中翻涉及到版权问题请私信我删除_(:°з」∠)_
另外,如果有语法错误或者意思理解错误了,也请指出,留言or联系我修改。我会继续努力的(づ~3~)づ】
网友评论