建议

  • 引用reset.less 重置、统一页面样式
  • 引用varibale.less 设置默认、统一样式 比如

// 字体颜色
@font-100: #324057;
@font-200: #475669;
@font-300: #5e6d82;
@font-400: #8492a6;
@font-500: #99a9bf;
@font-600: #c0ccda;

  • 单页应用所有路由都添加路由守卫，比如设置默认的微信分享内容
  • 在config设置每个环境的默认配置
  • axios在全局封装好
  • 添加eslint
  • 使用prettier

单页应用项目

技术栈是react+react-dom+reset-css+axios+umi+antd-mobile

  1.   <script type="text/javascript">
  2.     function setFontSize() {
  3.       var clientWidth = window.innerWidth || document.body.clientWidth || 375;
  4.       clientWidth = clientWidth < 480 ? clientWidth : 480;
  5.       var fontSize = (clientWidth / 375) * 16;
  6.       document.querySelector("html").style.fontSize = fontSize + "px";
  7.     }
  8.     window.addEventListener("resize", setFontSize);
  9.     window.addEventListener("orientationchange", setFontSize);
  10.     setFontSize();
  11.   </script>

因为是移动端应用，考虑适配问题，所以宽度最宽为480px
image.png
iPad Pro 12.9-inch(1024x1366 | Dpr:2)
image.png
iPhone XS Max(414x896 | Dpr:3)
image.png
Windows(480x800 | Dpr:2)

多页应用项目

技术栈是react+react-dom+reset-css+axios+antd+antd-mobile+less