Meteor是一个强大的web开发框架
废话不多说, 开始总结Meteor的开发顺序。
1. 要在一个目录下创建meteor 的project 用 meteor create <project name>
2. 要创建好目录结构(! 非常重要)
在 ~/<path to project>/ 创建 lib, client, server, public 四个目录
client目录里面的文件只会在前台运行,
server目录下的文件只会在后台运行,
lib目录下的文件会在两端运行, 而且运行的优先级高于一切文件, 所以这个目录下的js文件不能使用jquery格式(因为这里的文件在jquery prototype运行之前运行, 因此浏览器解析不了这里的代码, 会报错)
public目录下放一些图片资源, 视频资源之类的
然后要创建子目录
我一般在client目录下创建以下目录
templates: 放所有的html文件以及相关的js
stylesheets: 放所有的css文件
main.html和main.js (注意: main.*的所有文件的优先级是最低的, 所以这两个文件是程序运行的最后才运行的)
3. 要加载一些常用的meteor包
例如: iron:router accounts-password underscore 还有 [ materialize:materialize ] 和 [ twbs: bootstrap ] 二者只能选1 (你如果真的了解他俩可以同时加载两个)
加载命令是 : meteor add <package>
4. 开始写一些基础的公用html和 router
首先是 layout : 在上面提到的templates目录下创建 includes目录(为了方便管理) ,里面创建 layout.html
一般网页是按照 <header> <main> <footer>来分的, 但是 <header> <footer> 一般是固定的, 所以我们经常改动的只是 <main> , layout解决的就是这个问题
下面是一个layout的例子
<template name="layout">
{{> header}}
<main>
{{> yield}}
</main>
{{> footer}}
</template>
然后在 lib目录里面创建一个 router.js文件
里面内容如下
Router.configure({
layoutTemplate: 'layout'
});
Router.route('/', {name: 'home'});
Router.route('/test', {name: 'test'});
下面Router路由了两个路径, '/' 和 '/test' 这时候并不是整个页面在变幻, 而是 layout.html里面的 {{> yield}} 变成 '{{> home}}' 和 {{> test}} 而已
还有两个公用的html, 分别是 loading.html 和 notFound.html
我们在 templates/includes/ 目录下面创建它们并写好后, 可以在 router.js中方便的使用
Router.configure({
layoutTemplate: 'layout',
loadingTemplate: 'loading',
notFoundTemplate: 'notFound'
});
loadingTemplate 就是在页面进行加载的时候 render的页面,
notFoundTemplate 就是找不到对应的url的处理函数的时候 render的页面。