react移动端项目构建，react+react_vant+vite+axios+redux+sass
react：https://react.nodejs.cn/reference/react/hooksvant：https://vant-contrib.gitee.io/vant/#/zh-CN
axios：https://www.axios-http.cn/docs/api_intro
vite：https://vitejs.cn/
redux：https://cn.redux.js.org/index.html
redux-persist：https://github.com/rt2zz/redux-persist
sass：https://blog.csdn.net/randy521520/article/details/131242242
前言：
本文紧张解说react V18移动端项目构建，在构建项目前请确保已安装node、yarn工具，node版本18+，此项目构建紧张集成：axios、pinia、vant、sass、vite和react V18，其中还会介绍到如何跨页面通报数据、国际化配置、rem适配等功能
本文解说的功能代码只是扼要说明，完备代码可点击以下链接下载，下载后请先看README.md文档说明，已踩过大部门坑：
react PC端项目构建TS，react@18.2.0+antd+vite+axios+redux+sass+ts 完备版代码下载：
https://download.csdn.net/download/randy521520/88922625
react PC端项目构建，react@18.2.0+antd+vite+axios+redux+sass完备版代码下载：
https://download.csdn.net/download/randy521520/88922569
react移动端项目构建TS，react@18.2.0+react-vant+vite+axios+redux+sass+ts完备版代码下载：
https://download.csdn.net/download/randy521520/88917557
react移动端项目构建，react@18.2.0+react-vant+vite+axios+redux+sass完备版代码下载：
https://download.csdn.net/download/randy521520/88917543
一、初始化项目
1.cmd打开终端工具，运行：yarn create vite
https://i-blog.csdnimg.cn/blog_migrate/f8cb88528b5632f14b35792f33cd28bc.png
2.输入项目名称，键盘方向键选择React
https://i-blog.csdnimg.cn/blog_migrate/7d0433df3938f407d832e0a21c75839b.png
3.键盘方向键选择JavaScript或JavaScript+SWC，SWC是JavaScript编译工具比Babel要快，但是在功能和插件生态系统方面Babel更完满；这里选择JavaScript
https://i-blog.csdnimg.cn/blog_migrate/cc421b65688819dacc09127e13708c4f.png
4.项目创建乐成
https://i-blog.csdnimg.cn/blog_migrate/429ff9215fced370ac259e83a2d7e7e6.png
5.开辟者工具打开项目，打开开辟者工具的终端，运行yarn install，安装package.json中的依赖包
https://i-blog.csdnimg.cn/blog_migrate/b24b447707800e9b8570fc1d05d0e30f.png
6.修改package.json脚本中的dev为 vite --open，运行yarn dev，就会启动项目并在浏览器中自动打开，不加–open不会在浏览器中自动打开，项目初始化乐成
https://i-blog.csdnimg.cn/blog_migrate/a192fc6a49bf8163d4c84777220424ae.png
7.vite相关命令
vite ：启动开发服务器，可以指定一个根目录（可选）。
build ：构建生产环境的应用程序，可以指定一个根目录（可选）。
optimize ：预打包依赖项，用于优化构建性能。
preview ：本地预览生产环境的构建结果，可以指定一个根目录（可选）。
--open：启动开发服务器后自动打开默认浏览器并访问应用程序
--cors：启用 CORS（跨域资源共享）。
--strictPort：如果指定的端口已被占用，则退出。
--force：强制优化器忽略缓存并重新打包。
-c, --config <file>：使用指定的配置文件。
--base <path>：设置公共基础路径，默认为 /。
-l, --logLevel <level>：设置日志级别，可选值为 info、warn、error、silent。
--clearScreen：允许或禁用日志时的清屏操作。
-d, --debug ：显示调试日志，可选参数为特定功能的名称。
-f, --filter <filter>：过滤调试日志的输出。
-m, --mode <mode>：设置环境模式。
-h, --help：显示帮助信息。
-v, --version：显示版本号。
二、集成vant
1.终端运行：yarn add react-vant，安装vant
https://i-blog.csdnimg.cn/blog_migrate/a8d36a0c9b9c8d059e783a92a5dde331.png
2.新建pages>home>home.jsx，在home.jsx中使用Buton组件，并在vite.config.js配置路径别名
https://i-blog.csdnimg.cn/blog_migrate/7b37412e6db4bb4e276631500987e613.png
3.修改App.jsx，使用Home
https://i-blog.csdnimg.cn/blog_migrate/17072c22d21a65e9646dad374ce5b4e7.png
4.react-vant 支持基于 Tree Shaking 的按需加载，大部门的构建工具（比方 webpack 4+ 和 rollup）都支持 Tree Shaking，所以绝大多数情况下无需做额外的配置
三、集成sass
sass是css预处理器，可以声明变量、函数、嵌套等功能，可以减少重复的代码，使得样式表的结构更清晰、更易读。sass还内置了许多函数，处理颜色、数值等，也可以自定义函数扩展sass，还可以通过Mixin定义一组样式，并在需要的地方进行引用，可以避免重复的样式代码，而且方便进行样式的修改和维护
1.终端运行：yarn add sass -D，安装sass
https://i-blog.csdnimg.cn/blog_migrate/e2a0ac8ca4f3a883e1eb91c8ffddcf36.png
2. 在assets中新建scss>global.scss、scss>globalMixin.scss、scss>globalVar.scss、scss>iframe.scss，global.scss用于通用的样式、globalMixin.scss用于Mixin通用的样式、globalVar.scss用于全局变量、iframe.scss用于导出scss文件，修改vite.config.js，将iframe.scss文件引入到项目中
https://i-blog.csdnimg.cn/blog_migrate/e61bdd2a8e488166abce1436d344813d.png
3.新建pages>home>home.module.scss，修改home.jsx，div样式使用了scss变量、Mixin函数、scss通用样式已生效
https://i-blog.csdnimg.cn/blog_migrate/2e55fab26aacebbed1dd27cb42a6461e.png
四、路由配置
1.终端运行：yarn add react-router-dom，安装react-router-dom
https://i-blog.csdnimg.cn/blog_migrate/ca01c0d3d648499ca92b89f93c13b006.png
2.在src新建router.jsx
https://i-blog.csdnimg.cn/blog_migrate/40c017b89ec8b9c2fe615a8a5df63bb0.png
3.修改App.jsx、main.jsx
https://i-blog.csdnimg.cn/blog_migrate/c8892460f38ac6a43f60d54fb9c6dce0.png
五、ConfigProvider定制化主题
1.在src下新建theme.js，之所以接纳theme.js配置主题，是为了写内联样式时可以使用一样的主题配置
https://i-blog.csdnimg.cn/blog_migrate/b7c141f0718b76930dc7e45d81a359bb.png
2.修改app.jsx，通过theme.js配置主题，有个缺点就是无法和globalVar.scss变量中的值保持统一，如果需要同一个根本变量，就要写两编，就像示例中globalVar.scss已配置赤色值，但是要改变vant中button的背景色就要重新配置
https://i-blog.csdnimg.cn/blog_migrate/15d97c9984bab79475e2ba351f1d4502.png
3.办理globalVar.scss的sass变量无法和theme.js保持统一的标题，可通过在vite.config.js读取globalVar.scss文件，再配置全局变量
https://i-blog.csdnimg.cn/blog_migrate/40e719f4a5b63bbc84c0fcbadcfcb66e.png
4.新建hooks>useCommon.js，并在vite.config.js中配置别名
https://i-blog.csdnimg.cn/blog_migrate/ee4a351d416ee169c2f079f714ae6da2.png
5.修改globalVar.scss
https://i-blog.csdnimg.cn/blog_migrate/511e4dfb34ba9fc89a692fbfbc86eb0f.png
6.修改App.jsx，重新运行yarn dev；这样配置有个缺点：import.meta.env是构建得时间生成得，项目运行后无法更改，修改globalVar.scss原有的值是不会变的，需要重新运行项目；可通过自定义插件办理该标题：插件配置configureServer，通过server.ws.on、server.ws.send把已改变的globalVar.scss后的值发送到客户端，客户端在useEnv中通过import.meta.hot.on继承值；可通过自定义插件办理该标题：插件配置configureServer，通过server.ws.on、server.ws.send把已改变的globalVar.scss后的值发送到客户端，客户端在useEnv中通过import.meta.hot.on继承值
https://i-blog.csdnimg.cn/blog_migrate/7ca47990a4c61a89b06377c998a268cc.png
六、集成postcss，适配
1.终端运行：yarn add postcss-px-to-viewport-8-plugin -D，安装postcss-px-to-viewport-8-plugin
https://i-blog.csdnimg.cn/blog_migrate/a68a157b57eb37e70870b9770f93d20a.png
2.在根目录上新建postcss.config.js，重新运行项目，会发现之前div中的px已转换为vw，vant框架内部定义的变量也转为vw
https://i-blog.csdnimg.cn/blog_migrate/ffe1dde480b75ed43ff2a20720980f34.png
3.只使用postcss.config.js是无法转换内联样式中的像素，可以自己写个hooks转换
https://i-blog.csdnimg.cn/blog_migrate/b409bc07f77402bf509b2dc1b3cbe810.png
4.修改vite.config.js配置postcssConfig全局变量
https://i-blog.csdnimg.cn/blog_migrate/0743edfdf8dd475cacf2610a84880153.png
5.在hooks下新建usePxTransform.js
https://i-blog.csdnimg.cn/blog_migrate/60e4cf0583940098e00b17bc9b9464bd.png
6.修改home.jsx使用usePxTransform
https://i-blog.csdnimg.cn/blog_migrate/b5f8b318f489babd60477db69f83231f.png
七、集成redux，状态管理
1.终端运行：yarn add @reduxjs/toolkit react-redux redux-persist ，安装@reduxjs/toolkit、react-redux、redux-persist
https://i-blog.csdnimg.cn/blog_migrate/c04362ca0a9ecb18dcd498b6b3d7a522.png
2.在src下新建store>redux.js、store>persistConfig.js、store>demoStore.js，在vite.config.js配置路径别
https://i-blog.csdnimg.cn/blog_migrate/f9ee4a09e65fc4c0f605035e43b50975.png
3.修改App.jsx
https://i-blog.csdnimg.cn/blog_migrate/67dae8b2da022883ec9086c2a93739f8.png
4.修改home.jsx，使用demoStore
https://i-blog.csdnimg.cn/blog_migrate/7cad25d62229eb6708eab07cebfd0289.png
八、国际化配置
1.终端运行：yarn add i18next react-i18next，安装i18next、react-i18next
https://i-blog.csdnimg.cn/blog_migrate/e407761eefe11ff9349625be454f6be4.png
2.在src下新建common>enum.js，enum.js公共枚举文件，并在vite.config.js中配置路径别名
https://i-blog.csdnimg.cn/blog_migrate/f0de60c533a2a1f1641a0b12f958e424.png
3.在src下新建lang>en_us.js、lang>zh_cn.js、lang>lang.js，用于创建国际化，并在main.js中使用该配置，在vite.config.js中配置路径别名，把语言配置存入localStorage是为了包管语言改变之后，刷新页面之后也可以使用之前改变后的语言
https://i-blog.csdnimg.cn/blog_migrate/08c8cff1631020585bebed60147d5af3.pnghttps://i-blog.csdnimg.cn/blog_migrate/99e91222b0b93e98f78f26630b4e2866.png
4.修改home.jsx
https://i-blog.csdnimg.cn/blog_migrate/a11b75a15ebda1862de9226400ecd2cf.pnghttps://i-blog.csdnimg.cn/blog_migrate/abe544f4225df576a5515838cc4db414.png
九、创建page.jsx组件作为项目标页面组件
1.终端运行：yarn add prop-types，安装prop-types
https://i-blog.csdnimg.cn/blog_migrate/e4e991347215ee382ed8ac0218c200e4.png
2.新建components>common>slot>Slot.jsx、components>common>slot>SlotContext.jsx、components>common>slot>SlotProvider.jsx、components>common>slot>SlotTemplate.jsx并把src/components在vite.config.js中配置路径别名
https://i-blog.csdnimg.cn/blog_migrate/06eec0293c60148cc571f1d5a6d71d6d.pnghttps://i-blog.csdnimg.cn/blog_migrate/6e411ff81a0dc373a661d52a8ba8d436.pnghttps://i-blog.csdnimg.cn/blog_migrate/b3993a5f3bf2f71840fa2ace76e92046.png
3.在components下新建layout>page>Page.jsx
https://i-blog.csdnimg.cn/blog_migrate/fd572eeedf6701d74d32cc745bd8bad5.png
4.删除index.css，把App.css修改为App.scss，修改App.jsx
https://i-blog.csdnimg.cn/blog_migrate/87be0ebf3c19983a4a50aaf8432ad920.png
5.修改home.jsx
https://i-blog.csdnimg.cn/blog_migrate/1d3b9c95dfd4783c609b0f7dea5215ee.png
十、集成字体图标
1.字体图标集成以阿里icon为例，访问：https://www.iconfont.cn/ 图标库，搜索返回，任选一个图标加入购物车
https://i-blog.csdnimg.cn/blog_migrate/1c9609a06eb5ade40fe0b2642be260fb.png
2.去购物车中，选择下载代码
https://i-blog.csdnimg.cn/blog_migrate/ae3225aa0ec8c2e8f087666e0112ccff.png
3.在assets下新建font文件，把下载好的字体图标解压到该文件，然后在App.scss中引入iconfont.css
https://i-blog.csdnimg.cn/blog_migrate/dbd5f918254d21580e9f47ebd612c2d4.png
4.在components下新建commpon>icon>Icon.jsx
https://i-blog.csdnimg.cn/blog_migrate/8b8f5bbf6d1ea0cf5d1988571399be94.png
5.修改Page.jsx，增长返回图标
https://i-blog.csdnimg.cn/blog_migrate/204d0dad16671bf87117434276d91246.png
十一、集成axios
1.终端运行：yarn add axios，安装axios
https://i-blog.csdnimg.cn/blog_migrate/43e2582648e544f76588eefaee5e2ced.png
2.在common下新增requests.js
https://i-blog.csdnimg.cn/blog_migrate/e53c6de864de0e2e31e610fbd7bca68e.png
3.修改home.jsx
https://i-blog.csdnimg.cn/blog_migrate/2826141c47ed94310f7034d5975e7f87.png
十二、开辟环境配置
1.在根目录下新建.env.development、.env.production
https://i-blog.csdnimg.cn/blog_migrate/fb5722a11eaf987078a514e23727e609.png
2.修改package.json中的脚本命令
https://i-blog.csdnimg.cn/blog_migrate/3ac8d0439cef3cd3537266844ea92aa4.png
3.修改useCommon.js中的useEnv
https://i-blog.csdnimg.cn/blog_migrate/e792a3620d7ab4fde167202aa1dc6c8c.png
4.重新运行yarn dev
https://i-blog.csdnimg.cn/blog_migrate/4bfafd2984239f98ccee6096c3f82a8c.png
十三、路由跳转
1.修改Page.jsx、Icon.jsx，给Page.jsx增长返回事件，新建icon.modue.scss
https://i-blog.csdnimg.cn/blog_migrate/00c38c171b7c58fa90ad09042b306b96.pnghttps://i-blog.csdnimg.cn/blog_migrate/67ba9a15993de88d39b7d00aad3d36f2.pnghttps://i-blog.csdnimg.cn/blog_migrate/cfd5fc1f560d11b3ba8d4062036a33ff.png
2.在pages下新建三个页面：list.jsx、add.jsx、detail.jsx，分别为列表页、添加页、详情页，并配置路由
https://i-blog.csdnimg.cn/blog_migrate/31dab60336cf6efaa288ed0c44d5a6c2.pnghttps://i-blog.csdnimg.cn/blog_migrate/9449a5fd4c82c9d07883fb459c3c703a.pnghttps://i-blog.csdnimg.cn/blog_migrate/d87d52b824a9feba5e056fc96a7573e1.pnghttps://i-blog.csdnimg.cn/blog_migrate/c01e9588ceeff61c1c9b1bbdea5addf5.png
3.路由跳转home>list>add >detail 或 home>list>detail，下图中演示了两种路由跳转传参的方式，第一种params传参：需要提前在路由上配置相关参数，跳转成之后url上会显示参数，页面刷新之后不会丢失，通过useParams获取参数；第二种state传参，跳转成之后url上不会显示参数，页面刷新之后不会丢失，通过useLocation获取参数；不过返回页面时不能向返回页面通报参数，不需要该功能的可以忽略下面教程
https://i-blog.csdnimg.cn/blog_migrate/2593110cda0114c0a2a76c404c39c823.pnghttps://i-blog.csdnimg.cn/blog_migrate/2707763f4a27d48732584c53dadc7ebb.pnghttps://i-blog.csdnimg.cn/blog_migrate/dca6b1168c3d65b944146e0a50c436f4.pnghttps://i-blog.csdnimg.cn/blog_migrate/ac5e478213d89b2fe4c51aaa95fd8619.png
十四、路由封装
在刚才的路由跳转中，分析了一些路由跳转的弱势，而且路由的封装可以完满Page.jsx的返回功能。可以参考微信小步伐的路由跳转功能，通过消息事件发布和订阅（事件发射器）来封装路由，再由状态管理器储存路由。事件发射器有三个根本的功能：注册事件、移除事件、触发事件
1.终端运行：yarn add react-activation，安装react-activation，路由缓存
https://i-blog.csdnimg.cn/blog_migrate/edd3fa1312c45e8bab95b88b4cd4928f.png
2.修改router.jsx、main.jsx，使用路由缓存
https://i-blog.csdnimg.cn/blog_migrate/0e6c07f2b81af104d39bc750351944f8.png
3.在根目录下新建tabBar.js，可使用该js扩展Page.tsx组件增长tabbar功能
https://i-blog.csdnimg.cn/blog_migrate/0a249b2f850a95c4b4d31b675c83b7c6.png
4.新建utils>commonUtil.js，并配置路由别名
https://i-blog.csdnimg.cn/blog_migrate/cb9044f5b13b93f0e399086e90d61722.png
5.在stroe下新建routerStore.js，并在redux.js配置routerStore
https://i-blog.csdnimg.cn/blog_migrate/ac72de9f2bbb84027537b6172da0e8bb.png
6.在hooks下新建useRouter.js
https://i-blog.csdnimg.cn/blog_migrate/1a7834820277490546489706843ba52f.pnghttps://i-blog.csdnimg.cn/blog_migrate/85936fd7994fa92fcda15dfa07503eea.pnghttps://i-blog.csdnimg.cn/blog_migrate/a76a2e4f34125317039753a3dbe4a89d.pnghttps://i-blog.csdnimg.cn/blog_migrate/f9bbca6955e4a43a3e4fc83aea098b06.pnghttps://i-blog.csdnimg.cn/blog_migrate/4b2a8f5cbf991a63085a8bae9e185cc8.png
7.修改Page.jsx
https://i-blog.csdnimg.cn/blog_migrate/54d93e4d4d983916cb5388dc5503e61c.png
8.修改home.jsx、list.jsx、add.jsx、detail.jsx路由跳转，list中的useEffect、useActivate可以一起封装成hook
https://i-blog.csdnimg.cn/blog_migrate/3ad258cd06eda9a25c685486d141e100.pnghttps://i-blog.csdnimg.cn/blog_migrate/5ea7ceb1a5bf3813ee4e86f961c4dd98.pnghttps://i-blog.csdnimg.cn/blog_migrate/3277797e092f40d155a0c91030e7d743.pnghttps://i-blog.csdnimg.cn/blog_migrate/fd9916b9c3fa1e5f3578788dcb067df9.png
9.页面效果
https://i-blog.csdnimg.cn/blog_migrate/dc86a7c92681cfd878a9f87f79744110.pnghttps://i-blog.csdnimg.cn/blog_migrate/4e312f105382e5fa9fbe8fc57f454a4d.pnghttps://i-blog.csdnimg.cn/blog_migrate/aed7add0f5a99a6db80133dc39917ae5.pnghttps://i-blog.csdnimg.cn/blog_migrate/135d131b7e63ba264ff26bd1ef26cdce.png
十五、结语
本文只是大致讲了下react移动端项目搭建，详细的细节还是需要根据自己项目标需要进行调解。路由只封装了navigateTo、navigateBack，可以根据微信小步伐路由api的逻辑https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html 封装switchTab、reLaunch、redirectTo，如果有更好的方法可以忽略该路由封装，个人觉得小步伐路由做的挺好。路径别名可配可不配，根据自己喜好就行
https://i-blog.csdnimg.cn/blog_migrate/bec8afb24059f49f1d01642a4a211da2.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]