omi-cli

用户指南

文件目录

执行完omi init my-app,你可以看到会生成如下的基础目录结构

my-app/
config
project.js
config.js
src/
component
css
img
js
libs
page
index
page-b
favicon.ico
  • config里的文件是webpack打包配置以及cdn、webserver,端口、route配置
  • src目录是我们的项目逻辑代码目录

npm 脚本

npm start

当你执行 npm start 会自动打开 http://localhost:9000/。现在你可以开始开发和调试,修改代码并且保存,浏览器会自动刷新显示最新的结果。

npm run dist

当你执行 npm run dist 之后,会创建一个dist目录,所有要发布的文件都在里面:

my-app/
dist/
chunk
component
css
img
js
libs
favicon.ico
index.html
page-b.html

component会保留其依赖的某些资源文件,chunk会输出分割出来的模板,怎么分割请往下看。

代码分割

为了优化性能,用户不需要一次性加载所有网页的依赖,可以在需要使用的时候再进行加载,所以这部分可以进行分割成单独的模块。

如下面的a.js:

import logo from '../../img/omi.png'

module.exports = { src: logo }

通过require.ensure进行按需使用,在用户点击事件触发之后才会进行加载a.js以及a.js的所有依赖,如下面代码所示:

class Hello extends Omi.Component {
constructor(data, option){
super(data, option)
} handleClick(){
require.ensure(['./a.js'], function() {
var a = require("./a.js")
document.body.innerHTML+=`<img src="${a.src}">`
})
} render() {
return `
<div class="App">
<div class="App-header">
<img src='${logo}' onclick="handleClick" class="App-logo" alt="logo" />
<h2>Welcome to Omi</h2>
</div>
<p class="App-intro">
To get started, edit <code>src/component/hello.js</code> and save to reload.
</p>
<p class="App-intro">
{{name}}
</p>
</div>
`
}
}

上面是老的方式,webpack2更加建议使用一种"类函数式(function-like)"的 import() 模块加载语法。如:

import("./a.js").then(function(moduleA) {
console.log(moduleA);
document.body.innerHTML+=`<img src="${moduleA.src}">`
});

这样也能达到同样的效果,当然你也可以使用async/await

兼容 IE8

Omi框架是可以兼容IE8的。

由于使用了webpack-hot-middleware, 开发过程不兼容IE8,但是没关系,npm run dist 生成的发布代码是兼容IE8。

需要主要的是,你需要在你的HTML里引用es5-sham或者es5-shim。如:

<!--[if lt IE 9]>
<script type="text/javascript" crossorigin="anonymous" src="//s.url.cn/qqun/xiaoqu/buluo/p/js/es5-sham-es5-sham.min.77c4325f.js"></script>
<![endif]-->

插入 CSS

通过import可以在js依赖相关的css文件,

import './index.css'

index.css会被提取到CSS文件当中,插入到head里面。

插入组件局部 CSS

import './index.css'

class Hello extends Omi.Component {
constructor(data, option){
super(data, option)
} style(){
return require('./_hello.css')
}
...
...
}

Omi框架的style方法返回的字符串会生成为组件的局部CSS,_hello.css文件会在运行时动态插入到head里面。

需要特别注意的是: 组件的局部CSS必须使用下划线开头,如_xxx.css_aaa-bbb.css,不然会被识别成全局CSS插入到head里。

局部CSS使用图片

当然不是必须require外部的css文件,也可以直接写在style方法内,组件的依赖的图片资源也在组件的目录内:

my-app/
src/
component
hello
index.js
pen.png
pencil.png

对应的index.js如下所示:

class Hello extends Omi.Component {
constructor(data, option){
super(data, option)
} style(){
return `
.icon-pen {
background-image: url(${require('./pen.png')});
}
.icon-pencil {
background-image: url(${require('./pencil.png')});
}
`
}
...
...
}

插入 Less

通过import可以在js依赖相关的css文件,

import './xxx.less'

xxx.less会在转换成CSS,并且被提取到CSS文件当中,插入到head里面。

插入组件局部 Less


class Intro extends Omi.Component {
constructor(data, option){
super(data, option)
} style(){
return require('./_index.less')
} render() { return `
<p class="app-intro">
To get started, edit <code>src/component/hello.js</code> and save to reload.
</p>
`
}
} export default Intro

Omi框架的style方法返回的字符串会生成为组件的局部CSS,_index.css文件会在运行时动态插入到head里面。

需要特别注意的是: 组件的局部Less必须使用下划线开头,如_xxx.css_aaa-bbb.css,不然会被识别成全局CSS插入到head里。

导入组件

如上面一节定义了Intro组件,利用复用。那么怎么在其他组件中使用?

import Intro from '../intro/index.js'

Omi.tag('intro',Intro)

class XXX extends Omi.Component {
constructor(data, option){
super(data, option)
} render() { return `
<div>
<div>Hello Omi!</div>
<intro></intro>
</div>
`
}
} export default XXX

通过Omi.tag('intro',Intro)把组件Intro生成为可以声明式的标签。注意便签名字要使用小写,多个单词使用中划线,如:my-introapp-header等。

导入图片、字体、SVG 等文件

如上面的例子:

import logo from './logo.svg'

logo.svg会被动态转成base64。我们可以为每种类型都对应webpack里的一个loader来处理所有的文件类型。

修改配置

打开 config.js,其位置如下:

my-app/
config
project.js
**config.js**

打开之后可以看到

module.exports = {
"webserver": "//localhost:9000/",
"cdn": "",
"port": "9000",
"route": "/news/",
};

修改 CDN 地址

module.exports = {
"webserver": "//localhost:9000/",
"cdn": "//s.url.cn/",
"port": "9000",
"route": "/news/",
};

修改 webserver 和 port

module.exports = {
"webserver": "//localhost:9000/",
"cdn": "//s.url.cn/",
"port": "9001",
"route": "/news/",
};

修改 route

module.exports = {
"webserver": "//localhost:9001/",
"cdn": "//s.url.cn/",
"port": "9001",
"route": "/user/",
};

Github

https://github.com/AlloyTeam/omi-cli

腾讯AlloyTeam正式发布omi-cli脚手架 - 创建网站无需任何配置的更多相关文章

  1. 腾讯AlloyTeam正式发布omi-cli脚手架 v1.0 - 创建网站无需任何配置

    omi-cli omi-cli omi-cli命令 omi框架 用户指南 文件目录 npm 脚本 npm start npm run dist 代码分割 兼容 IE8 插入 CSS 插入组件局部 CS ...

  2. 腾讯AlloyTeam正式发布Canvas魔幻线条 - curvejs

    [原文链接] ## 写在前面 curvejs 中文读["克js"],是腾讯AlloyTeam打造的一款魔幻线条框架,让线条成为一名优秀的舞者,让线条们成为优秀的舞团,HTML5 ...

  3. 腾讯AlloyTeam正式发布pasition - 制作酷炫Path过渡动画

    pasition Pasition - Path Transition with little JS code, render to anywhere - 超小尺寸的Path过渡动画类库 Github ...

  4. vue脚手架创建项目及常用配置

    首先安装配置这两篇挺好的 https://www.cnblogs.com/lgx5/p/10732016.html https://blog.csdn.net/qiang510939237/artic ...

  5. vue搭建cli脚手架环境(出现问题及解决,主要是node版本低)

    Vue 提供了一个官方的cli,为单页面应用 (SPA) 快速搭建繁杂的脚手架. 一.vue cli脚手架 脚手架通过webpack搭建开发环境 使用ES6语法 打包压缩js为一个文件 项目文件在环境 ...

  6. 使用vue-cli脚手架创建vue项目

    使用vue-cli脚手架创建vue项目 首先,你已经安装了node. 使用vue-cli@2 创建项目 执行 命令: npm i -g vue-cli@2 //全局安装vue-cli@2脚手架 : v ...

  7. 13. Vue CLI脚手架

    一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...

  8. 你不容错过的 腾讯 AlloyTeam Web 前端大会 看点完全剖析

    AC大会 ( Alloyteam Conf ),是由腾讯前端技术团队的标杆团队 AlloyTeam 发起的前端技术大会,旨在分享团队在技术研究.产品研发.开源项目的经验沉淀.AC2017 将会继续在工 ...

  9. 用vue脚手架创建bootstrap-vue项目

    用vue脚手架创建bootstrap-vue项目 框架的地址:https://bootstrap-vue.js.org/docs/ 第一步 vue init webpack demo第二步 cd de ...

随机推荐

  1. python 饥饿的小易(网易笔试题)

    本周早些时候,学弟给我发了一道网易的笔试题,饥饿的小易,感觉有点意思-分享给大家 题目描述: 小易总是感觉饥饿,所以作为章鱼的小易经常出去寻找贝壳吃.最开始小易在一个初始位置x_0.对于小易所处的当前 ...

  2. Spring Data Redis 让 NoSQL 快如闪电(2)

    [编者按]本文作者为 Xinyu Liu,文章的第一部分重点概述了 Redis 方方面面的特性.在第二部分,将介绍详细的用例.文章系国内 ITOM 管理平台 OneAPM 编译呈现. 把 Redis ...

  3. Hexo使用细节及各种问题

    解决markdown图片不显示(返回403 forbidden).添加本地图片无法显示.修改文章page模板.同时部署发布同步到多个仓库站点(Github.coding.gitee 码云) 图片不显示 ...

  4. 解决“Eclipse中启动Tomcat后,http://localhost:8080/无法访问”的问题

    这个问题是eclipse造成的,我们可以修改配置来实现通过eclipse启动tomcat可以访问http://localhost:8080 打开Server试图(打开前不要启动tomcat),双击其中 ...

  5. Socket引子

    === ''' Socket网络编程: --应用层:http smtp dns ftp ssh snmp dhcp... 无论协议是什么本质上都是数据交换,总结为两种方式:收和发 --传输层(端口Po ...

  6. python 基本数据类型--字符串实例详解

    字符串(str) :把字符连成串. 在python中⽤', ", ''', """引起来的内容被称为字符串 . 注意:python中没有单一字符说法,统一称叫字 ...

  7. Teradata超长数据会截断

    1.数据库版本 Teradata 15.10 2.测试案例: create multiset table test_stg ( col1 ) CHARACTER SET LATIN not null ...

  8. VsCode放大缩小

    如图:vscode界面突然缩小了 通过快捷键 ctrl+shift+ + 放大  ctrl+shift+ - 缩小

  9. spring boot监控--actuator

    原文地址:http://blog.csdn.net/wh_ouyangshuang/article/details/48048111 spring-boot-actuator模块提供了一个监控和管理生 ...

  10. centos7下安装docker(13.4容器volume总结)

    最近我们学习了docker 存储,首先docker存储有两种:storage driver和data volume. storage driver是由镜像层和容器层组成的,可以通过docker ins ...