fusionjs 学习一 基本试用
参考demo 项目 https://github.com/rongfengliang/fusionjs-docker-demo
安装
- create startkit
yarn global add create-fusion-app
创建基本项目
- 使用create
yarn create fusion-app appdemo
- 运行(开发模式)
yarn dev
- 效果
- 运行(生产模式)
服务器端渲染的代码
构建(生产)
- 构建
yarn build --production
脚手架代码说明
- main.js
插件注册
// @flow
import App from 'fusion-react';
import Router from 'fusion-plugin-react-router';
import Styletron from 'fusion-plugin-styletron-react';
import root from './root.js';
export default () => {
const app = new App(root);
app.register(Styletron);
app.register(Router);
return app;
};
- root.js
react app 拼装
// @flow
import React from 'react';
import {Route, Switch} from 'fusion-plugin-react-router';
import Home from './pages/home.js';
import PageNotFound from './pages/pageNotFound.js';
const root = (
<Switch>
<Route exact path="/" component={Home} />
<Route component={PageNotFound} />
</Switch>
);
export default root;
- home 组件
集成 styletron
// @flow
import React from 'react';
import {styled} from 'fusion-plugin-styletron-react';
const Center = styled('div', {
fontFamily: 'HelveticaNeue-Light, Arial',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
height: '100%',
});
const FusionStyle = styled('div', {
fontSize: '80px',
color: 'rgba(0,0,0,.8)',
paddingRight: '30px',
display: 'flex',
});
const FullHeightDiv = styled('div', {
height: '100%',
backgroundColor: '#FFFFFF',
});
const Circle = styled('div', {
height: '180px',
width: '180px',
marginTop: '20px',
backgroundColor: 'white',
':hover': {backgroundColor: '#f0f8fa'},
border: '10px solid #4db5d9',
borderRadius: '50%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
});
const GettingStartedLink = styled('a', {
textDecoration: 'none',
color: '#4db5d9',
fontSize: '18px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
textAlign: 'center',
height: '100%',
});
const Home = () => (
<FullHeightDiv>
<style>
{`
html,body,#root{height:100%;}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
body{margin:0;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
`}
</style>
<Center>
<FusionStyle>Fusion.js</FusionStyle>
<Center>
<Circle>
<GettingStartedLink href="https://fusionjs.com/docs/getting-started">
Let's Get Started
</GettingStartedLink>
</Circle>
</Center>
</Center>
</FullHeightDiv>
);
export default Home;
说明
类似的框架有gastby nextjs nuxtjs ,从目前看来fusionjs 功能设计挺不错的,而且官方的文档也挺丰富
参考资料
https://github.com/rtsao/styletron
https://fusionjs.com/docs/getting-started/run-your-project
https://github.com/rongfengliang/fusionjs-docker-demo
fusionjs 学习一 基本试用的更多相关文章
- space-cloud 学习一 基本试用
space-cloud 是一个支持多数据库,以下是一个简单的基于官方文档的试用 使用docker-compose 运行 环境准备 下载docker-compose文件 wget https://raw ...
- EasyARM i.mx28学习笔记——开箱试用总结
0 前言 本月初(2014年8月)购买了周立功的EasyARM开发板,主控为EasyARM i.mx287.出于下面几个理由购买了该开发板. [1]主要原因,有人约我一起学习一起使用该 ...
- fusionjs 学习二 核心概念
核心概念 middleware 类似express 的中间件模型(实际上是构建在koa中间件模型上的),但是和koa 的中间件有差异 fusionjs 的中间件同时可以运行在浏览器页面加载的时候 se ...
- restql 学习一 安装试用
restql 提供了manager 可以方便配置restql 的资源,同时也提供了一个docker-compose 运行环境 以下是一个安装使用 环境准备 docker-compose 文件 ve ...
- Mongodb初学习--安装、试用
MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. 在MongoDB中数据被分组存储在数据集中,被称为一个集合(Collection ...
- QLoo graphql engine 学习二 基本试用(kubernetes)
已经测试过docker&& docker-compose 的运行模式,下面测试下kubernetes的运行模式 kubernetes 我使用docker for mac qloo 安装 ...
- QLoo graphql engine 学习一 基本试用(docker&&docker-compose)
说明:使用docker-compose 进行安装 代码框架 使用命令行工具创建 qlooctl install docker qloo-docker 运行qloo&&gloo 启动 ...
- ambassador 学习一基本试用
安装使用docker for mac Without RBAC 安装ambassador 安装 kubectl apply -f https://getambassador.io/yaml/ambas ...
- deno学习一 安装试用&&几个问题解决
基本的依赖可以参考github 我的环境是centos 7 基本安装 需要golang 以及yarn安装 Protobuf 3 这是官方的方式,实际可以变通下 cd ~ wget https:// ...
随机推荐
- kafka环境安装
源码包下载: http://archive.apache.org/dist/kafka/1.0.0/ 集群环境: master 192.168.1.99 slave1 192.168.1.100 sl ...
- JavaScript中常用的事件
.onclick事件 点击事件(onclick并不是js中的方法,onclick只是浏览器提供js的一个dom接口,让js可以操作dom,所以onclick大小写都是没问题的,比如HTML代码就不用区 ...
- mssql查询所有上下级
if exists (select * from sys.all_objects where name='GetOrgTreeByID') begin drop proc GetOrgTreeByID ...
- Python3.x的BeautifulSoup解析html常用函数
Python3.x的BeautifulSoup解析html常用函数 1,初始化: soup = BeautifulSoup(html) # html为html源代码字符串,type(html) == ...
- Duilib嵌入CEF禁止浏览器响应拖拽事件
转载:http://blog.csdn.net/liuyan20092009/article/details/53819473 转载:https://blog.csdn.net/u012778714( ...
- Git WorkBehavior
https://tortoisegit.org/docs/tortoisegit/tgit-dug-showlog.html Repository Demo https://github.com/Ch ...
- DataSet 和 DataTable 以及 DataRow
向DataSet中添加DataTable 会提示datatable已属于另一个dataset 本来的想法是每次都new一个DataTable,但是还是会报错 百度了一下,发现可以调用DataTable ...
- Flyweight(享元)
意图: 运用共享技术有效地支持大量细粒度的对象. 适用性: 一个应用程序使用了大量的对象. 完全由于使用大量的对象,造成很大的存储开销. 对象的大多数状态都可变为外部状态. 如果删除对象的外部状态,那 ...
- Rails 5 Test Prescriptions 第5章 Testing Models
Rails,model层包含业务逻辑和储存逻辑.其中储存逻辑被ActiveRecord处理. 在model中,不是每件事都必须是ActiveRecord对象.model layer可以包含各种服务,对 ...
- BooStrap4文档摘录 2 Content, Component
Content Reboot:从新写了主要元素的排列. 本章讲了各种元素及其相关的类. ⚠️ 文档左上角有搜索栏. Components Alert✅ Badge✅ Button✅和Button gr ...