react-talkweb开发文档

主要技术参考

• react~16.4.1
• react-router^4.3.1(HashRouter兼容IE9)
• font-awesome^4.7.0
• antd^3.6.4
• less^3.0.4
• es6(polyfill兼容到IE9)
• koa^2.5.1(nodejs服务)

项目说明

企业多系统管理平台前端框架，采用antd作为组件库（可靠稳定），在平台里面添加系统方便，合理抽分系统之间的公共部分；考虑到框架适配业务多为查询管理页面，没有引入redux，尽可能的简化框架层次结构。框架兼容到IE9，使用es6语法。

支持less与css样式文件，每个页面less文件做了模块化，公共less和css文件没有做模块化

框架集成node服务，提供测试接口及静态资源服务，可用于测试或完善成正式服务

具体开发详情看代码注释

开发环境搭建

1. 编译器
   编译器推荐使用sublime，本文档将围绕sublime来进行说明
   下载地址：Sublime Text 3，选择对应平台下载安装
2. 编译器插件
   LESS-sublime(高亮显示less文件)
   babel-sublime(高亮显示react的jsx语法)
   sublime-jsfmt(格式化react代码，此插件需要手动安装依赖)
   设置文件

   {
     "autoformat": true,
     "extensions": [
       "js",
       "jsx",
       "sublime-settings"
     ],
     "options": {
       "jsx": {
         "alignWithFirstAttribute": false,
         "attrsOnSameLineAsTag": false,
         "firstAttributeOnSameLine": false,
         "formatJSX": true
       },
       "plugins": [
         "esformatter-jsx"
       ]
     }
   }
   Sublime-HTMLPrettify(格式化js，css，html，无法格式化jsx语法)
   安装教程及快捷键配置在它们对应的github主页有详细说明
   推荐使用下载文件，解压到Packages目录安装
3. 调试工具chrome插件
   建议使用chrome进行调试
   可翻墙去chrome扩展程序商店安装React Developer Tools
   也可下载React Developer Tools离线安装，安装教程自行百度
4. nodejs安装
   下载地址：nodejs，选择对应平台下载安装，默认选项安装无需配置环境变量
5. npm配置
   nodejs内置了npm，无需手动安装，了解npm请参考：npm 中文文档
   cnpm为淘宝npm镜像，可大大提高npm安装依赖的速度
   cnpm临时使用：npm --registry https://registry.npm.taobao.org install express
   cnpm持久使用：npm config set registry https://registry.npm.taobao.org

项目目录结构说明

项目npm指令说明

安装依赖

cd react-talkweb
npm install

开发环境启动

cd react-talkweb
npm run dev 或者 npm run start
访问 http://localhost:3000/
测试用户：admin
密码：test@123

编译生产代码

cd react-talkweb
npm run build
编译后代码位于build目录

启动测试node服务

cd react-talkweb
npm install -g nodemon
npm run server
访问 http://localhost:8881/index.html
测试用户：admin
密码：test@123