示例开发过程记录：meteor,react,apollo
本示例记录一个开发过程：
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的更多相关文章
- Vulcan 基于Meteor的APollO框架 ， grapesjs 用于可视化生成Html 页面
Vulcan 基于Meteor的APollO框架 :http://vulcanjs.org/ grapesjs 用于可视化生成Html http://grapesjs.com/
- grandstack 基于graphql&&react&& apollo&& neo4j 的全栈开发工具
grandstack是一个基于graphql&&react&& apollo&& neo4j 的全栈开发工具. 有篇关于graphql 的5个常见问题的 ...
- 望岳物业App开发过程记录
望岳物业APP开发过程记录 ——杜冰青 1.小组讨论,决定模块功能. 2.开始做“社区活动”界面,完成主页面.分享界面.内容界面,但是分享功能暂时没有完成. 3.接着做“一键开门”界面,因为硬件设施跟 ...
- GraphQL + React Apollo + React Hook + Express + Mongodb 大型前后端分离项目实战之后端（19 个视频）
GraphQL + React Apollo + React Hook + Express + Mongodb 大型前后端分离项目实战之后端(19 个视频) GraphQL + React Apoll ...
- GraphQL + React Apollo + React Hook 大型项目实战（32 个视频）
GraphQL + React Apollo + React Hook 大型项目实战(32 个视频) GraphQL + React Apollo + React Hook 大型项目实战 #1 介绍「 ...
- [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 ...
- 基于Eclipse的Android JNI层測试应用开发过程记录
前言 本文记录一个Java层与JNI层參数与数据交互的应用程序开发过程.为实现一个功能完整的带Java与JNI的应用程序打下基础. 本文如果读者已搭建好Android的Eclipse与NDK开发环境, ...
- webWMS开发过程记录（一）- 软件开发的流程
前言:计划开发一个webWMS,并将开发过程比较完整的记录下来.希望可以完成这个目标 软件开发的流程: 1. 了解该项目的相关概念. 了解所要开发的软件属于什么产品.该产品的基本定义是什么?基本功能模 ...
- R包开发过程记录
目的 走一遍R包开发过程,并发布到Github上使用. 步骤 1. 创建R包框架 Rsutdio --> File--> New Project--> New Directory - ...
随机推荐
- 《深入理解计算机系统V2》学习指导
<深入理解计算机系统V2>学习指导 目录 图书简况 学习指导 第一章 计算机系统漫游 第二章 信息的表示和处理 第三章 程序的机器级表示 第四章 处理器体系结构 第五章 优化程序性能 第六 ...
- 【swift学习笔记】一.页面转跳的条件判断和传值
在转跳页面之前我们可能会判断一下是否有输入正确的数据,如下图所示,如果没有数据输入则弹出提示,不进行转跳. 一:页面转跳 1.第一个页面的上放上一个Label一个textfield和一个按钮 2.在第 ...
- [转]Python yield 使用浅析
您可能听说过,带有 yield 的函数在 Python 中被称之为 generator(生成器),何谓 generator ? 我们先抛开 generator,以一个常见的编程题目来展示 yield ...
- 利用CSS计数函数counter()实现计数
要实现li列表计数比较简单,直接设置list-style-type即可,但是要实现非li列表计数该怎么办呢,counter()可以轻松实现 body{counter-reset:section 0 s ...
- Java使用代理服务器
HTTP协议是基于TCP协议的,TCP协议在Java中的体现就是套接字.在了解HTTP协议的基础上,完全可以通过TCP来实现一套HTTP库,这个库可以发起网络请求和接受网络请求.只要能用URLConn ...
- python基础-文件操作
一.文件操作 打开文件时,需要指定文件路径和以何等方式打开文件,打开后,即可获取该文件句柄,日后通过此文件句柄对该文件操作. 打开文件的模式有: r ,只读模式[默认模式,文件必须存在,不存在则抛出异 ...
- BZOJ 1878: [SDOI2009]HH的项链
1878: [SDOI2009]HH的项链 Time Limit: 4 Sec Memory Limit: 64 MBSubmit: 3548 Solved: 1757[Submit][Statu ...
- javascript变量声明 及作用域
javascript变量声明提升(hoisting) http://openwares.net/js/javascript_declaration_hoisting.html 可能要FQ一下 java ...
- bzoj1835[ZJOI2010]base基站选址
据说正解是什么线段树优化DP,但是作为脑子有坑选手,我们需要5k的做法: 主席树+决策单调性..... F[m][i]表示已经放置了m个基站,第m个基站放置在第i个村庄,第i个村庄及之前的村庄的总最少 ...
- jQuery倒计时插件
倒计时jQuery插件 引言 最近又换工作了,还不错,我换工作的次数其实有点频繁,2014年7月份毕业,到现在工作已经换了3份了,工资跟刚毕业时候相比也涨了点儿,最近一次换工作我离开了深圳,来到了北京 ...