meteor 常用包 整理

[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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,056评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,842评论 2 378
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,938评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,296评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,292评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,413评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,824评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,493评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,686评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,502评论 2 318
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,553评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,281评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,820评论 3 305
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,873评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,109评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,699评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,257评论 2 341

推荐阅读更多精彩内容