meteor 常用包 整理

说明

本次整理基于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-templatesmeteor remove ecmascriptmeteor 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