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;
也可以直接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框架或者開發完善Omi框架,可以訪問 Omi使用文件
- 如果你想獲得更佳的閱讀體驗,可以訪問 Docs Website
- 如果你懶得搭建專案腳手架,可以試試 omi-cli
- 如果你有Omi相關的問題可以 New issue
- 如果想更加方便的交流關於Omi的一切可以加入QQ的Omi交流群(256426170)
相關推薦
Omi命令列介面omi-cli釋出
寫在前面 通常認為,命令列介面(CLI)沒有圖形使用者介面(GUI)那麼方便使用者操作。但是CLI比GUI節約資源,在熟悉命令之後,CLI會比GUI更加高效地幫你完成想要的任務。 下面來介紹下pasturn童鞋為Omi開發的CLI的兩種使用姿勢: 姿勢一 $ npm install omi-cli -g
AWS 命令列介面(CLI)_管理AWS服務的統一工具
Amazon Web Services 誠聘精英。 Amazon Web Services (AWS) 是 Amazon.com 的一個充滿活力、不斷壯大的業務部門。我們現誠聘軟體開發工程師、產品經理、客戶經理、解決方案架構師、支援工程師、系統工程師以及設計師等人才。請訪問我
4 個擁有絕佳命令列介面的終端程式
作者: Amjith Ramanujam 譯者: LCTT geekpi 讓我們來看幾個精心設計的 CLI 程式,以及如何解決一些可發現性問題。 在本文
生成命令列介面--google開源的fire使用體驗【python-fire】
在python中,命令列介面常用的argparse 和click,但是相對於python-fire 來說靈活度太缺了,fire可以直接將python中的函式,以命令列顯示. 簡單的介紹幾個例子: #!/usr/bin/env python # -*- coding: utf-8
Airflow 中文文件:命令列介面
Airflow具有非常豐富的命令列介面,允許在DAG上執行多種型別的操作,啟動服務以及支援開發和測試。 usage : airflow [ - h ] { resetdb , render , variables , connections , creat
命令列介面到圖形化介面解決方法
圖形化突然丟失,與alt+ctrl+f1/f2/f3切換沒有關係 命令列介面到圖形化介面 方法如下 [[email protected] ~]yum grouplist [[email protected] ~]yum groupinstall “X Window
三行命令實現ubuntu圖形介面和命令列介面互切
Linux圖形介面和命令列介面相互切換方法: 如果預設是圖形介面時: Root模式下:vi /etc/default/grub 非Root模式下:sudo vi /etc/default/grub 可以看到這裡default=”quiet spl
Centos7設定預設進入圖形介面和命令列介面
相比7之前的版本,在centos7版本中,設定OS啟動預設進入圖形介面還是文字介面有了點變化。 檢視當前預設設定 systemctl get-default graphical.target #預設圖形
Golang中基礎的命令列模組urfave/cli
前言 相信只要部署過線上服務,都知道啟動引數一定是必不可少的,當你在不同的網路、硬體、軟體環境下去啟動一個服務的時候,總會有一些啟動引數是不確定的,這時候就需要通過命令列模組去解析這些引數,urfave/cli是Golang中一個簡單實用的命令列工具。 安裝 通過 go
centOS6.5如何從啟動介面直接進入命令列介面和如何從圖形介面進入命令列介面
centOS6.5如何從啟動介面直接進入命令列介面 編輯 /etc/inittab 將 id:5:initdefault: 修改為 id:3:initdefault: 下次重啟就不啟動X
純命令列介面下安裝並執行官方Android emulator
純命令列介面指沒有安裝Android studio。 下載sdk-tools 可以根據實際需要下載,不需要FQ(2018-04-07) 下載後只有一個tools目錄。 平臺SDK 工具包大小SHA-256 校驗和 Windows 132 MB(138,449,982 bytes) 7f6037d3a
ubuntu只能以訪客登入,或命令列介面下無法用startx切換到圖形介面
因為安裝軟體需要使用root許可權,ubuntu小白只能去百度,最後的結果就是完全找不到了原來的賬戶,圖形介面下只能以訪客登入。切換到命令列介面後可以登入原先的賬號,但輸入startx後提示 timeout in locking authority file in /hom
Linux虛擬機器:Cetos6.5命令列介面和圖形介面切換
最近初學Linux系統,想把學習中遇到的問題彙總下,既能鞏固,也方便和大家分享,共勉吧。 我使用的Centos6.5,minimal和DVD版本的都試了很多次,感覺命令列和桌面的切換還是比較簡單的 一.圖形介面和命令列介面的切換 切換到圖形介面:Ctrl
Linux開機 進入圖形介面或命令列介面
在root使用者許可權下: 檢視當前啟動模式 # systemctl get-default 更改模式命令: systemctl set-default graphical.target由命令列模式更改為圖形介面模式 systemctl set-
CentOS7設定開機啟動方式(圖形介面/命令列介面)
CentOS 7由於使用systemd而不是init,所以不能通過修改inittab檔案來修改開機啟動模式。 先使用ctrl+alt+f2切換到命令列模式,然後輸入命令:systemctl set-default multi-user.target 對應
技術流 | 手把手教你用Python設計一個命令列介面
作者 | Yannick Wolff 譯者 | 劉旭坤 整理 | Jane
ubuntu 14.04啟動進入命令列介面
用了centos,再用ubuntu真是想抓狂了。 也可能是基礎不牢固吧。 言歸正題: 修改/etc/default/grub檔案 修改GRUB_CMDLINE_LINUX_DEFAULT如下: GRUB_CMDLINE_LINUX_DEFAULT=“text” 取消 #GR
Flask1.0.2系列(十七) 命令列介面
英文原文地址:http://flask.pocoo.org/docs/1.0/cli/ 若有翻譯錯誤或者不盡人意之處,請指出,謝謝~ 在你的虛擬環境中安裝Flask的時候會安裝flask指令碼——一個Click命令列
Ubuntu 圖形桌面與命令列介面 切換快捷鍵
1、Ubuntu 進入命令列: //快捷鍵 Ctrl+Alt+F1 2、Ubuntu 退出命令列: //快捷鍵 Ctrl+Alt+F7 3、Ubuntu 進入命令列視窗:
Ubuntu輸入密碼後無法進入桌面,但是可以進入命令列介面
安裝中文版的ubuntu經常會出現無法進入桌面的狀況,這裡給出我的解決方案。初步斷定是Xwindows介面軟體出問題了,所以重灌即可!Solve: 1.Ctrl+Alt+F1進入命令列介面,root賬戶登陸Ctrl+Alt+F1進入命令列介面後,首先出現 ygx(你的使用