本文包括如下几个步骤：

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

新建Demo项目

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

$ mkdir -p react/src/app/demo/containers

编写config.js

在react文件夹下创建config.js

$ cd react
$ touch config.js

在项目根目录下创建package.json

$ cd ..
$ npm init

// package.json
{
  "name": "@choerodon/demo",  // name为模块名（可以增加@choerodon scope）
  "routeName": "demo",  // routeName为路由前缀（如空，取name为路由前缀）
  "version": "1.0.0",
  "description": "",
  "main": "./react/src/app/demo/containers/DEMOIndex.js",  // main为入口index的路径（如空，当前模块不会被编译进去，一般只有总前端类型不设置）
  "scripts": {
    "start": "choerodon-front-boot start --config ./react/config.js",
    "lint-staged": "lint-staged",
    "lint-staged:es": "eslint",
    "compile": "gulp compile"
  },
  "contributors": [
    "choerodon"
  ],
  "dependencies": {
    "@choerodon/boot": "0.17.x",
    "@choerodon/master": "0.17.x"  // 表示进入页面后的部分，菜单、header和AutoRouter等，可自己配置
  },
  "files": [
    "lib"
  ],
  "lint-staged": {
    "react/**/*.{js,jsx}": [
      "npm run lint-staged:es"
    ],
    "react/**/*.scss": "stylelint --syntax scss"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
    "babel-preset-env": "^1.7.0",
    "gulp": "^3.9.1",
    "gulp-babel": "^7.0.1",
    "through2": "^2.0.3"
  }
}

编写demo入口文件

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

// DEMOIndex.js
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import { inject } from 'mobx-react';
import { asyncRouter, nomatch } from '@choerodon/boot';
@inject('AppState')
class DEMOIndex extends React.Component {
  render() {
    const { match, AppState } = this.props;
    return (
      <Switch>
        <Route path="*" component={nomatch} />
      </Switch>
    );
  }
}
export default DEMOIndex;

在package.json 同级目录下，安装并启动。

$ npm install