ui:antd mobile
路由:react-router-dom
request请求:自带的fetch
npx create-react-app my-app
cd my-app
npm start
npm i antd-mobile
一、安装customize-cra
npm install react-app-rewired customize-cra --save-dev
二、配置 package.json
// package.json
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test --env=jsdom",
+ "test": "react-app-rewired test --env=jsdom",
}
三、安装babel-plugin-import
npm i babel-plugin-import --save-dev
四、配置config-overrides.js
1、项目根目录创建config-overrides.js文件
const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd-mobile',
style: 'css',
}),
);
一、创建theme.json
{
"fill-body": "#00f"
}
二、修改config-overrides.js
注意:不同版本的customize-cra,里面的addLessLoader参数不一样,需要仔细辨别
const { override, fixBabelImports, addLessLoader } = require('customize-cra');
const theme = require('./theme.json');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd-mobile',
style: true,
}),
addLessLoader({
lessOptions: {
javascriptEnabled: true,
modifyVars: theme
}
})
);
npm i react-router-dom
src/routes/index.js
import React from 'react';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import routes from './router'
const BasicRoute = () => (
<Router>
<Switch>
{
routes.map((item) => {
return (
<Route key={item.path} exact path={item.path} component={item.component}/>
)
})
}
</Switch>
</Router>
);
export default BasicRoute;
src/routes/router.js
import Home from '../App';
import Login from '../components/login';
import Register from '../components/login/register';
import dealerMatching from '../components/dealer/matching';
export default [
{
title: '首页',
path: '/',
component: Home
},
{
title: '登录',
path: '/login',
component: Login,
},
{
title: '注册',
path: '/register',
component: Register,
},
{
title: '分销商礼品券匹配',
path: '/dealer/matching',
component: dealerMatching,
},
]
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import './index.css'
import Router from './routes/index';
ReactDOM.render(
<React.StrictMode>
<Router />
</React.StrictMode>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
使用的是create-react-dom原始的fetch
项目根目录的config-overrides.js文件覆盖webpack配置,可配置文件路径别名,图片打包规则等
const { override, fixBabelImports, addLessLoader, addWebpackAlias, addWebpackModuleRule } = require('customize-cra')
const path = require('path')
const theme = require('./theme.json')
const imageInlineSizeLimit = parseInt(
process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
)
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd-mobile',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
lessOptions: {
javascriptEnabled: true,
modifyVars: theme
}
}),
addWebpackAlias({ //路径别名
'@': path.resolve(__dirname, 'src'),
'assets': path.resolve(__dirname, 'src/assets'),
}),
addWebpackModuleRule({
test: [/\.jpg$/],
loader: require.resolve('url-loader'),
options: {
limit: imageInlineSizeLimit,
name: 'static/media/[name].[ext]',
},
}),
);
提示信息持续时间统一维护
以上代码均在github地址:https://github.com/yquanmei/create-react-app