本文包括如下几个步骤：

  • 新建Demo项目
  • 新建Demo模块
  • 编写config.js
  • 编写.env
  • 编写package.json
  • 编写demo入口文件
  • 页面访问

新建Demo项目

本地新建一个空的项目choerodon-todo-service。

  1. $ mkdir -p react

编写config.js

在react文件夹下创建config.js

  1. $ cd react
  2. $ touch config.js

在react文件夹下创建.env

  1. $ cd react
  2. $ touch .env
  1. // .env
  2. API_HOST=http://api.staging.saas.hand-china.com
  3. CLIENT_ID=localhost

编写package.json

  1. {
  2.   "name": "@choerodon/demo",  // name为模块名（可以增加@choerodon scope）
  3.   "routeName": "demo",  // routeName为路由前缀（如空，取name为路由前缀）
  4.   "version": "1.0.0",
  5.   "description": "",
  6.   "main": "./lib/index.js",
  7.   "scripts": {
  9.     "dist": "choerodon-front-boot dist --config ./react/config.js",
  10.     "lint-staged": "lint-staged",
  11.     "lint-staged:es": "eslint",
  12.     "compile": "choerodon-front-boot compile"
  13.   },
  14.   "contributors": [
  15.     "choerodon"
  16.   ],
  17.   "license": "ISC",
  18.   "dependencies": {
  19.     "@choerodon/boot": "0.19.x",
  20.     "@choerodon/master": "0.19.x"  // 表示进入页面后的部分，菜单、header和AutoRouter等，可自己配置
  21.   },
  22.   "files": [
  23.   ],
  24.   "lint-staged": {
  25.     "react/**/*.{js,jsx}": [
  26.       "npm run lint-staged:es"
  27.     ],
  29.   },
  30.   "husky": {
  31.     "hooks": {
  32.       "pre-commit": "lint-staged"
  33.     }
  34.   },
  35.   "devDependencies": {
  36.     "babel-preset-env": "^1.7.0",
  37.     "gulp": "^3.9.1",
  38.     "gulp-babel": "^7.0.1",
  39.     "through2": "^2.0.3"
  40.   }
  41. }

在react文件夹下创建index文件。

routes文件夹用于存放前端的页面。

  1. $ touch react/index.js

启动及页面访问

  1. $ npm install
  2. $ npm run start

当开始编译后会自动打开浏览器，通过 ，查看页面效果。