介绍

此Demo项目基于Choerodon开发，使用React作为开发语言。

本文包括如下几个步骤：

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

新建Demo项目

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

$ mkdir -p choerodon-todo-service
$ cd choerodon-todo-service

新建Demo模块

创建新模块的文件夹

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

编写config.js

在react文件夹下创建config.js

$ cd react
$ touch config.js

// config.js
const config = {
  local: true, //是否为本地开发
  server: 'http://api.staging.saas.hand-china.com', // 后端接口服务器地址
  master: '@choerodon/master',
  projectType: 'choerodon',
  buildType: 'single',
  dashboard: {},
};
module.exports = config;

编写package.json

在项目根目录下创建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",
    "dist": "choerodon-front-boot dist --config ./react/config.js",
    "lint-staged": "lint-staged",
    "lint-staged:es": "eslint",
    "compile": "gulp compile"
  },
  "contributors": [
    "choerodon"
  ],
  "license": "ISC",
  "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"
    }
  },
  "devDependencies": {
    "babel-preset-env": "^1.7.0",
    "gulp": "^3.9.1",
    "gulp-babel": "^7.0.1",
    "through2": "^2.0.3"
  }
}

编写demo入口文件

在containers文件夹下创建Index文件，文件名为模块名大写+Index。

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

$ touch react/src/app/demo/containers/DEMOIndex.js

// 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
$ npm run start

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