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
