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