原文鏈接:https://github.com/AlloyTeam/omi/blob/master/docs/deep_in/cn_omi-cli.md
寫在前面
通常認爲,命令行界面(CLI)沒有圖形用戶界面(GUI)那麼方便用戶操作。但是CLI比GUI節約資源,在熟悉命令之後,CLI會比GUI更加高效地幫你完成想要的任務。
Omi CLI地址: omi-cli
下面來介紹下 pasturn 童鞋爲Omi開發的CLI的兩種使用姿勢:
姿勢一
Crayon Syntax Highlighter v_2.7.2_beta$ npm install omi-cli -g //安裝cli
$ omi init your_project_name //初始化項目
$ cd your_project_name //轉到項目目錄
$ npm run dev //開發
$ npm run dist //部署發佈
姿勢二
當我們在一個空文件夾的時候,可以執行下面的命令。
Crayon Syntax Highlighter v_2.7.2_beta$ 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的方式使用,如:
Crayon Syntax Highlighter v_2.7.2_betaimport 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的方式:
Crayon Syntax Highlighter v_2.7.2_betaimport 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)