Meteor hallo Weltbeispiel
In diesem Tutorial zeigen wir Ihnen, wie Sie eine Website mit dem Framework vonMeteorerstellen.
Benutztes Werkzeug :
-
Meteor 1.2.1
-
Getestet mit Linux (Debian, Ubuntu oder Mint)
-
Getestet mit Mac OSX
1. Installieren Sie Meteor
Issuecurl https://install.meteor.com | sh, alles wird installiert und konfiguriert.
$ curl https://install.meteor.com | sh
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 6674 0 6674 0 0 4145 0 --:--:-- 0:00:01 --:--:-- 4145
Downloading Meteor distribution
######################################################################## 100.0%
Meteor 1.2.1 has been installed in your home directory (~/.meteor).
Writing a launcher script to /usr/local/bin/meteor for your convenience.
//...
Dadurch wird das ausführbare Skript vonmeteorinstalliert.
2. Meteor App erstellen
2.1 Issue meteor create {app-name} to create a Meteor app based on the default ‘click-and-count” template. In diesem Tutorial erstellen wir eine "Hallo" -App.
$ meteor create hello Created a new Meteor app in 'hello'. To run your new app: cd hello meteor //...
2.2 When it’s done, you will see a hello directory, containing the following files :
$ tree -a -L 1 hello hello |--- hello.css |--- hello.html |--- hello.js |--- .meteor
2.3 Review the generated files.
hello.js
if (Meteor.isClient) {
// counter starts at 0
Session.setDefault('counter', 0);
Template.hello.helpers({
counter: function () {
return Session.get('counter');
}
});
Template.hello.events({
'click button': function () {
// increment the counter when button is clicked
Session.set('counter', Session.get('counter') + 1);
}
});
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}
hello.css
/* CSS declarations go here */
hello.html
hello Welcome to Meteor!
{{> hello}}You've pressed the button {{counter}} times.
P.S The folder .meteor containing the current Meteor project configuration info, often times, you don’t touch this.
3. Führen Sie die Meteor App aus
Navigieren Sie zum Ausführen der Meteor-App zum Projektstammpfad und geben Siemeteor ein
$ cd hello/ $ pwd $ /home/example/hello $ meteor [[path-to/hello ]]]]] => Started proxy. => Started MongoDB. => Started your app. => App running at: http://localhost:3000/
Der Meteor wird auf Port 3000 gestartet.
4. Demo
4.1 Opens the browser and access http://localhost:3000/
4.2 In the broswer, open few tabs and access the same URL http://localhost:3000/, leaves the browser open. Bearbeiten Siehello.html, hängen Sie ein „hello world“ an das Ende der Überschrift vonh1an und speichern Sie es.
hello.html
hello Welcome to Meteor! hello world
{{> hello}}You've pressed the button {{counter}} times.
4.3 Review the browser again, changes immediately appear on all browser tabs, no need to refresh the browser or F5!
5. FAQs
5.1 How to stop the running Meteor app?
A : Bring up the terminal where the Meteor app is running, and press ctrl+c
5.2 Is there other Meteor app template?
A : meteor create --list
$ meteor create --list Available examples: clock leaderboard localmarket simple-todos simple-todos-angular simple-todos-react todos
Beispiel zum Erstellen einer Meteor-App aus der Vorlage "localmarket"
$ meteor create hello --example localmarket
5.3 How to start Meteor app on different port?
A : Uses meteor --port {port-number}
$ meteor --port 8080
Für einen Port unter 1024 benötigen Siesudo
$ meteor --port 80 Error: listen EACCES $ sudo meteor --port 80