meteor 学习-- #二 开始使用Meteor

准备

安装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;
}