Omi 命令行界面 omi-cli 發布

Omi命令行界面omi-cli發布

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

下面來介紹下 pasturn 童鞋為Omi開發的CLI的兩種使用姿勢：

姿勢一

$ npm install omi-cli -g       //安裝cli
$ omi init your_project_name   //初始化項目
$ cd your_project_name         //轉到項目目錄
$ npm run dev                  //開發
$ npm run dist                 //部署發布

姿勢二

當我們在一個空文件夾的時候，可以執行下面的命令。

$ npm install omi-cli -g       //安裝cli
$ omi init                     //初始化項目
$ npm run dev                  //開發
$ npm run dist                 //部署發布

這里不用再去跳轉目錄了，當前目錄就是項目的目錄。

安裝過程截圖

安裝omi-cli:

安裝初始化項目omi init:

上面的成功的界面。注意：初始化項目會自動安裝相關的npm依賴包，所以時間較長，請耐心等待。 安裝完成之后，在項目目錄下你可以看到下面的目錄結構：

開發 npm run dev:

如果，你看到了上面的界面，說明一切OK了。創建出來的項目主要基于 Gulp + Webpack + Babel + BrowserSync 進行開發和部署。Gulp用來串聯整個流程，Webpack + Babel讓你可以寫ES6和打包，BrowserSync用來幫你刷瀏覽器，不用F5了。

組件開發

頁面的組件都在component目錄:

你可以把組件的HTML、CSS和JS分離成三個文件，然后通過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;</code></pre> 
  
也可以直接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 href="/misc/goto?guid=4959739471547175854"></a>
    </div>
    <ul class="menu">
        <li class="github_li"><a href="/misc/goto?guid=4959739471547175854">Github</a>
        <li><a href="/misc/goto?guid=4959739471635992727">Playground</a></li>
        <li><a >[Edit the Docs]</a></li>
        </li>
    </ul>
</div>`;
}

}
export default Header;</code></pre> 
  
如果需要更多動態編程能力，可以all in js。如果純靜態不怎么需要改動的話，直接分離成三個文件通過require進來便可。
 
  
后續
 
  
更多腳手架模板以及更多功能的命令正在開發中，如果有什么意見或者建議歡迎讓我們知道。
 
  
相關
 
  
 
   
Omi的Github地址 https://github.com/AlloyTeam/omi
 
   
如果想體驗一下Omi框架，可以訪問 Omi Playground
 
   
如果想使用Omi框架或者開發完善Omi框架，可以訪問 Omi使用文檔
 
   
如果你想獲得更佳的閱讀體驗，可以訪問 Docs Website
 
   
如果你懶得搭建項目腳手架，可以試試 omi-cli
 
   
如果你有Omi相關的問題可以 New issue
 
   
如果想更加方便的交流關于Omi的一切可以加入QQ的Omi交流群(256426170)
 
  
 
  
 
 
  
 
 
  
來自：https://github.com/AlloyTeam/omi/blob/master/docs/deep_in/cn_omi-cli.md