本示例记录一个开发过程：

1）参考 Meteor React TUTORIAL教程 https://www.meteor.com/tutorials/react/creating-an-app

2）。。。

----------------------------

第一部分  创建脚手架项目

1、在win10，安装 Meteor 1.4.2；

2、进入命令（CMD）提示符，创建目录 x:\zeng，在此目录下创建空项目，使用 meteor create eccom 创建一个 ”eccom“项目；

项目中有一个基础结构开内容：

三个目录 1）client   含： client/main.js ，client/main.html ，client/main.css

2) server  含： server/main.js

3) .meteor  （meteor 项目的配置目录）

4）package.json 文件，整个项目的基础信息与包配置。

5）.gitignore 文件

3、进入  x:\zeng\eccom 目录，执行命令 meteor  即 meteor run ；

（如果是高版本，可以是 ”meteor run --release 1.4.2“ 指定特定版本号）

4、成功运行，可以在浏览器中查看结果。   http://localhost:3000

第二部分：开发客户端，主要在 \client 目录

1、 删除 blaze 模版，增加静态html 包： meteor 默认使用 blaze 模版，产生页面。

      meteor remove blaze-html-templates
      meteor add static-html

2、安装 react 相关组件（react  react-dom react-router） ，会产生一个 \node_modules 目录，npm 安装的Node包（及依赖包pkg）放在此处。（不是 meteor 的专用包。专用包记录在 \.meteor\package.json 文件中）

meteor npm install --save  react  react-dom react-router

  安装数据传输组件Apollo：  
     meteor npm install --save  apollo-client react-apollo
   安装两个UI组件库：react-bootstrap，（http://react-bootstrap.github.io/），及 @sketchpixy/rubix
                       antd （https://ant.design/）
     meteor npm install --save  react-bootstrap 
     meteor npm install --save  @sketchpixy/rubix  从 react-bootstrap 扩展而来
     meteor npm install --save  antd 

   安装一个：meteor npm install --save indexof

3、修改  client/main.html 代码如下：

<head>

<title>hopesun</title>
</head>

<body>
      <div id="app"></div>
</body>

4、增加一个 \client\App.jsx

增加 \client\Portal\Header.jsx,  \client\Portal\Footer.jsx,  \client\Portal\Siderbar.jsx

示例开发过程记录：meteor,react,apollo的更多相关文章

  1. Vulcan 基于Meteor的APollO框架 ， grapesjs 用于可视化生成Html 页面

    Vulcan 基于Meteor的APollO框架 :http://vulcanjs.org/ grapesjs 用于可视化生成Html    http://grapesjs.com/

  2. grandstack 基于graphql&&react&& apollo&& neo4j 的全栈开发工具

    grandstack是一个基于graphql&&react&& apollo&& neo4j 的全栈开发工具. 有篇关于graphql 的5个常见问题的 ...

  3. 望岳物业App开发过程记录

    望岳物业APP开发过程记录 ——杜冰青 1.小组讨论,决定模块功能. 2.开始做“社区活动”界面,完成主页面.分享界面.内容界面,但是分享功能暂时没有完成. 3.接着做“一键开门”界面,因为硬件设施跟 ...

  4. GraphQL + React Apollo + React Hook + Express + Mongodb 大型前后端分离项目实战之后端（19 个视频）

    GraphQL + React Apollo + React Hook + Express + Mongodb 大型前后端分离项目实战之后端(19 个视频) GraphQL + React Apoll ...

  5. GraphQL + React Apollo + React Hook 大型项目实战（32 个视频）

    GraphQL + React Apollo + React Hook 大型项目实战(32 个视频) GraphQL + React Apollo + React Hook 大型项目实战 #1 介绍「 ...

  6. [GraphQL] Fetch Server Data and Client-side State in One Query using React Apollo + GraphQL

    In this lesson we look at how the Apollo @client directive can be used to fetch client-side state al ...

  7. 基于Eclipse的Android JNI层測试应用开发过程记录

    前言 本文记录一个Java层与JNI层參数与数据交互的应用程序开发过程.为实现一个功能完整的带Java与JNI的应用程序打下基础. 本文如果读者已搭建好Android的Eclipse与NDK开发环境, ...

  8. webWMS开发过程记录（一）- 软件开发的流程

    前言:计划开发一个webWMS,并将开发过程比较完整的记录下来.希望可以完成这个目标 软件开发的流程: 1. 了解该项目的相关概念. 了解所要开发的软件属于什么产品.该产品的基本定义是什么?基本功能模 ...

  9. R包开发过程记录

    目的 走一遍R包开发过程,并发布到Github上使用. 步骤 1. 创建R包框架 Rsutdio --> File--> New Project--> New Directory - ...

随机推荐

  1. iframe多层嵌套时获取元素总结

    父页面获取子页面元素: 注意:onload事件 jQuery获取: $("iframe").contents().find("holder")......; ( ...

  2. SQL数据库分配权限

    打开SQL-Server管理工具->安全性->登陆名->右键(新建登陆名) 输入相应的信息(这里要去掉强制实施密码策略,强制密码过期,否则用户在下次登录时必须修改密码) 用户映射-& ...

  3. CentOS 6.5安装在VMWare中Bridge模式下网卡eth0不能自动激活的问题

    VMWare 12.5.2 CentOS 6.5 basic VMWare网卡配置选择Bridge方式 问题: 默认情况下ifconfig命令只能看到网络设备lo,看不到eth0,也没有分配合理的IP ...

  4. bzoj2086【Poi2010】Blocks

    因为long long还有PE的事WA了一下午TAT 考虑一段可行区间的平均值肯定>=k 也就是说将每个数减去k以后,一段可行区间的和非负,求一段最长区间. 一段区间的和肯定是两个前缀和的差 先 ...

  5. java String 中用"+"拼接字符串的原理

    之前看<thinkinjava>时记得书上分析国这个问题,然后面试的时候问道了,结果面试官说时的很含糊说是new了一个对象,我说底层用的Stringbuild.他还是说我说错了.谨以此文的 ...

  6. IIS如何配置可以下载APK、IPA文件

    解决步骤: 1).打开IIS服务管理器,找到服务器,右键-属性,打开IIS服务属性: 2.单击MIME类型下的“MIME类型”按钮,打开MIME类型设置窗口: 3).单击“新建”,建立新的MIME类型 ...

  7. 放下恩怨，曝小米中兴投关键性一票让华为顺利取得5G短码控制权

    如果说最近国内科技公司最牛逼最令人振奋的新闻是啥,显然,就是两天前在3GPP RAN1 87次会议的5G短码方案讨论中,华为顺利碾压高通,战胜列强,拿下了5G的控制编码方案的标准. 虽然说,目前,华为 ...

  8. sublime text 3 3114 注册码

    -– BEGIN LICENSE -– Michael Barnes Single User License EA7E-821385 8A353C41 872A0D5C DF9B2950 AFF6F6 ...

  9. Web Service 中返回DataSet结果大小改进

    http://www.cnblogs.com/scottckt/archive/2012/11/10/2764496.html Web Service 中返回DataSet结果方法: 1)直接返回Da ...

  10. wcf第4步之原生调用简单封装

    public interface IDemoServiceChannel : IDemoService, System.ServiceModel.IClientChannel { } public p ...