react，antd-mobile的按需引入，适配，主题定制，路由，状态管理

最新推荐文章于 2024-03-18 00:00:00 发布

ThatITs

最新推荐文章于 2024-03-18 00:00:00 发布

阅读量719

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/qq_39603448/article/details/107941642

版权

react 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1：create-react-app 项目名称
2：cd 项目名称
按需引入办法
1：安装antd-mobile

npm install antd-mobile --save

2：引入 react-app-rewired 并修改 package.json 里的启动配置。。由于新的 react-app-rewired@2.x 版本的关系，你需要还需要安装 customize-cra。

npm install react-app-rewired customize-cra --save-dev

3：修改package,json文件的“script”内容为

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
  },

4：安装babel-plugin-import, babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件

npm install babel-plugin-import --save-dev

5：在项目根目录创建一个 config-overrides.js 用于修改默认配置。

const { override, fixBabelImports} = require('customize-cra');

const theme = require('./them.json')
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd-mobile',
        style: true,
    }),
 );

==以下为定制主题=
1：你的项目里需要包含如下依赖 babel-plugin-import less less-loader style-loader css-loader 。
less-loader一定要是5.0版本一下

npm install --save-dev babel-plugin-import less style-loader css-loader
npm install less-loader@4.1.0

2：在根目录下创建 antd-theme.json文件

	{
	    "hd": "2px",
	    "brand-primary": "red",
	    "color-text-base": "#333"
	},

3：在刚才创建的config-overrides.js中修改为以下内容

const { override, fixBabelImports, addLessLoader } = require('customize-cra');
const theme = require('./antd-theme.json');
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd-mobile',
        style: true,
    }),
    addLessLoader({
        lessOptions: {
            javascriptEnabled: true,
            modifyVars: theme
        }
    }),

);

以下为手机适配
1：

npm install postcss-px2rem-exclude --save

2：在config-overrides.js中修改为以下内容

const { override, fixBabelImports, addLessLoader, addPostcssPlugins } = require('customize-cra');

const theme = require('./antd-theme.json');
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd-mobile',
        style: true,
    }),
    addLessLoader({
        lessOptions: {
            javascriptEnabled: true,
            modifyVars: theme
        }
    }),
    addPostcssPlugins(
        [require("postcss-px2rem-exclude")({
            remUnit: 16,  //这里是比列 1rem = 16px
            propList: ['*'],
            exclude: ''
        })]
    ),

);

React中使用addWebpackAlias配置导入路径
以下为配置后的完整版本 config-overrides.js

const { override, fixBabelImports , addLessLoader, addPostcssPlugins, addWebpackAlias, addWebpackModuleRule} = require("customize-cra");
const path = require("path");
const theme = require('./antd-theme');
// 生产环境下的 有某个文件不打包
const rewiredMap = () => config => {
    if(config.mode==="production") config.devtool=false;
    
    return config;
};
module.exports = override(
    rewiredMap(),
    // 主题引用以及按需引入
    addLessLoader({
        lessOptions: {
            javascriptEnabled: true,
            modifyVars: theme
        } }),
    fixBabelImports("import", {
        libraryName: "antd-mobile",
        libraryDirectory: 'es',
        style: true,
    }),
    // 手机适配的比列  1rem = 16px
    addPostcssPlugins(
        [require("postcss-px2rem-exclude")({
            remUnit: 16,
            propList: ['*'],
            exclude: ''
        })]
    ),
    // 这里是将目录文件优化  定义 @ 代表 src下面的文件  
    addWebpackAlias({
        '@': path.resolve(__dirname, 'src'),
        // 'aliasimgurl': path.resolve(__dirname, "src/assets/image")
    }),
    //  这里暂时不知道什么作用
    addWebpackModuleRule(
        {
            test: /\.(gif|jpe|jpg|png|bmp)$/,
            use: [{
                loader: require.resolve('url-loader'),
                options: {
                    limit: 10000,
                    esModule:false,
                    name: 'images/[name].[hash:8].[ext]'
                }
            }]
        },
    )
);

配置路由
1：安装：npm install react-router-dom
2：安装：npm install -S react-router
3：安装：npm install react-router-config
4：在src的目录下创建router的index.js文件：

import Login from '@/pages/login/login';
import Forget from '@/pages/forget/forget';
const routes = [
    { path: "/", exact: true, component: Login },
    { path: "/forget", exact: true, component: Forget },
];

export default routes;

5：修改app.js的文件为以下内容

import React from 'react';
import {renderRoutes} from 'react-router-config';
import {BrowserRouter as Router} from 'react-router-dom';
import routes from './router'
const Root = (props) => {
  return (
    <Router>
        {/* 渲染匹配路径的路由组件 */}
        {renderRoutes(routes)}
    </Router>
  );
};
export default Root;

目录结构如下：
在这里插入图片描述
react-=dux的应用状态管理器
1：安装 npm i react-redux
2：安装 npm i redux
3：安装 npm i redux-persist
1：创建目录结构
如下

1：store.js

import { createStore } from 'redux';
// import { createLogger } from 'redux-logger';
// import thunk from 'redux-thunk';
import reducers from './reducers/index';
import {persistStore, persistReducer} from 'redux-persist'; // 将store中的数据缓存到浏览器中
import storage from 'redux-persist/lib/storage';   //redux-persist实现React持久化本地数据存储的简单应用
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';   //redux-persist实现React持久化本地数据存储的简单应用

// const loggerMiddleware = createLogger();
const persistConfig = {
    key: 'root', // key是放入localStorage中的key
    storage: storage, // storage简单就可以理解成localStorage的功能封装吧，不过有时候由于版本问题，必要在后一个storage上加一个default属性，可以在console中打出来判断是否需要加
    stateReconciler: autoMergeLevel2 // 查看 'Merge Process' 部分的具体情况
};

const myPersistReducer = persistReducer(persistConfig, reducers)
const store = createStore(myPersistReducer)
export const persistor = persistStore(store)
export default store;

2:constants.js

// 个人信息
export const USER_INFO = 'USER_INFO'

3：reducers文件下创建的js分别跟actions下面的文件名称一一对应，然后在多一个
index.js
结构图：
在这里插入图片描述
index.js

	import { combineReducers } from 'redux';
	// 引入需要注册的js文件
	import user from './user'
	// 注册的对象
	export default combineReducers({
	    user
	});

user.js

	import * as actionTypes from '../constants';
	const userInfo = {
		userInfo: {}
	}
	const user = (state = userInfo, action) => {
		switch (action.type) {
			case actionTypes.USER_INFO:
				state = {
					...state,
					userInfo: action.payload
				}
				return state;
			default:
				return state;
		}
	};
	export default user;

4:actions的文件下的目录与reducers 一直但是少一个index.js文件
user.js

	import * as actionTypes from '../constants';
	const setUserInfo = data => {
		return {
			type: actionTypes.USER_INFO,
			data
		};
	};
	export { setUserInfo };

修改根目录下的index.js文件

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {Provider} from 'react-redux'  // 作为中间件降低各组件与Store之间的耦合
import store from './redux/store'   // 状态管理的仓库
import {persistor} from './redux/store' //  存到localhost的缓存方法
import {PersistGate} from 'redux-persist/integration/react';  //redux-persist实现React持久化本地数据存储的简单应用

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      {/* <React.StrictMode> */}
        <App />
      {/* </React.StrictMode> */}
    </PersistGate>
  </Provider>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

ThatITs

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
react，antd-mobile的按需引入，适配，主题定制，路由，状态管理

按需引入办法1：安装antd-mobilenpm install antd-mobile --save2：引入 react-app-rewired 并修改 package.json 里的启动配置。。由于新的 react-app-rewired@2.x 版本的关系，你需要还需要安装 customize-cra。npm install react-app-rewired customize-cra --save-dev3：修改package,json文件的“script”内容为"scripts"
复制链接

扫一扫

专栏目录