Omi 命令行界面 omi-cli 发布

   <h2>Omi命令行界面omi-cli发布</h2>    <p>通常认为，命令行界面（CLI）没有图形用户界面（GUI）那么方便用户操作。但是CLI比GUI节约资源，在熟悉命令之后，CLI会比GUI更加高效地帮你完成想要的任务。</p>    <p>下面来介绍下 pasturn 童鞋为Omi开发的CLI的两种使用姿势：</p>    <h2>姿势一</h2>    <pre>  <code class="language-css">$ npm install omi-cli -g       //安装cli  $ omi init your_project_name   //初始化项目  $ cd your_project_name         //转到项目目录  $ npm run dev                  //开发  $ npm run dist                 //部署发布</code></pre>    <h2>姿势二</h2>    <p>当我们在一个空文件夹的时候，可以执行下面的命令。</p>    <pre>  <code class="language-css">$ npm install omi-cli -g       //安装cli  $ omi init                     //初始化项目  $ npm run dev                  //开发  $ npm run dist                 //部署发布</code></pre>    <p>这里不用再去跳转目录了，当前目录就是项目的目录。</p>    <h2>安装过程截图</h2>    <p>安装omi-cli:</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/2c6429680975f6e5c85476a5399cf14b.png"></p>    <p>安装初始化项目omi init:</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/935c5af6b158928bb4763f900789a84b.png"></p>    <p>上面的成功的界面。注意：初始化项目会自动安装相关的npm依赖包，所以时间较长，请耐心等待。 安装完成之后，在项目目录下你可以看到下面的目录结构：</p>    <p><img src="https://simg.open-open.com/show/3823fa99ed26a73830e414bc7c1a1c92.png"></p>    <p>开发 npm run dev:</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/d38de86cd908ed7d121adfcd4a56715f.png"></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/eb42d292b3aa82583bfa088ae8a65d52.png"></p>    <p>如果，你看到了上面的界面，说明一切OK了。创建出来的项目主要基于 Gulp + Webpack + Babel + BrowserSync 进行开发和部署。Gulp用来串联整个流程，Webpack + Babel让你可以写ES6和打包，BrowserSync用来帮你刷浏览器，不用F5了。</p>    <h2>组件开发</h2>    <p>页面的组件都在component目录:</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/62ffe13ce4c099919c20839c93a30178.png"></p>    <p>你可以把组件的HTML、CSS和JS分离成三个文件，然后通过require的方式使用，如：</p>    <pre>  <code class="language-css">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;</code></pre>    <p>也可以直接all in js的方式：</p>    <pre>  <code class="language-css">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="/misc/goto?guid=4959739471547175854"></a>          </div>          <ul class="menu">              <li class="github_li"><a href="/misc/goto?guid=4959739471547175854">Github</a>              <li><a href="/misc/goto?guid=4959739471635992727">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;</code></pre>    <p>如果需要更多动态编程能力，可以all in js。如果纯静态不怎么需要改动的话，直接分离成三个文件通过require进来便可。</p>    <h2>后续</h2>    <p>更多脚手架模板以及更多功能的命令正在开发中，如果有什么意见或者建议欢迎让我们知道。</p>    <h2>相关</h2>    <ul>     <li>Omi的Github地址 <a href="/misc/goto?guid=4959739471547175854" rel="nofollow,noindex">https://github.com/AlloyTeam/omi</a></li>     <li>如果想体验一下Omi框架，可以访问 <a href="/misc/goto?guid=4959739471635992727" rel="nofollow,noindex">Omi Playground</a></li>     <li>如果想使用Omi框架或者开发完善Omi框架，可以访问 <a href="/misc/goto?guid=4959741225318586883" rel="nofollow,noindex">Omi使用文档</a></li>     <li>如果你想获得更佳的阅读体验，可以访问 <a href="/misc/goto?guid=4959739471798222858" rel="nofollow,noindex">Docs Website</a></li>     <li>如果你懒得搭建项目脚手架，可以试试 <a href="/misc/goto?guid=4959739471889638560" rel="nofollow,noindex">omi-cli</a></li>     <li>如果你有Omi相关的问题可以 <a href="/misc/goto?guid=4959739471979547908" rel="nofollow,noindex">New issue</a></li>     <li>如果想更加方便的交流关于Omi的一切可以加入QQ的Omi交流群(256426170)</li>    </ul>    <p> </p>    <p> </p>    <p>来自：https://github.com/AlloyTeam/omi/blob/master/docs/deep_in/cn_omi-cli.md</p>    <p> </p>