开源中国 2018 年度最后一场技术盛会邀你来约~错过就要等明年啦!点此立即预约

kaikai / react-highwebJavaScriptMIT

Watch 9 Star 24 Fork 6
Sign up for free
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
react企业管理端系统架构,antd组件,兼容IE9+,加入koa测试服务 spread retract

Loading...
README.md

react-talkweb开发文档


主要技术参考


项目说明

企业多系统管理平台前端框架,采用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

Comments ( 1 )

You need to Sign in for post a comment

Help Search