[TOC]
说明
本次整理基于Meteor版本 1.2.1
如果版本更新,请自行判断包可用性和兼容性
推荐安装有
包名 | 代码 | 作用 |
---|---|---|
spacebars | spacebars | 模板 |
ssr | meteorhacks:ssr | 模板 |
check | check | 类型检查 |
reload | reload | 浏览器刷新保持 |
device-detection | mystor:device-detection | 客户端设备类型 |
subs-manager | meteorhacks:subs-manager | 客户端缓存管理器 |
accounts-password | accounts-password | 帐号密码系统 |
http | http | Http协议支持 |
reactive-var | reactive-var | 响应式变量 |
underscore | underscore | 集合操作器 |
aggregate | meteorhacks:aggregate | Mongodb的聚合操作 |
random | random | 随机数生成器 |
ejson | ejson | EJSON支持 |
less | less | less智能样式表支持 |
bootstrap | twbs:bootstrap | bootstrap支持 |
bootstrap3 | peppelg:bootstrap-3-modal | bootstrap3模式 |
s-alert | juliancwirko:s-alert | 花式通知栏 |
headroomjs | waitingkuo:headroomjs | headroomjs支持 |
组件类
SpaceBars 模板
Meteor 支持的{{}} 这种模板,详细见
https://atmospherejs.com/meteor/spacebars
https://github.com/meteor/meteor/blob/master/packages/spacebars/README.md
meteor add spacebars
ssr 模板复用工具
使用方法 https://atmospherejs.com/meteorhacks/ssr
meteor add meteorhacks:ssr
Check 类型检查
便捷的类型检查工具,错误抛出是 Math.error
,使用方法是
http://docs.meteor.com/#/full/check
meteor add check
使用方法如下
check(val, String);
使用文档
http://docs.meteor.com/#/full/check
email 支持
电子邮件支持
meteor add email
使用文档见
http://docs.meteor.com/#/full/email
meteorhacks:npm NPM调用
如果是从低版本升级到1.2 npm包,请按照如下操作
rm -rf packages/npm-container
meteor remove npm-container
meteor update meteorhacks:npm
也可以直接 rm packages/npm-container 删除 .meteor/package 中 npm-container
条目,启动2次工程
reload-on-resume 热部署支持
移动端热部署支持包
meteor add mdg:reload-on-resume
reload 页面状态保持
刷新页面时,保持页面状态
meteor add reload
热部署的时候,使用这个技术可以解决很多麻烦
angular 模板
在meteor 1.2.1 中因为冲突,无法使用 angular 模板的情况请使用下面的方法
meteor remove blaze-html-templates
meteor remove ecmascript
meteor add angular
hammer 多点触控支持
移动设备上的多点触控支持包
meteor add chriswessels:hammer
使用的详细文档见
https://atmospherejs.com/chriswessels/hammer
accounts-password 用户登录组件
使用方法见 http://docs.meteor.com/#/full/accounts_api
meteor add accounts-password
device-detection 客户端运行设备类型
使用方法见 https://atmospherejs.com/mystor/device-detection
meteor add mystor:device-detection
subs-manager 客户端缓存
客户端缓存包,目前较不稳定,如果需要请注意使用
meteor add meteorhacks:subs-manager
使用请参阅
https://atmospherejs.com/meteorhacks/subs-manager
kadira Meteor 运行状态监视器
运行监视器,文档见
https://atmospherejs.com/meteorhacks/kadira
meteor add meteorhacks:kadira
standard-minifiers
系统默认组件, 压缩前端代码
meteor add standard-minifiers
网络类
Http支持
meteor add http
因为meteor默认走ddp协议,如果需要支持 Http Restful 就添加,具体使用方法见
https://atmospherejs.com/meteor/http
数据类
响应式变量 reactive-var
meteor add reactive-var
属于Meteor官方API ReactiveVar
非常实用的变量,可用于各种数据操作
js数据操作 underscore
meteor add underscore
underscore API
underscore 中文API
collection2 优化版集合
集合操作时,可以自动认证数据,客户端服务端通用,使用方法 见
https://atmospherejs.com/aldeed/collection2
meteor add aldeed:collection2
random
各种随机值生成器,详细见
https://atmospherejs.com/meteor/random
meteor add random
EJSON
Meteor 官方提供的EJSON
http://docs.meteor.com/#/full/ejson
meteor add ejson
loggin 日志记录
日志记录工具
meteor add logging
MongoDB 聚合支持
Mongodb的聚合支持包,使用方法见
https://atmospherejs.com/meteorhacks/aggregate
meteor add meteorhacks:aggregate
find-from-publication 获取发布的所有文件
使用方法见 https://atmospherejs.com/percolate/find-from-publication
meteor add percolate:find-from-publication
界面类
less 支持
meteor add less
使用IDE的话,可以不引用,直接编译为css即可
省事的话,添加支持包后,需要增加配置
在文件夹 /client/stylesheets
内建立文件 main.less
写入配置
@target: "folder";
@import 'folder/yourless.less';
这样来管理整个层叠样式表
bootstrap
meteor add twbs:bootstrap
大名鼎鼎的bootstrap 中文API
bootstrap 3 模式
导入前一定先添加 twbs:bootstrap
meteor add peppelg:bootstrap-3-modal
使用文档见,https://atmospherejs.com/peppelg/bootstrap-3-modal
简单的 spinner
Meteor 的一个简单的 Spinner 使用参见
https://atmospherejs.com/sacha/spin
meteor add sacha:spin
各种 alert 效果
各种提示框效果,详细使用见
https://atmospherejs.com/juliancwirko/s-alert
meteor add juliancwirko:s-alert
DocHead HTML头部同构处理
使用方法见
https://atmospherejs.com/kadira/dochead
meteor add kadira:dochead
headroom
固定页头(导航条)可以方便用户在各个页面之间切换。但是这也会带来些问题…
大屏幕一般都是宽度大于高度的,也就是说屏幕高度要少一些。固定页头会占用一部分本来可以用于展示内容的区域。小屏幕一般是高度较大,但是别忘了,屏幕本来就小,页头再占用一部分的话,屏幕可用于展示内容的区域当然还是少。
Headroom.js 能帮你把不需要的页面元素在合适的时间展示出来,让用户花更多时间关注你页面上的内容。
meteor add waitingkuo:headroomjs
使用文档见 https://github.com/WickyNilliams/headroom.js/
示例见 http://wicky.nillia.ms/headroom.js/playroom/
Headroom.options
{
// vertical offset in px before element is first unpinned
offset : 0,
// scroll tolerance in px before state changes
tolerance : 0,
// or scroll tolerance per direction
tolerance : {
down : 0,
up : 0
},
// css classes to apply
classes : {
// when element is initialised
initial : "headroom",
// when scrolling up
pinned : "headroom--pinned",
// when scrolling down
unpinned : "headroom--unpinned",
// when above offset
top : "headroom--top",
// when below offset
notTop : "headroom--not-top"
},
// callback when pinned, `this` is headroom objectonPin : function() {},
// callback when unpinned, `this` is headroom objectonUnpin : function() {},
// callback when above offset, `this` is headroom objectonTop : function() {},
// callback when below offset, `this` is headroom objectonNotTop : function() {}
}
图片类
unveil 图片懒加载
使用见 https://atmospherejs.com/luisalmeida/unveil
有关懒jQuery的图片懒加载 http://www.appelsiini.net/projects/lazyload
meteor add luisalmeida:unveil
可以配置的QRCode dschulz:jquery-qrcode
使用方法见https://atmospherejs.com/dschulz/jquery-qrcode
meteor add dschulz:jquery-qrcode
QRCode生成器
生成二维码 文档见 https://github.com/EtherPOS/jquery-qrcode/
meteor add steeve:jquery-qrcode