2017-12-30 17:52:41 +08:00
# [Use Omix if your like JSX](https://github.com/AlloyTeam/omix)
< p align = "center" >
2017-08-02 11:21:13 +08:00
< a href = "##Omi" > < img src = "http://images2015.cnblogs.com/blog/105416/201701/105416-20170120114244046-622856943.png" alt = "Omi" > < / a >
2017-03-09 16:26:06 +08:00
< / p >
< p align = "center" >
Open and modern framework for building user interfaces.
< / p >
< p align = "center" >
2017-10-31 16:37:14 +08:00
< a href = "https://circleci.com/gh/AlloyTeam/omi/tree/master" > < img src = "https://img.shields.io/circleci/project/AlloyTeam/omi/master.svg" alt = "Build Status" > < / a >
2017-08-02 10:38:21 +08:00
< a href = "https://www.npmjs.com/package/omi" > < img src = "https://img.shields.io/npm/v/omi.svg" alt = "Version" > < / a >
< a href = "https://www.npmjs.com/package/omi" > < img src = "https://img.shields.io/npm/dm/omi.svg" alt = "Download" > < / a >
< a href = "CONTRIBUTING.md" > < img src = "https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt = "PRs" > < / a >
2017-03-09 16:26:06 +08:00
< / p >
2017-08-02 11:02:59 +08:00
[中文README ](README.zh-CN.md )
2017-03-09 16:26:06 +08:00
2017-08-02 10:38:21 +08:00
## Omi
2017-03-09 16:26:06 +08:00
2017-08-02 09:52:18 +08:00
* [Omi Cli ](https://github.com/AlloyTeam/omi-cli ) and [Cli Usage ](https://github.com/AlloyTeam/omi-cli#用户指南 )
2017-08-02 11:40:59 +08:00
* [Omi Docs ](https://github.com/AlloyTeam/omi/blob/master/tutorial/all.md )
2017-08-03 21:41:08 +08:00
* [Omi Playground ](https://alloyteam.github.io/omi/example/playground/ )
* [Omi Tutorial ](https://github.com/AlloyTeam/omi/tree/master/tutorial )
* [New issue ](https://github.com/AlloyTeam/omi/issues/new )
2017-03-23 07:53:17 +08:00
* If you want to be more convenient on the exchange of all Omi can join the QQ Omi exchange group (256426170)
## omi-cli
2017-08-02 11:02:59 +08:00
```bash
2017-08-02 11:21:13 +08:00
$ npm install omi-cli -g # install cli
$ omi init your_project_name # init project, you can also exec 'omi init' in an empty folder
$ cd your_project_name # please ignore this command if you executed 'omi init' in an empty folder
$ npm start # develop
$ npm run dist # release
2017-03-23 07:53:17 +08:00
```
2017-06-10 13:31:09 +08:00
other cmd:
2017-08-02 11:02:59 +08:00
```bash
2017-08-02 11:21:13 +08:00
$ npm run ie # debugging in ie8
2017-06-10 13:31:09 +08:00
```
2017-03-23 07:53:17 +08:00
## Features
* Super tiny size, 7 KB (gzip)
2017-04-24 10:01:03 +08:00
* Good compatibility, support IE8 (please import es5-shim or [es5-sham ](//s.url.cn/qqun/xiaoqu/buluo/p/js/es5-sham-es5-sham.min.77c4325f.js ) by yourself)
2017-03-23 07:53:17 +08:00
* Fully object-oriented component system
2017-08-02 11:02:59 +08:00
* Support Scoped CSS, reusable components are composed of HTML, Scoped CSS and JS
2017-03-23 07:53:17 +08:00
* More free updates, each component has a update method, free to choose the right time to update
* Template engines can be replaced, developers can override the Omi.template method to use any template engine
* Provides two development way ( ES6+ and ES5) for developers to choose freely
## Plugins
2017-08-02 11:02:59 +08:00
* [omi-router ](https://github.com/AlloyTeam/omi/tree/master/plugins/omi-router ): Router for Omi.
* [omi-finger ](https://github.com/AlloyTeam/omi/tree/master/plugins/omi-finger ): Omi /[AlloyFinger](https://github.com/AlloyTeam/AlloyFinger) integration.
* [omi-transform ](https://github.com/AlloyTeam/omi/tree/master/plugins/omi-transform ): Omi /[transformjs](https://alloyteam.github.io/AlloyTouch/transformjs/) integration.
* [omi-touch ](https://github.com/AlloyTeam/omi/tree/master/plugins/omi-touch ): Omi /[AlloyTouch](https://github.com/AlloyTeam/AlloyTouch) integration.
* [omi-jquery-date-picker ](https://github.com/AlloyTeam/omi/tree/master/plugins/omi-jquery-date-picker ): Omi / JQuery Date Picker integration.
2017-03-23 07:53:17 +08:00
## Install
2017-08-02 11:02:59 +08:00
```bash
2017-03-23 07:53:17 +08:00
$ npm install omi
```
## Hello World
2017-08-02 11:02:59 +08:00
You can use [webpack ](https://webpack.github.io/ ) + [babel ](http://babeljs.io/ ), configure the [babel-loader ](https://github.com/babel/babel-loader ) in the module settings of webpack, then you can use ES6+ to write your web program.
2017-03-23 07:53:17 +08:00
* [[Hello World ES6+ ->Try it on Playground]](http://alloyteam.github.io/omi/website/redirect.html?type=hello_nest)
* [[Hello World ES5 ->Try it on Playground]](http://alloyteam.github.io/omi/website/redirect.html?type=hello_es5)
2017-08-02 11:02:59 +08:00
if using 'omi.lite.js' (without [mustache.js ](https://github.com/janl/mustache.js )), you can [use the ${this.data.name} way ](http://alloyteam.github.io/omi/website/redirect.html?type=without_tpl )
2017-03-23 07:53:17 +08:00
## CDN
2017-07-21 16:34:51 +08:00
* [https://unpkg.com/omi@1.7.5/dist/omi.min.js ](https://unpkg.com/omi@1.7.5/dist/omi.min.js )
* [https://unpkg.com/omi@1.7.5/dist/omi.js ](https://unpkg.com/omi@1.7.5/dist/omi.js )
* [https://unpkg.com/omi@1.7.5/dist/omi.art.min.js ](https://unpkg.com/omi@1.7.5/dist/omi.art.min.js )
* [https://unpkg.com/omi@1.7.5/dist/omi.art.js ](https://unpkg.com/omi@1.7.5/dist/omi.art.js )
* [https://unpkg.com/omi@1.7.5/dist/omi.lite.min.js ](https://unpkg.com/omi@1.7.5/dist/omi.lite.min.js )
* [https://unpkg.com/omi@1.7.5/dist/omi.lite.js ](https://unpkg.com/omi@1.7.5/dist/omi.lite.js )
* [https://unpkg.com/omi@1.7.5/dist/omi.mustache.min.js ](https://unpkg.com/omi@1.7.5/dist/omi.mustache.min.js )
* [https://unpkg.com/omi@1.7.5/dist/omi.mustache.js ](https://unpkg.com/omi@1.7.5/dist/omi.mustache.js )
2017-03-23 07:53:17 +08:00
2017-08-02 09:52:18 +08:00
## Thanks
2017-03-23 07:53:17 +08:00
2017-08-02 11:02:59 +08:00
* [morphdom ](https://github.com/patrick-steele-idem/morphdom ) - Fast and lightweight DOM diffing/patching (no virtual DOM needed)
* [art-template ](https://github.com/aui/art-template ) - JS template engine with excellent performance
* [sodajs ](https://github.com/AlloyTeam/sodajs ) - Light weight but powerful template engine for JavaScript
* [mustache.js ](https://github.com/janl/mustache.js ) - Minimal templating with {{mustaches}} in JavaScript
2017-03-23 07:53:17 +08:00
2017-08-12 09:01:25 +08:00
## Thanks to [omi contributors](https://github.com/AlloyTeam/omi/graphs/contributors)
2017-03-09 16:26:06 +08:00
# License
This content is released under the [MIT ](http://opensource.org/licenses/MIT ) License.