omi-cli
- omi-cli
- omi-cli命令
- omi框架
用户指南
- 文件目录
- npm 脚本
- npm start
- npm run dist
- 代码分割
- 兼容 IE8
- 插入 CSS
- 插入组件局部 CSS
- 局部CSS使用图片
- 插入 Less
- 插入组件局部 Less
- 导入组件
- 导入图片、字体、SVG 等文件
- 修改配置
- 修改 CDN 地址
- 修改 webserver 和 port
- 修改 route
文件目录
执行完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+=``
})
}
render() {
return `
Welcome to Omi
To get started, edit src/component/hello.js
and save to reload.
{{name}}
`
}
}
上面是老的方式,webpack2更加建议使用一种"类函数式(function-like)"的 import() 模块加载语法。如:
import("./a.js").then(function(moduleA) {
console.log(moduleA);
document.body.innerHTML+=``
});
这样也能达到同样的效果,当然你也可以使用async/await。
兼容 IE8
Omi框架是可以兼容IE8的。
由于使用了webpack-hot-middleware
, 开发过程不兼容IE8,但是没关系,npm run dist
生成的发布代码是兼容IE8。
需要主要的是,你需要在你的HTML里引用es5-sham或者es5-shim。如:
插入 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 `
To get started, edit src/component/hello.js
and save to reload.
`
}
}
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 `
Hello Omi!
`
}
}
export default XXX
通过Omi.tag('intro',Intro)
把组件Intro生成为可以声明式的标签。注意便签名字要使用小写,多个单词使用中划线,如:my-intro
、app-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