#riot-component 基于riotv3.0.5的组件,在线demo
基于riot2.6.4的组件，请切换分支到release/0.0.3
- calendar
- 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模板的 [目前只有内置的css，无单独引入的css文件版本]<style scoped></style>中，文件名未包含-no-css,还有一种未包含css，文件名包含有-no-css，引用这种模式的riot-component需要单独引入riot-component.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进行打包并进行实时编译、热刷新页面
build： 打包 包含有css文件watch： 监听文件修改server： 基于browser-sync进行热刷新start：server与watch的复合命令start:build：build、watch及server的复合命令