<commit_before># Omi命令行界面omi-cli发布

通常认为，命令行界面（CLI）没有图形用户界面（GUI）那么方便用户操作。但是CLI比GUI节约资源，在熟悉命令之后，CLI会比GUI更加高效地帮你完成想要的任务。

下面来介绍下[pasturn](https://github.com/pasturn)童鞋为Omi开发的CLI的两种使用姿势：

## 姿势一

```js
$ npm install omi-cli -g       //安装cli
$ omi init your_project_name   //初始化项目
$ cd your_project_name         //转到项目目录
$ npm run dev                  //开发
$ npm run dist                 //部署发布
```

## 姿势二

当我们在一个空文件夹的时候，可以执行下面的命令。

```js
$ npm install omi-cli -g       //安装cli
$ omi init                     //初始化项目
$ npm run dev                  //开发
$ npm run dist                 //部署发布
```

这里不用再去跳转目录了，当前目录就是项目的目录。

## 安装过程截图

安装omi-cli:

![](http://images2015.cnblogs.com/blog/105416/201702/105416-20170227100545470-696026058.png)


安装初始化项目omi init:

![](http://images2015.cnblogs.com/blog/105416/201702/105416-20170227100554891-1802174132.png)

上面的成功的界面。注意：初始化项目会自动安装相关的npm依赖包，所以时间较长，请耐心等待。
安装完成之后，在项目目录下你可以看到下面的目录结构：

![](http://images2015.cnblogs.com/blog/105416/201702/105416-20170227100755845-465268116.png)

开发 npm run dev:

![](http://images2015.cnblogs.com/blog/105416/201702/105416-20170227100601235-1477801934.png)

![](http://images2015.cnblogs.com/blog/105416/201702/105416-20170227100608985-921528126.png)

如果，你看到了上面的界面，说明一切OK了。创建出来的项目主要基于 Gulp + Webpack + Babel + BrowserSync 进行开发和部署。Gulp用来串联整个流程，Webpack + Babel让你可以写ES6和打包，BrowserSync用来帮你刷浏览器，不用F5了。

## 后续

更多脚手架模板以及更多功能的命令正在开发中，如果有什么意见或者建议欢迎让我们知道。

## 相关<commit_msg>update docs<commit_after># Omi命令行界面omi-cli发布

通常认为，命令行界面（CLI）没有图形用户界面（GUI）那么方便用户操作。但是CLI比GUI节约资源，在熟悉命令之后，CLI会比GUI更加高效地帮你完成想要的任务。

下面来介绍下[pasturn](https://github.com/pasturn)童鞋为Omi开发的CLI的两种使用姿势：

## 姿势一

```js
$ npm install omi-cli -g       //安装cli
$ omi init your_project_name   //初始化项目
$ cd your_project_name         //转到项目目录
$ npm run dev                  //开发
$ npm run dist                 //部署发布
```

## 姿势二

当我们在一个空文件夹的时候，可以执行下面的命令。

```js
$ npm install omi-cli -g       //安装cli
$ omi init                     //初始化项目
$ npm run dev                  //开发
$ npm run dist                 //部署发布
```

这里不用再去跳转目录了，当前目录就是项目的目录。

## 安装过程截图

安装omi-cli:

![](http://images2015.cnblogs.com/blog/105416/201702/105416-20170227100545470-696026058.png)


安装初始化项目omi init:

![](http://images2015.cnblogs.com/blog/105416/201702/105416-20170227100554891-1802174132.png)

上面的成功的界面。注意：初始化项目会自动安装相关的npm依赖包，所以时间较长，请耐心等待。
安装完成之后，在项目目录下你可以看到下面的目录结构：

![](http://images2015.cnblogs.com/blog/105416/201702/105416-20170227100755845-465268116.png)

开发 npm run dev:

![](http://images2015.cnblogs.com/blog/105416/201702/105416-20170227100601235-1477801934.png)

![](http://images2015.cnblogs.com/blog/105416/201702/105416-20170227100608985-921528126.png)

如果，你看到了上面的界面，说明一切OK了。创建出来的项目主要基于 Gulp + Webpack + Babel + BrowserSync 进行开发和部署。Gulp用来串联整个流程，Webpack + Babel让你可以写ES6和打包，BrowserSync用来帮你刷浏览器，不用F5了。

## 组件开发

页面的组件都在component目录:

![](http://images2015.cnblogs.com/blog/105416/201703/105416-20170309091322484-527946546.png)

你可以把组件的HTML、CSS和JS分离成三个文件，然后通过require的方式使用，如：

```js
import Omi from 'omi';

const tpl = require('./index.html');
const css = require('./index.css');

class Footer extends Omi.Component {
    constructor (data) {
        super(data);
    }

    style () {
        return css;
    }

    render () {
        return tpl;
    }
}

export default Footer;
```

也可以直接all in js的方式：

```js
import Omi from 'omi';

class Header extends Omi.Component {
    constructor (data) {
        super(data);
    }

    style () {
        return `
        <style>
        .menu a:hover{
            color: white;
        }
        </style>
        `;
    }

    render () {
        return `
    <div class="head bord-btm">
        <div class="logo_box">
            <a href="https://github.com/AlloyTeam/omi"></a>
        </div>
        <ul class="menu">
            <li class="github_li"><a href="https://github.com/AlloyTeam/omi">Github</a>
            <li><a href="http://alloyteam.github.io/omi/example/playground/">Playground</a></li>
            <li><a href="https://github.com/AlloyTeam/omi/tree/master/docs">[Edit the Docs]</a></li>
            </li>
        </ul>
    </div>`;
    }
}

export default Header;
```

如果需要更多动态编程能力，可以all in js。如果纯静态不怎么需要改动的话，直接分离成三个文件通过require进来便可。

## 后续

更多脚手架模板以及更多功能的命令正在开发中，如果有什么意见或者建议欢迎让我们知道。

## 相关
{'fraction_non_alphanumeric': 0.14329268292682926, 'fraction_numerical': 0.12570356472795496, 'mean_word_length': 3.0774378585086044, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 25, 'https://': 5, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2981060', 'n_tokens_mistral': 2550, 'n_tokens_neox': 2309, 'n_words': 226}