riot-component
v1.0.0
Published
some components base on riot.js
Downloads
7
Maintainers
fanshaoyongReadme
#riot-component 基于riotv3.0.5的组件,在线demo
基于riot2.6.4的组件，请切换分支到release/0.0.3
- [x] calendar
- [x] slider
- [ ] popver
###重要说明
- 本项目基于riot 3.0.5重构，注意riotjs从2.6.4到3.x的 changes
- 项目基于typescript及sass编译生成，由于是基于
riot.Tag来构建新的模块，mount模板的方式变为生成实例的方式，并且有一些beak changes，所以版本变更为1.0.0
开始使用
打包文件共两种模式四种模块加载方式，~~默认是将css包含在tag模板的<style scoped></style>中，文件名未包含-no-css,还有一种未包含css，文件名包含有-no-css，引用这种模式的riot-component需要单独引入riot-component.css~~ [目前只有内置的css，无单独引入的css文件版本]
- 直接在浏览器中使用
- 引用riot.js
- 引用normalize.css，非必须选项
- ~~引用pure.css的grids~~[无须引入]
- ~~如果想引用未包含css的
riot-componentjs文件，需要单独引入riot-component.css~~[暂未有些版本] - 引用需要的
riot-componentjs文件,有[amd,commonjs,es6,script标签四个版本] - 开始使用riot-component组件
<!DOCTYPE html>
<html>
<head>
<title>riot-component</title>
</head>
<body>
<riot-calendar></riot-calendar>
<script src="riot.js"></script>
<script src="dist/riot-comonent.js"></script>
<script>
//0.0.3
riot.mount('riot-calendar')
//1.0.0
var riotCalendar = riotComponent.RiotCalendar;
new RiotCalendar(document.querySelector('riot-calendar'));
</script>
</body>
</html>- 使用riot-component包
$ npm install --save riot-component`//app.js
import riot from 'riot'
//0.0.3
import 'riot-component'
riot.mount('riot-calendar')
//1.0.0
import {RiotCalendar} from 'riot-component'
new RiotCalendar(document.querySelector('riot-calendar'));
<!DOCTYPE html>
<html>
<head>
<title>riot-component</title>
<link rel="stylesheet" href="pure.css">
</head>
<body>
<riot-calendar></riot-calendar>
<script src="app.js"></script>
</body>
</html>组件说明
请看api文档api文档暂未变化，除了mount方式变化，基本无变化，详情查看demo
开发说明
本项目采用gulp进行项目自动编译工具，rollup进行打包
npm install下载所有包npm run start:build进行打包并进行实时编译、热刷新页面
npm script说明
build： 打包 包含有css文件watch： 监听文件修改server： 基于browser-sync进行热刷新start：server与watch的复合命令start:build：build、watch及server的复合命令