[TOC]

說明

本次整理基于Meteor版本 1.2.1 如果版本更新，請(qǐng)自行判斷包可用性和兼容性

推薦安裝有

組件類

SpaceBars 模板

Meteor 支持的{{}} 這種模板，詳細(xì)見
https://atmospherejs.com/meteor/spacebars
https://github.com/meteor/meteor/blob/master/packages/spacebars/README.md

meteor add spacebars

ssr 模板復(fù)用工具

使用方法 https://atmospherejs.com/meteorhacks/ssr

meteor add meteorhacks:ssr

Check 類型檢查

便捷的類型檢查工具，錯(cuò)誤拋出是 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調(diào)用

如果是從低版本升級(jí)到1.2 npm包，請(qǐng)按照如下操作

rm -rf packages/npm-container 
meteor remove npm-container 
meteor update meteorhacks:npm 

也可以直接 rm packages/npm-container 刪除 .meteor/package 中 npm-container 條目，啟動(dòng)2次工程

reload-on-resume 熱部署支持

移動(dòng)端熱部署支持包

meteor add mdg:reload-on-resume

reload 頁面狀態(tài)保持

刷新頁面時(shí)，保持頁面狀態(tài)

meteor add reload

熱部署的時(shí)候，使用這個(gè)技術(shù)可以解決很多麻煩

angular 模板

在meteor 1.2.1 中因?yàn)闆_突，無法使用 angular 模板的情況請(qǐng)使用下面的方法

meteor remove blaze-html-templates
meteor remove ecmascript
meteor add angular

hammer 多點(diǎn)觸控支持

移動(dòng)設(shè)備上的多點(diǎn)觸控支持包

meteor add chriswessels:hammer

使用的詳細(xì)文檔見

https://atmospherejs.com/chriswessels/hammer

accounts-password 用戶登錄組件

使用方法見 http://docs.meteor.com/#/full/accounts_api

meteor add accounts-password

device-detection 客戶端運(yùn)行設(shè)備類型

使用方法見 https://atmospherejs.com/mystor/device-detection

meteor add mystor:device-detection

subs-manager 客戶端緩存

客戶端緩存包，目前較不穩(wěn)定，如果需要請(qǐng)注意使用

meteor add meteorhacks:subs-manager

使用請(qǐng)參閱
https://atmospherejs.com/meteorhacks/subs-manager

kadira Meteor 運(yùn)行狀態(tài)監(jiān)視器

運(yùn)行監(jiān)視器，文檔見
https://atmospherejs.com/meteorhacks/kadira

meteor add meteorhacks:kadira

standard-minifiers

系統(tǒng)默認(rèn)組件， 壓縮前端代碼

meteor add standard-minifiers

網(wǎng)絡(luò)類

Http支持

meteor add http

因?yàn)閙eteor默認(rèn)走ddp協(xié)議，如果需要支持 Http Restful 就添加，具體使用方法見

https://atmospherejs.com/meteor/http

數(shù)據(jù)類

響應(yīng)式變量 reactive-var

meteor add reactive-var

屬于Meteor官方API ReactiveVar
非常實(shí)用的變量，可用于各種數(shù)據(jù)操作

js數(shù)據(jù)操作 underscore

meteor add underscore

underscore API
underscore 中文API

collection2 優(yōu)化版集合

集合操作時(shí)，可以自動(dòng)認(rèn)證數(shù)據(jù)，客戶端服務(wù)端通用，使用方法 見
https://atmospherejs.com/aldeed/collection2

meteor add aldeed:collection2

random

各種隨機(jī)值生成器，詳細(xì)見
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 獲取發(fā)布的所有文件

使用方法見 https://atmospherejs.com/percolate/find-from-publication

meteor add percolate:find-from-publication

界面類

less 支持

meteor add less

使用IDE的話，可以不引用，直接編譯為css即可
省事的話，添加支持包后，需要增加配置
在文件夾 /client/stylesheets 內(nèi)建立文件 main.less 寫入配置

@target: "folder";
@import 'folder/yourless.less';

這樣來管理整個(gè)層疊樣式表

bootstrap

meteor add twbs:bootstrap

大名鼎鼎的bootstrap 中文API

bootstrap 3 模式

導(dǎo)入前一定先添加 twbs:bootstrap

meteor add peppelg:bootstrap-3-modal

使用文檔見，https://atmospherejs.com/peppelg/bootstrap-3-modal

簡(jiǎn)單的 spinner

Meteor 的一個(gè)簡(jiǎn)單的 Spinner 使用參見
https://atmospherejs.com/sacha/spin

meteor add sacha:spin

各種 alert 效果

各種提示框效果，詳細(xì)使用見
https://atmospherejs.com/juliancwirko/s-alert

meteor add juliancwirko:s-alert

DocHead HTML頭部同構(gòu)處理

使用方法見
https://atmospherejs.com/kadira/dochead

meteor add kadira:dochead

headroom

固定頁頭（導(dǎo)航條）可以方便用戶在各個(gè)頁面之間切換。但是這也會(huì)帶來些問題…
大屏幕一般都是寬度大于高度的，也就是說屏幕高度要少一些。固定頁頭會(huì)占用一部分本來可以用于展示內(nèi)容的區(qū)域。小屏幕一般是高度較大，但是別忘了，屏幕本來就小，頁頭再占用一部分的話，屏幕可用于展示內(nèi)容的區(qū)域當(dāng)然還是少。
Headroom.js 能幫你把不需要的頁面元素在合適的時(shí)間展示出來，讓用戶花更多時(shí)間關(guān)注你頁面上的內(nèi)容。

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
有關(guān)懶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