对于页面倾向于ReactJs组件开发，只要前期构建好项目架构，后期很方便进行开发。
后端基于mendix进行逻辑开发。
手动进行前后端分离。
首先熟悉前端组件架构，基于antd进行开发。
然后根据视频进行后端逻辑渲染。进行测试。
整体项目架构如下所示 首先要先建立mendix项目目录 然后初始化npm。添加yo依赖 参考代码如下 其中new中的路径根据实际来写，demo是组件化后期的组件目录
执行完new之后 mendix会自动生成组件目录，
"scripts": {
"new": "yo @mendix/widget ./packages/widget/demo"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@types/big.js": "^6.0.2",
"@types/enzyme": "^3.10.8",
"@types/enzyme-adapter-react-16": "^1.0.6",
"@types/ghauth": "^3.2.0",
"@types/gulp": "^4.0.7",
"@types/gulp-change": "^1.0.0",
"@types/gulp-rename": "0.0.33",
"@types/gulp-zip": "^4.0.1",
"@types/jasmine": "^3.6.0",
"@types/jest": "^26.0.15",
"@types/mime": "^2.0.3",
"@types/node": "^14.14.6",
"@types/react": "~17.0.1",
"@types/react-dom": "~17.0.1",
"@types/react-native": "~0.63.30",
"@types/react-native-vector-icons": "^6.4.6",
"@types/react-test-renderer": "~17.0.1",
"@types/xml2js": "^0.4.5",
"yo": "^5.0.0"
}
进入目录后 参数如下 pluggable-widgets-tools 工具会自动同步比保存好的代码 生成mkr包
"scripts": {
"start": "pluggable-widgets-tools start:server",
"dev": "pluggable-widgets-tools start:web",
"build": "pluggable-widgets-tools build:web",
"lint": "pluggable-widgets-tools lint",
"lint:fix": "pluggable-widgets-tools lint:fix",
"test": "pluggable-widgets-tools test:unit:web --no-cache --ci && npm run test:e2e",
"test:unit": "pluggable-widgets-tools test:unit:web --coverage",
"test:e2e": "npx cypress open --browser chrome --e2e",
"prerelease": "npm run lint",
"release": "pluggable-widgets-tools release:web"
},