Omi命令行界面omi-cli发布
原文链接: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 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的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发布相关推荐
- Omi v1.0震撼发布 - 令人窒息的Web组件化框架
原文链接--https://github.com/AlloyTeam/omi 写在前面 Omi框架经过几十个版本的迭代,越来越简便易用和强大. 经过周末的连续通宵加班加点,Omi v1.0版本终于问世 ...
- 基于 Webpack2、Vue2、iView2 的可视化脚手架 iView Cli 发布 2.0 版本
谷歌今天发布了一系列"性感"的软件,我们也发布了一款大家期待已久的开发者工具,同样很性感 :) iView 2.0 已经发布有两个月了,在 2.0 发布后,npm 下载量.issu ...
- [React Native]使用App Center CLI发布CodePush更新--iOS简易版
面向 用RN开发iOS的小伙伴,并且想使用RN的热更新功能,又不想在一大堆文档里翻来覆去的,可以看看这个简易版.觉得不错的话可以点个赞或关注.附上详细版. 主要步骤 安装App Center CLI: ...
- 使用CF Cli发布应用Spring Music
准备工作 环境要求: JDK 1.7 CF Cli 6.9.0 如果是首次发布应用,须执行以下命令 #设置API网络地址 cf api api.10.244.0.34.xip.io --skip-ss ...
- Angular cli 发布自定义组件
建立工作空间 ng new Test --style=scss //Angular6.x及以下可以使用这个命令指定使用.scss样式表 ng new Test ...
- 网络amp;安全学习:解决eNSP路由器打开命令行界面(CLI)一直输出“###”的问题
前言:处女贴,虽然注册已久. 一.概述 嗯,华为的eNSP模拟器真心是一个神奇的模拟器,你不知道什么时候会遇到bug.话不多说,本文主要解决eNSP安装完成后,启动AR路由器,打开命令行一直出现&qu ...
- 解决eNSP路由器打开命令行界面(CLI)一直输出“###”的问题(大合集)
我出现了问题,以下方法都使用后就可以了 ** 错误界面 ** 1.进入Windows Defender 防火墙 2.勾选名称为eNSP有关的专用一列方框 3.停止设备后重新开启设备 前言:处女贴,虽然 ...
- c#使用nuget.exe CLI发布 nupkg 包
2019独角兽企业重金招聘Python工程师标准>>> 准备 工具:nuget.exe CLI(本人使用版本: NuGet Version: 4.6.2.5055) 将下载的的nug ...
- 制作命令行界面(CLI)带来乐趣和收益
下次您有一个主意
最新文章
- 阿里云天池大赛赛题解析――深度学习篇
- 谷歌大脑提出对智能体进行「正向-反向」强化学习训练,加速训练过程
- vant 项目_如何搭建mpvue框架搭配vant组件库的小程序项目
- copy of an AVPacket structure
- (61)分析 KiFindReadyThread 函数 —— 线程优先级
- 【复杂系统迁移 .NET Core平台系列】之认证和授权
- php文件显示不完整,github文件显示不全
- SQL中常用的的时间跟日期函数
- 计算机应用研究潜规则,基于相容矩阵计算的不完备决策系统规则获取算法
- RookeyFrame 隐藏 首次加载菜单 的伸缩动画
- Open XML之我见
- 尺取法 POJ 3320 Jessica's Reading Problem
- 慕课网仿去哪儿项目笔记--(五)-详情页面的开发
- 收到谷歌实习邀请 “比被清华录取还激动”
- 入门级概述光学相干层析(OCT)原理
- 百鸡问题用计算机思维,大力出奇迹:当古代数学难题遇到现代计算机
- 数据分析:大数据时代的必备技能之EXCEL
- c语言中int类型与char类型数据转换
- 关于道家与道教的总结
- Android tips(十二)--Android开发中使用矢量图