介绍

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

本文包括如下几个步骤:

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

新建Demo项目

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

  1. $ mkdir -p choerodon-todo-service
  2. $ cd choerodon-todo-service

新建Demo模块

创建新模块的文件夹

  1. $ mkdir -p react

编写config.js

在react文件夹下创建config.js

  1. $ cd react
  2. $ touch config.js
  1. // config.js
  2. const config = {
  3. master: './node_modules/@choerodon/master/lib/master.js',
  4. modules: ['.'],
  5. };
  6. module.exports = config;

编写.env

在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

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

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

编写demo入口文件

react文件夹下创建index文件。

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

  1. $ touch react/index.js
  1. // index.js
  2. import React, { Component } from 'react';
  3. import { Route, Switch } from 'react-router-dom';
  4. import { nomatch } from '@choerodon/boot';
  5. function Index({ match }) {
  6. return (
  7. <Switch>
  8. <Route path="*" component={nomatch} />
  9. </Switch>
  10. );
  11. }
  12. export default inject('AppState')(Index);

启动及页面访问

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

  1. $ npm install
  2. $ npm run start

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