介绍

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

本文包括如下几个步骤：

1. 新建Demo项目
2. 新建Demo模块
3. 编写config.js
4. 编写.env
5. 编写package.json
6. 编写demo入口文件
7. 页面访问

新建Demo项目

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

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

新建Demo模块

创建新模块的文件夹

$ mkdir -p react

编写config.js

在react文件夹下创建config.js

$ cd react
$ touch config.js

// config.js
const config = {
  master: './node_modules/@choerodon/master/lib/master.js',
  modules: ['.'],
};

module.exports = config;

编写.env

在react文件夹下创建.env

$ cd react
$ touch .env

// .env
API_HOST=http://api.staging.saas.hand-china.com
CLIENT_ID=localhost

编写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": "./lib/index.js",
  "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": "choerodon-front-boot compile"
  },
  "contributors": [
    "choerodon"
  ],
  "license": "ISC",
  "dependencies": {
    "@choerodon/boot": "0.19.x",
    "@choerodon/master": "0.19.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入口文件

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

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

$ touch react/index.js

// index.js
import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';
import { nomatch } from '@choerodon/boot';

function Index({ match }) {
  return (
    <Switch>
      <Route path="*" component={nomatch} />
    </Switch>    
  );
}

export default inject('AppState')(Index);

启动及页面访问

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

$ npm install
$ npm run start

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