# 前端项目搭建手册

241 阅读1分钟

前端项目搭建手册

介绍项目使用的类库和一些特殊 api 的处理方法,主要如下

  1. 项目的初始化
  2. 项目状态管理
  3. 项目的路由管理
  4. 前后端分离使用的mock数据思想
  5. 项目进行国际化的处理方案

项目的初始化

  1. 项目使用框架:React
  2. 项目初始化是使用antd-design的开发者脚手架 create-react-app 进行项目初始化
  3. 添加按需加载的配置文件,可以优化前端的性能
  4. 项目使用yarn 进行项目所需依赖进行下载
  5. 项目使用git 进行代码管理

项目状态管理

最初的react状态管理使用 contex 和props 进行结合,但是造成代码冗余,所以使用react-redux 进行项目管理

  1. 使用react-redux 进行项目状态的 集中管理
  2. 使用react-thunk 进行异步状态的管理
  3. 通过配置文件进行使用@content 的装饰器用法实现代码的更精简化

项目路由管理

  1. 使用react-router4进行路由管理

前后端分离使用的mock数据思想

  1. 使用json-server 进行数据模拟
  2. 可以更高效的进行前端后并行开发
  3. 支持标准的Resful 操作
  4. 支持标准的Resful路由规则
  5. 而且还有一些进阶扩展,可以自定义路由,中间件等

项目进行国际化的处理方案

在项目中使用 antd-design 社区提供的react-intl-universal,进行项目国际化语言处理,在这里要注意配置文件的存放位置,还有api的初始化成功或者失败的判断