【源码】基于 React 和 TypeScript 的前端应用项目

项目简介

本项目是一个基于 React 和 TypeScript 的前端应用项目，提供了一个灵活且功能丰富的前端开发框架。支持单页和多页应用模式，具备组件化开发、多语言支持、日志记录等特性，能帮助开发者快速搭建出交互性强、用户体验优良的前端应用。

项目的主要特性和功能

1. 多种应用模式支持：支持单页和多页应用模式，可根据项目需求灵活配置。
2. 组件化开发：采用组件化开发方式，提供通用组件如消息提示组件（Loading、Notification、Notice），提高代码复用性和可维护性。
3. 多语言支持：具备多语言功能，通过设置语言包和翻译规则，可轻松实现应用的国际化。
4. 日志记录：支持异常捕获、定时发送和日志离线存储，可将日志上传至 SharePoint 或服务器接口。
5. 数据模拟：可通过配置开启数据模拟功能，方便开发和测试。
6. CSS 语法支持：支持类似 Sass 的语法，方便样式编写。
7. 图片和字体图标处理：支持字体图标引入和图片处理，10k 以下图片会转换成 base64。

安装使用步骤

环境准备

1. 安装 Node.js：从 官网 下载 LTS 版本并双击安装，安装后在 cmd 中执行 npm -v 查看 npm 版本。
2. 配置 npm 镜像：国内建议使用淘宝 NPM 镜像，可通过以下两种方法配置：
   • 使用 cnpm：以管理员权限打开 cmd，执行 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装 cnpm，然后执行 cnpm -v 查看版本。
   • 替换 npm 源：执行 npm get registry 读取当前设置，执行 npm config set registry http://registry.npm.taobao.org/ 将源设为淘宝源。
3. 选择编辑器：建议使用 VSCode。

项目配置与运行

1. 安装依赖：在项目路径下打开 cmd 或使用 VSCode 打开项目后启动终端，执行 cnpm i 安装所需依赖。
2. 项目配置：根据项目需要，编辑 config/index.js 中的配置，第一次打包 template.enable 需为 true。若 SP.enable 为 true，需要设置 SharePoint 登录信息。
3. 运行项目：依次执行以下命令，执行完后会自动打开浏览器，在打开的页面中选择打开 html 下的页面即可看到示例页面，如果打开的页面没看到有 html，需等打包完成后刷新页面。 bash cnpm run dll # 打包通用 dll cnpm run watch # 进行本地调试
4. 部署项目：执行正式环境打包命令，将 build 文件夹的内容复制到服务器。 bash cnpm run prod # 正式环境打包

指令说明

• 依赖安装指令：
  • cnpm i：安装所有 package.json 中设置的依赖。
  • cnpm i -D name：安装在开发环境。
  • cnpm i -S name：安装在正式环境。
• 打包指令：
  • cnpm run dll：进行 Dll 打包。
  • cnpm run dev：开发打包不进行代码压缩。
  • cnpm run prod：生产环境打包，进行代码压缩。
  • cnpm run watch：开发打包，打开本地服务器预览且监控代码修改。
• 其他指令：
  • cnpm run lint：代码规范检查。

调试说明

vscode 本地调试

1. 安装 debugger for chrome 插件。
2. 配置 launch.json 文件。
3. 修改 config/index.js 中的 debug 为 true。
4. 执行 cnpm run watch。
5. 按下 F5 开始调试。

SharePoint 本地调试

1. 将 config/index.js 中 SP.enable 设为 true。
2. 在 config 下的 private.json 中输入 SharePoint 登录信息。

下载地址

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