参考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&apos;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 学习一 基本试用的更多相关文章

  1. space-cloud 学习一 基本试用

    space-cloud 是一个支持多数据库,以下是一个简单的基于官方文档的试用 使用docker-compose 运行 环境准备 下载docker-compose文件 wget https://raw ...

  2. EasyARM i.mx28学习笔记——开箱试用总结

    0 前言     本月初(2014年8月)购买了周立功的EasyARM开发板,主控为EasyARM i.mx287.出于下面几个理由购买了该开发板.     [1]主要原因,有人约我一起学习一起使用该 ...

  3. fusionjs 学习二 核心概念

    核心概念 middleware 类似express 的中间件模型(实际上是构建在koa中间件模型上的),但是和koa 的中间件有差异 fusionjs 的中间件同时可以运行在浏览器页面加载的时候 se ...

  4. restql 学习一 安装试用

    restql 提供了manager 可以方便配置restql 的资源,同时也提供了一个docker-compose 运行环境 以下是一个安装使用 环境准备 docker-compose 文件   ve ...

  5. Mongodb初学习--安装、试用

    MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. 在MongoDB中数据被分组存储在数据集中,被称为一个集合(Collection ...

  6. QLoo graphql engine 学习二 基本试用(kubernetes)

    已经测试过docker&& docker-compose 的运行模式,下面测试下kubernetes的运行模式 kubernetes 我使用docker for mac qloo 安装 ...

  7. QLoo graphql engine 学习一 基本试用(docker&&docker-compose)

      说明:使用docker-compose 进行安装 代码框架 使用命令行工具创建 qlooctl install docker qloo-docker 运行qloo&&gloo 启动 ...

  8. ambassador 学习一基本试用

    安装使用docker for mac Without RBAC 安装ambassador 安装 kubectl apply -f https://getambassador.io/yaml/ambas ...

  9. deno学习一 安装试用&&几个问题解决

      基本的依赖可以参考github 我的环境是centos 7 基本安装 需要golang 以及yarn安装 Protobuf 3 这是官方的方式,实际可以变通下 cd ~ wget https:// ...

随机推荐

  1. kafka环境安装

    源码包下载: http://archive.apache.org/dist/kafka/1.0.0/ 集群环境: master 192.168.1.99 slave1 192.168.1.100 sl ...

  2. JavaScript中常用的事件

    .onclick事件 点击事件(onclick并不是js中的方法,onclick只是浏览器提供js的一个dom接口,让js可以操作dom,所以onclick大小写都是没问题的,比如HTML代码就不用区 ...

  3. mssql查询所有上下级

    if exists (select * from sys.all_objects where name='GetOrgTreeByID') begin drop proc GetOrgTreeByID ...

  4. Python3.x的BeautifulSoup解析html常用函数

    Python3.x的BeautifulSoup解析html常用函数 1,初始化: soup = BeautifulSoup(html) # html为html源代码字符串,type(html) == ...

  5. Duilib嵌入CEF禁止浏览器响应拖拽事件

    转载:http://blog.csdn.net/liuyan20092009/article/details/53819473 转载:https://blog.csdn.net/u012778714( ...

  6. Git WorkBehavior

    https://tortoisegit.org/docs/tortoisegit/tgit-dug-showlog.html Repository Demo https://github.com/Ch ...

  7. DataSet 和 DataTable 以及 DataRow

    向DataSet中添加DataTable 会提示datatable已属于另一个dataset 本来的想法是每次都new一个DataTable,但是还是会报错 百度了一下,发现可以调用DataTable ...

  8. Flyweight(享元)

    意图: 运用共享技术有效地支持大量细粒度的对象. 适用性: 一个应用程序使用了大量的对象. 完全由于使用大量的对象,造成很大的存储开销. 对象的大多数状态都可变为外部状态. 如果删除对象的外部状态,那 ...

  9. Rails 5 Test Prescriptions 第5章 Testing Models

    Rails,model层包含业务逻辑和储存逻辑.其中储存逻辑被ActiveRecord处理. 在model中,不是每件事都必须是ActiveRecord对象.model layer可以包含各种服务,对 ...

  10. BooStrap4文档摘录 2 Content, Component

    Content Reboot:从新写了主要元素的排列. 本章讲了各种元素及其相关的类. ⚠️ 文档左上角有搜索栏. Components Alert✅ Badge✅ Button✅和Button gr ...