當(dāng)耐特

原文鏈接：https://github.com/AlloyTeam/omi/blob/master/docs/deep_in/cn_omi-cli.md

寫(xiě)在前面

通常認(rèn)為，命令行界面（CLI）沒(méi)有圖形用戶界面（GUI）那么方便用戶操作。但是CLI比GUI節(jié)約資源，在熟悉命令之后，CLI會(huì)比GUI更加高效地幫你完成想要的任務(wù)。

下面來(lái)介紹下pasturn童鞋為Omi開(kāi)發(fā)的CLI的兩種使用姿勢(shì)：

姿勢(shì)一

$ npm install omi-cli -g       //安裝cli
$ omi init your_project_name   //初始化項(xiàng)目
$ cd your_project_name         //轉(zhuǎn)到項(xiàng)目目錄
$ npm run dev                  //開(kāi)發(fā)
$ npm run dist                 //部署發(fā)布

姿勢(shì)二

當(dāng)我們?cè)谝粋€(gè)空文件夾的時(shí)候，可以執(zhí)行下面的命令。

$ npm install omi-cli -g       //安裝cli
$ omi init                     //初始化項(xiàng)目
$ npm run dev                  //開(kāi)發(fā)
$ npm run dist                 //部署發(fā)布

這里不用再去跳轉(zhuǎn)目錄了，當(dāng)前目錄就是項(xiàng)目的目錄。

安裝過(guò)程截圖

安裝omi-cli:

安裝初始化項(xiàng)目omi init:

上面的成功的界面。注意：初始化項(xiàng)目會(huì)自動(dòng)安裝相關(guān)的npm依賴包，所以時(shí)間較長(zhǎng)，請(qǐng)耐心等待。
安裝完成之后，在項(xiàng)目目錄下你可以看到下面的目錄結(jié)構(gòu)：

開(kāi)發(fā) npm run dev:

如果，你看到了上面的界面，說(shuō)明一切OK了。創(chuàng)建出來(lái)的項(xiàng)目主要基于 Gulp + Webpack + Babel + BrowserSync 進(jìn)行開(kāi)發(fā)和部署。Gulp用來(lái)串聯(lián)整個(gè)流程，Webpack + Babel讓你可以寫(xiě)ES6和打包，BrowserSync用來(lái)幫你刷瀏覽器，不用F5了。

組件開(kāi)發(fā)

頁(yè)面的組件都在component目錄:

你可以把組件的HTML、CSS和JS分離成三個(gè)文件，然后通過(guò)require的方式使用，如：

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的方式：

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 ></a>
        </div>
        <ul class="menu">
            <li class="github_li"><a >Github</a>
            <li><a >Playground</a></li>
            <li><a >[Edit the Docs]</a></li>
            </li>
        </ul>
    </div>`;
    }
}

export default Header;

如果需要更多動(dòng)態(tài)編程能力，可以all in js。如果純靜態(tài)不怎么需要改動(dòng)的話，直接分離成三個(gè)文件通過(guò)require進(jìn)來(lái)便可。

后續(xù)

更多腳手架模板以及更多功能的命令正在開(kāi)發(fā)中，如果有什么意見(jiàn)或者建議歡迎讓我們知道。

相關(guān)

• Omi的Github地址https://github.com/AlloyTeam/omi
• 如果想體驗(yàn)一下Omi框架，可以訪問(wèn) Omi Playground
• 如果想使用Omi框架或者開(kāi)發(fā)完善Omi框架，可以訪問(wèn) Omi使用文檔
• 如果你想獲得更佳的閱讀體驗(yàn)，可以訪問(wèn) Docs Website
• 如果你懶得搭建項(xiàng)目腳手架，可以試試 omi-cli
• 如果你有Omi相關(guān)的問(wèn)題可以 New issue
• 如果想更加方便的交流關(guān)于Omi的一切可以加入QQ的Omi交流群(256426170)