Omi命令列介面omi-cli釋出

當耐特發表於2017-02-27
命令列

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

寫在前面

通常認為，命令列介面（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命令列介面omi-cli釋出

安裝初始化專案omi init:

Omi命令列介面omi-cli釋出

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

Omi命令列介面omi-cli釋出

開發 npm run dev:

Omi命令列介面omi-cli釋出

Omi命令列介面omi-cli釋出

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

元件開發

頁面的元件都在component目錄:

Omi命令列介面omi-cli釋出

你可以把元件的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;

也可以直接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="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進來便可。

後續

更多腳手架模板以及更多功能的命令正在開發中，如果有什麼意見或者建議歡迎讓我們知道。

相關

  • Omi的Github地址https://github.com/AlloyTeam/omi
  • 如果想體驗一下Omi框架，可以訪問 Omi Playground
  • 如果想使用Omi框架或者開發完善Omi框架，可以訪問 Omi使用文件
  • 如果你想獲得更佳的閱讀體驗，可以訪問 Docs Website
  • 如果你懶得搭建專案腳手架，可以試試 omi-cli
  • 如果你有Omi相關的問題可以 New issue
  • 如果想更加方便的交流關於Omi的一切可以加入QQ的Omi交流群(256426170)

Omi命令列介面omi-cli釋出

相關文章