Omi命令行界面omi-cli发布

栏目: 编程工具 · 发布时间: 6年前

内容简介:Omi命令行界面omi-cli发布

原文链接: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的两种使用姿势:

姿势一

$ npminstallomi-cli -g      //安装cli
$ omiinityour_project_name  //初始化项目
$ cdyour_project_name        //转到项目目录
$ npmrundev                  //开发
$ npmrundist                //部署发布
 

姿势二

当我们在一个空文件夹的时候,可以执行下面的命令。

$ npminstallomi-cli -g      //安装cli
$ omiinit                    //初始化项目
$ npmrundev                  //开发
$ npmrundist                //部署发布
 

这里不用再去跳转目录了,当前目录就是项目的目录。

安装过程截图

安装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的方式使用,如:

importOmifrom 'omi';
 
const tpl = require('./index.html');
const css = require('./index.css');
 
class Footerextends Omi.Component {
    constructor (data) {
        super(data);
    }
 
    style () {
        return css;
    }
 
    render () {
        return tpl;
    }
}
 
exportdefault Footer;
 

也可以直接all in js的方式:

importOmifrom 'omi';
 
class Headerextends Omi.Component {
    constructor (data) {
        super(data);
    }
 
    style () {
        return `
        <style>
        .menu a:hover{
            color: white;
        }
        </style>
        `;
    }
 
    render () {
        return `
    <divclass="head bord-btm">
        <divclass="logo_box">
            <a href="https://github.com/AlloyTeam/omi"></a>
        </div>
        <ulclass="menu">
            <liclass="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">[EdittheDocs]</a></li>
            </li>
        </ul>
    </div>`;
    }
}
 
exportdefault 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命令行界面omi-cli发布》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

代码大全(第2版)

代码大全(第2版)

[美] 史蒂夫·迈克康奈尔 / 金戈、汤凌、陈硕、张菲 译、裘宗燕 审校 / 电子工业出版社 / 2006-3 / 128.00元

第2版的《代码大全》是著名IT畅销书作者史蒂夫·迈克康奈尔11年前的经典著作的全新演绎:第2版不是第一版的简单修订增补,而是完全进行了重写;增加了很多与时俱进的内容。这也是一本完整的软件构建手册,涵盖了软件构建过程中的所有细节。它从软件质量和编程思想等方面论述了软件构建的各个问题,并详细论述了紧跟潮流的新技术、高屋建瓴的观点、通用的概念,还含有丰富而典型的程序示例。这本书中所论述的技术不仅填补了初......一起来看看 《代码大全(第2版)》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

MD5 加密
MD5 加密

MD5 加密工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具