zoukankan      html  css  js  c++  java
  • meteor简单示例文件组织及代码分析

    上一节我创建了一个叫MyFirstTest的应用,并成功运行,打开MyFirstTest文件夹,会发现他的文件组织结构是这样的:

    文件有两个,分别是package.json、.gitignore

    文件夹有4个分别是 .meteor、client、server和node_modules(特别是这个,对他印象深刻)

    一、文件

    1、首先看pakage.json,内容如下

    {
      "name": "MyFirstTest",
      "private": true,
      "scripts": {
        "start": "meteor run"
      },
      "dependencies": {
        "meteor-node-stubs": "~0.2.0",
        "babel-runtime": "6.18.0"
      }
    }

    原来就是项目的配置文件,包括了项目信息和项目依赖信息,两个依赖meteor-node-stubs和babel-runtime都在node_modules文件夹下,难怪我们刚才编译不过去。知其然,又知其所以然,善!

    2、.gitignore文件,内容更简单,就一行

    node_modules/

    这个是就是git软件要忽略的文件列表,如果要忽略某些文件,,在Git工作区的根目录下创建一个特殊的.gitignore文件,然后把要忽略的文件名填进去,Git就会自动忽略这些文件,这里是忽略node_module文件夹

    二、文件夹

    1、 .meteor是meteor隐藏文件夹,不要动。node_modules是项目依赖文件夹,现在应该还用不着动他,知道他是干什么的就行了。这两个文件先不管他了。

    2、server:

    这个是服务端文件存放的位置,该文件夹下文件只会在服务端运行,目前下面只有一个mian.js文件,并且只有一行代码,也先pass吧。

    3、client:

    这里存放的客户端运行文件,该文件夹下文件只会在客户端运行,里面的文件稍后详细分析

    4、其他文件夹

    据说还有public、lib等文件夹,lib下面一般存放路由和数据库操作,除client和server文件夹外,其余文件夹的文件在服务端和客户端都运行。

    三、client文件下文件分析

    main.css,就不说了。

    main.html:

     1 <head>
     2   <title>MyFirstTest</title>
     3 </head>
     4 
     5 <body>
     6   <h1>Welcome to Meteor!</h1>
     7 
     8   {{> hello}}
     9   {{> info}}
    10 </body>
    11 
    12 <template name="hello">
    13   <button>Click Me</button>
    14   <p>You've pressed the button {{counter}} times.</p>
    15 </template>
    16 
    17 <template name="info">
    18   <h2>Learn Meteor!</h2>
    19   <ul>
    20     <li><a href="https://www.meteor.com/try" target="_blank">Do the Tutorial</a></li>
    21     <li><a href="http://guide.meteor.com" target="_blank">Follow the Guide</a></li>
    22     <li><a href="https://docs.meteor.com" target="_blank">Read the Docs</a></li>
    23     <li><a href="https://forums.meteor.com" target="_blank">Discussions</a></li>
    24   </ul>
    25 </template>
    View Code

    注意:html代码中不能有<html></html>标签,该标签,meteor自动补全,如果有的话,编译汇报错。从其他网页模板复制时,一定要注意。

    {{> hello}}
    {{> info}}

    这两个分别是hello模板和info模板的插入点,就是说,hello模板中的内容会替换{{> hello}},info模板中的内容会替换{{> info}}。

    这两个模板就在body标签的下面,打开网页后,就会发现网页内容就是这两个模板的内容。

    至于hello模板下的{{counter}} ,他在main.js文件里,以后再说。

    模版代码,可以在main.html文件里,也可以是单独的模板文件,这个也以后再说。

  • 相关阅读:
    Linux常用命令学习2---(文件搜索命令locate find、命令搜索命令whereis which、字符串搜索命令grep、帮助命令man)
    LeetCode Perfect Squares
    华为笔试 数字转中文拼音
    二位数组 顺时针打印矩阵
    LeetCode Interleaving String
    LeetCode Coins in a Line
    LeetCode Backpack
    LeetCode Unique Paths
    LeetCode Minimum Path Sum
    腾讯模拟笔试题
  • 原文地址:https://www.cnblogs.com/wonderhow2/p/6340302.html
Copyright © 2011-2022 走看看