准备
安装Meteor后,就可以方便的使用Meteor开发了
在WebStorm中,建立一个工程 MeteorFactory
,在工程中,使用命令来创建一个 Meteor module
然后使用命令
cd startmeteor
meteor
来启动meteor项目,这样在浏览器中输入 http://localhost:3000/ 后,看到界面
即为成功,使用 ctrl+c
来停止这个项目
添加代码包
使用 mrt 工具或者 meteor add 命令来增加依赖包
meteor add underscore
meteor add twbs:bootstrap
这里说明一下,如果没有在 : 前加入名称的说明这个包是官方的包,如果有作者名称,则为三方维护包
这里我使用命令
meteor add bootstrap
来添加 bootstrap 包,本文写作时,添加的bootstrap为 1.0.1 版本
再运行 bootstrap 时,界面发生变化
因为这是meteor 所以大量工作已经完成,直接使用bootstrap的结果
关于Meteor package
meteor 核心代码本身又很多包 (core package) 这个是由meteor 维护的,不需要应用开发者来维护
常规的Meteor的包称为
isopack
,或者构造代码包isomorphic package
(这种包既能在客户端工作,也可以在服务端工作), 第一类代码包,如accounts-ui
或者appcache
由 meteor 核心团队维护,一般在meteor中捆绑三方代码包,由三方开发,就是其他用户开发,并上传到meteor包服务器上。
你可以使用 meteor search
命令在浏览这些包
本地代码包就是自己的开发包,保存在 /packages 目录中。
npm 代码包,是node.js 的代码包,不能直接用于meteor,可以在上面的常规包,三方包,本地包中使用
Meteor 的文件结构
删除生成的 startmeteor.css startmeteor.js startmeteor.css 文件
然后建立文件夹 /client
/server
/public
/lib
然后在 /client
中建立两个空文件 main.html
和 main.js
当然这样做会导致Meteor项目没用任何可以运行的东西,没关系,先搞清楚Meteor的结构再继续Meteor之旅
Meteor 文件结构规则
在
/server
中文件夹只会在服务端运行在
/client
中代码只会在客户端运行所有静态文件放在
/public
文件夹中
meteor 加载文件步奏
在
/lib
中的文件优先加载所有以 main.* 命名的都在其他文件载入后载入
其他文件以字母顺序载入
自定义结构
基本结构可以做出变动,可以参阅 meteor官方文档
Meteor 是否使用MVC框架,不用太多考虑MVC,meteor不强制使用MVC
Public 文件夹的充要性
/public
文件夹本来是不必要的,多数情况下,meteor的应用是需要用到静态资源的,所以是需要public文件夹
智能代码包
.meteor/packages
和 .meteor/release
文件夹会列出你的智能代码何使用meteor版本,可以通过查看者两个智能代码包来分析问题。
搞定 CSS
使用meteor时,避免在CSS上花费太多,而且meteor在加载CSS时做了简化,所以将CSS文件放入 /client
文件夹下,并且请创建一个 client/stylesheets
文件夹并将 style.css
文件放入。
范例style.css
.grid-block, .main, .post, .comments li, .comment-form {
background: #fff;
border-radius: 3px;
padding: 10px;
margin-bottom: 10px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); }
body {
background: #eee;
color: #666666; }
#main {
position: relative;
}
.page {
position: absolute;
top: 0px;
width: 100%;
}
.navbar {
margin-bottom: 10px; }
/* line 32, ../sass/style.scss */
.navbar .navbar-inner {
border-radius: 0px 0px 3px 3px; }
#spinner {
height: 300px; }
.post {
/* For modern browsers */
/* For IE 6/7 (trigger hasLayout) */
*zoom: 1;
position: relative;
opacity: 1; }
.post:before, .post:after {
content: "";
display: table; }
.post:after {
clear: both; }
.post.invisible {
opacity: 0; }
.post.instant {
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none; }
.post.animate{
-webkit-transition: all 300ms 0ms;
-moz-transition: all 300ms 0ms ease-in;
-o-transition: all 300ms 0ms ease-in;
transition: all 300ms 0ms ease-in; }
.post .upvote {
display: block;
margin: 7px 12px 0 0;
float: left; }
.post .post-content {
float: left; }
.post .post-content h3 {
margin: 0;
line-height: 1.4;
font-size: 18px; }
.post .post-content h3 a {
display: inline-block;
margin-right: 5px; }
.post .post-content h3 span {
font-weight: normal;
font-size: 14px;
display: inline-block;
color: #aaaaaa; }
.post .post-content p {
margin: 0; }
.post .discuss {
display: block;
float: right;
margin-top: 7px; }
.comments {
list-style-type: none;
margin: 0; }
.comments li h4 {
font-size: 16px;
margin: 0; }
.comments li h4 .date {
font-size: 12px;
font-weight: normal; }
.comments li h4 a {
font-size: 12px; }
.comments li p:last-child {
margin-bottom: 0; }
.dropdown-menu span {
display: block;
padding: 3px 20px;
clear: both;
line-height: 20px;
color: #bbb;
white-space: nowrap; }
.load-more {
display: block;
border-radius: 3px;
background: rgba(0, 0, 0, 0.05);
text-align: center;
height: 60px;
line-height: 60px;
margin-bottom: 10px; }
.load-more:hover {
text-decoration: none;
background: rgba(0, 0, 0, 0.1); }
.posts .spinner-container{
position: relative;
height: 100px;
}
.jumbotron{
text-align: center;
}
.jumbotron h2{
font-size: 60px;
font-weight: 100;
}
@-webkit-keyframes fadeOut {
0% {opacity: 0;}
10% {opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0;}
}
@keyframes fadeOut {
0% {opacity: 0;}
10% {opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0;}
}
.errors{
position: fixed;
z-index: 10000;
padding: 10px;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
pointer-events: none;
}
.alert {
animation: fadeOut 2700ms ease-in 0s 1 forwards;
-webkit-animation: fadeOut 2700ms ease-in 0s 1 forwards;
-moz-animation: fadeOut 2700ms ease-in 0s 1 forwards;
width: 250px;
float: right;
clear: both;
margin-bottom: 5px;
pointer-events: auto;
}