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&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