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

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. gradle项目中如何支持java与scala混合使用?

    之前写过一篇maven项目中java与scala如何混用,今天来看看gradle项目中如何达到同样的效果: 一.目录结构 基本上跟maven一样,tips:这一堆目录结构不用死记,后面会讲如何用gra ...

  2. jS字符串大小写转换实现方式

    toLocaleUpperCase 方法:将字符转换为大写 stringVar.tolocaleUpperCase( ) 必选的 stringVar 引用是一个 String 对象,值或文字. //转 ...

  3. ceph rgw s3 java sdk 上传大文件分批的方法

    Using the AWS Java SDK for Multipart Upload (High-Level API) Topics Upload a File Abort Multipart Up ...

  4. android 动画

    public void onClicked(View v_) { //wa.startAnimation(); // TextView tv = (TextView)findViewById(R.id ...

  5. 解决：error: .repo/manifests/: contains uncommitted changes

    repo sync同步时提示出错:          error: .repo/manifests/: contains uncommitted changes 解决方法: 1.cd 进入.repo/ ...

  6. 解决：Linux版百度云客户端 BCloud网络错误 问题

    国内很多云盘渐渐停止服务支持,如新浪.华为.115.360等... 强大的百度云,你会继续免费让大家使用吗? 今天在Linux上使用了liulang的BCloud百度云客户端,登陆之后不显示主页,什么 ...

  7. Android网络文件下载模块整理

    一.知识基础 tomcat服务器配置 理解http协议 理解javaIO操作相关知识 SDcard操作知识 Android 权限配置 二.实现步骤 1.从网上获取资源 public String do ...

  8. ASP.NET MVC中viewData、viewBag和templateData的使用与区别

    一:类型比较 1.1)ViewBag是动态类型(dynamic). 1.2)ViewData是一个字典型的(Dictionary)-->ViewDataDictionary. 1.3)TempD ...

  9. 入手了[云梯的VPN]--水文

    之前写的文章 http://www.cnblogs.com/rollenholt/p/3783084.html 结果很多朋友都说访问不了了,现在重新发一下: 各位看官,这是一篇水文: 在用了一段时间s ...

  10. Traditional Language Model

    Traditional Language Model通常用于回答下述问题: How likely is a string of English words good English ? \(p_{LM ...