---
title: 開始
slug: getting-started
date: 0002/01/01
number: 2
points: 1
contents: 安裝 Meteor|學習 Meteor 包的五種類型|建立 Meteor 應用的文件結構
paragraphs: 49
---
第一印象十分重要，安裝 Meteor 并不會遇到什么困難。大多數情況下，在五分鐘內便可以完成。
首先，如果在 Mac OS 或 Linux 系統下，你可以打開終端窗口，輸入以下命令來安裝 Meteor：
~~~bash
$ curl https://install.meteor.com | sh
~~~
如果你使用 Windows 系統，請參考 Meteor 網站的 [安裝指導](https://www.meteor.com/install)。
以上命令會在系統中安裝 `meteor` 可執行文件，然后就可以使用 Meteor 了。
<% note do %>
### 選擇**不安裝** Meteor
如果你不能或者不想在本地安裝 Meteor，我們推薦你使用 [Nitrous.io](http://nitrous.io)。
使用 Nitrous.io 讓你可以在覽器中直接編輯代碼并運行程序。我們撰寫了[一篇簡短的指南](https://www.discovermeteor.com/blog/meteor-nitrous/)，介紹如何使用 Nitrous.io。
你可以閱讀那篇指南一直到“Installing Meteor”的部分，然后再回到本章，從“創建簡單的應用”一節開始閱讀。
<% end %>
### 創建簡單的應用
安裝好 Meteor 之后，我們來創建一個應用。創建應用要使用 Meteor 的命令行工具 `meteor`：
~~~bash
$ meteor create microscope
~~~
上述命令會下載一些代碼包，然后新建一個基本可用的 Meteor 項目。命令執行完成后，我們會看到新建了一個文件夾，名為 `microscope/`，包含以下文件：
~~~bash
.meteor
microscope.css
microscope.html
microscope.js
~~~
Meteor 生成的應用只是一個簡單的骨架，用來演示一些簡單的模式。
雖然這個應用沒什么功能，但也能運行。要運行應用，請切換到終端，輸入下面的命令：
~~~bash
$ cd microscope
$ meteor
~~~
現在打開瀏覽器，訪問 `http://localhost:3000`（或者等效的 `http://0.0.0.0:3000`），應該能看到下面的網頁：
<%= screenshot "2-1", "Meteor 的 Hello World 網頁" %>
<%= commit "2-1", "創建 Microscope 項目的基礎文件" %>
恭喜！你的第一個 Meteor 應用順利運行了。順便說一下，如果想停止運行程序，只要切換到對應的終端窗口按 `ctrl+c` 鍵即可。
如果你使用 Git，現在可以用 `git init` 來初始化你的項目倉庫了。
<% note do %>
### 再見 Meteorite
曾經有段時間，Meteor 依賴于外部代碼包管理器 Meteorite。自從 Meteor 0.9.0 版本以后，就不再需要 Meteorite 了，因為它的功能已經融入 Meteor 之中。
所以，如果你在這本書或在瀏覽 Meteor 相關的資料時，遇到 Meteorite 的 `mrt` 命令行工具，你可以放心地用 `meteor` 來替換它。
<% end %>
### 添加代碼包
下面我們使用 Meteor 的 package 系統在項目中引入 [Bootstrap](http://getbootstrap.com/) 框架。
這與通常手動添加 Bootstrap 的 CSS 和 Javascript 文件的方法是沒有區別的，只不過我們依賴代碼包維護者來為我們更新這些文件。
既然說到這里，我們也來添加 [Underscore](http://underscorejs.org/) 代碼包。 Underscore 是一個 JavaScript 工具庫，對于操縱 JavaScript 數據結構非常有用。
`bootstrap` 代碼包由 `twbs` 用戶維護，所以該代碼包的全名為 `twbs:bootstrap`。
另一方面，`underscore` 代碼包依然算作是 Meteor “官方”的代碼包，所以這個包沒有作者：
~~~bash
meteor add twbs:bootstrap
meteor add underscore
~~~
請注意，現在我們添加了 Bootstrap **3**。而這本書中的一些截圖是老版本的 Microscope 使用 Bootstrap **2** 時截取的，所以它們看起來會稍微不同。
<%= commit "2-2", "添加 bootstrap 和 underscore 代碼包" %>
一旦你添加了 Bootstrap 代碼包，應該會注意到應用的變化：
<%= screenshot "2-1b", "添加了 Bootstrap." %>
與“傳統”方式添加外部資源不同，我們還沒有鏈接任何 CSS 或 JavaScript 文件，因為 Meteor 已經幫我們搞定了！這就是 Meteor 代碼包的眾多優勢之一。
<% note do %>
### 關于代碼包
Meteor 中的代碼包有點特殊，分為五種：
- Meteor 核心代碼本身分成多個**核心代碼包**（core package），每個 Meteor 應用中都包含，你基本上不需要花費精力去維護它們。
- 常規 Meteor 代碼包稱為“**isopack**”，或同構代碼包（isomorphic package，意味著它們既能在客戶端也能在服務器端工作）。**第一類代碼包**例如 `accounts-ui` 或 `appcache` 由 Meteor 核心團隊維護，與 Meteor [捆綁](http://docs.meteor.com/#packages)在一起。
- **第三方代碼包**就是其他用戶開發的上傳到 Meteor 的代碼包服務器上的常規代碼包。你可以訪問 [Atmosphere](http://atmosphere.meteor.com) 或運行 `meteor search` 命令來瀏覽這些代碼包。
- **本地代碼包**（local package）是自己開發的代碼包，保存在 `/packages` 文件夾中。
- **NPM 代碼包**（NPM package）是 Node.js 的代碼包，雖不能直接用于 Meteor，但可以在上述幾種代碼包中使用。
<% end %>
### Meteor 應用的文件結構
開始編寫代碼之前，我們必須要正確地設置項目。為了保證項目整潔，請打開 `microscope` 文件夾，刪除 `microscope.html`、`microscope.js` 和 `microscope.css`。
請在 `microscope` 目錄中新建四個子目錄：`/client`，`/server`，`/public` 和 `/lib`。然后在 `/client` 目錄中新建兩個空文件：`main.html` 和 `main.js`。如果程序無法運行，先別擔心，從下一章開始我們會編寫代碼。
值得一提的是，上述目錄中有一些擁有特別的作用。關于文件， Meteor 有以下幾條規則：
- 在 `/server` 目錄中的代碼只會在服務器端運行。
- 在 `/client` 目錄中的代碼只會在客戶端運行。
- 其它代碼則將同時運行于服務器端和客戶端上。
- 請將所有的靜態文件（字體，圖片等）放置在 `/public` 目錄中。
知道 Meteor 以什么順序加載文件也很有用：
- 在 `/lib` 目錄中的文件將被優先載入。
- 所有以 `main.*` 命名的文件將在其他文件載入后載入。
- 其他文件以文件名的字母順序載入。
需要注意的是，即便 Meteor 包含上述規則，這并不意味著它強制你為 Meteor 應用采用任何預設的文件結構。上述結構只是我們的建議，并不是一成不變的。
如果你想對此了解更多，我們強烈建議你參閱 [Meteor 官方文檔](http://docs.meteor.com/#structuringyourapp)。
<% note do %>
### Meteor 采用 MVC 架構嗎？
如果你之前有過在其它諸如 Ruby on Rails 框架下開發的經歷，此時你心中可能會有這樣的疑問， Meteor 采用 MVC（Model View Controller）架構嗎？
簡短的回答是，不。與 Rails 不同，Meteor 并不為應用強加任何預設的架構。因此本書將直接給出我們認為最合理的代碼，而不對任何現有架構作過多考慮。
<% end %>
### 不需要 public 目錄？
好吧，我們承認在之前小小地忽悠了大家一下。其實我們并不需要為我們的應用建立一個 `public/` 目錄，因為 Microscope 并不需要使用任何的靜態文件。但是值得注意的是，大多數 Meteor 應用都會或多或少使用一些圖片，因此我們覺得 `public/` 目錄還是有必要的。
另外，你可能注意到了一個隱藏的 `.meteor` 目錄。這是 Meteor 存儲內部代碼的地方，嘗試更改里面的內容并不是什么好主意。事實上，你根本不需要關心其中的內容。有兩個例外是 `.meteor/packages` 文件和 `.meteor/release` 文件。它們分別列出了你安裝的所有智能代碼包和你使用的 Meteor 版本。當你為應用添加代碼包或更改 Meteor 版本時，查看這兩個文件的變更可能會為你帶來一些幫助。
<% note do %>
### 下劃線命名法 vs 駝峰命名法
對于歷史悠久的下劃線命名法（`my_variable`）和駝峰命名法（`myVariable`）我們認為選擇哪種并不重要，只要你堅持在項目中保持一致。
在本書中，我們將采用駝峰命名法，因為它是 JavaScript 中的慣例（畢竟它叫 JavaScript 而不是 java_script 呀！）。
對此唯一的例外是，對文件的命名，我們將采用下劃線命名法（`my_file.js`）。對于 CSS 類，我們將使用連字號（`.my-class`）。這樣做的原因是在文件系統中，下劃線命名法最常見，而 CSS 語法本身就使用連字號作為連接（比如 `font-family`，`text-align`等）。
<% end %>
### 搞定 CSS
本書并不重點講 CSS 。所以為了避免在 CSS 細節上花費過多時間，我們決定在本書一開始就為大家提供完整的 CSS 文件。因此你不必再擔心這個問題。
CSS 文件將被 Meteor 自動加載并簡化。因此，不同于其它的靜態文件都被放置于 `/public` 目錄，請將 CSS 文件放入 `/client` 目錄。請創建一個 `client/stylesheets/` 目錄并將以下 `style.css` 文件放置其中。
~~~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;
}
~~~
<%= caption "client/stylesheets/style.css" %>
<%= commit "2-3","重新整理文件結構" %>
<% note do %>
### CoffeeScript 說明
在本書中我們將使用純 JavaScript。但是如果你更傾向于使用 CoffeeScript，Meteor 可以幫助你做到這點。你只需添加 CoffeeScript 代碼包，之后便可以在項目中使用 CoffeeScript 了！
`meteor add coffeescript`
<% end %>
