【源码】基于Framework7和React的移动端项目模板

项目简介

这是一个基于Framework7和React的移动端项目搭建模板，借助Framework7的强大功能和现代前端技术，为开发者提供了一个能快速搭建移动端应用的基础架构，有效提升开发效率。

项目的主要特性和功能

1. 支持Framework7框架，拥有丰富的移动端UI组件和强大功能。
2. 集成Typescript，实现静态类型检查与编译时错误提示。
3. 采用React Redux和React Router进行状态与路由管理。
4. 借助tslint进行代码规范检查。
5. 支持基于react-intl的国际化功能。
6. 采用less预处理器编写样式。
7. 运用基于vw的移动端适配方案实现响应式设计。
8. 使用react-app-rewired和customize-cra，方便升级webpack和babel。
9. 引入封装好的ajax库、beehive组件库、redux-promise中间件以及beehive-utils工具库。

安装使用步骤

1. 删除.git目录：执行命令rm -rf.git。
2. 修改项目名。
3. 安装依赖：执行命令npm i。
4. 启动项目：执行命令npm start。

基于vw的移动端适配说明

原理

在style/plugins/plugins.js中定义了less插件函数vw。若设计图为1倍图，无需修改plugins.js；若为2倍图，将vm函数修改为： js functions.add("vw", function(num) { return (num.value / 7.5).toFixed(5) + "vw"; }); 使用时，在less文件引入@import "~style/index"，然后使用vm()函数，例如font-size: vm(16);。

参考

利用视口单位实现适配布局

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】