一.开发环境
node
yarn
npm install -g yarn
yarn add package-name
yarn add -D package-name
nrm
npm install -g nrm
yarn global add nrm
vscode 插件
ext install dsznajder.es7-react-js-snippets
ext install esbenp.prettier-vscode
二.开发说明
2.1 代码样式
尽量使代码看起来结构清晰,避免使用太多折行 https://github.com/ant-design/ant-design-pro/blob/master/src/layouts/BasicLayout.tsx https://github.com/ant-design/ant-design-pro/blob/master/config/config.ts
2.2 公共组件的使用
yarn add antd-component
https://github.com/ArvinXie/antd-component
;
2.3 icon-font 的使用
1.通过https://www.iconfont.cn 统一管理项目图标,
2.不同项目创建对应的图标项目并邀请相关人员参与
3.通过 config/defaultSettings.js 配置 iconfontUrl
4.route 配置中直接使用 icon-图标名称
path: '/ware' name: '标题优化' icon: 'icon-youhua' component: './ware'
5.页面中直接使用项目组件中的 Icon 组件
;
2.4 不涉及生命周期的使用函数式写法
; const username = props; const balance setBalance = ; return <div onclick= > usename balance </div> ;;
结合 dva
; user loading { const user loading dispatch = props; const balance setBalance = ; const editorModel = ; return <div onclick= > username balance </div> ;};
2.5 model service 放置位置 及写法
放置位置
1.公共 Model 放置在 src/models 文件夹内 如src/models/user.js
2.页面级 Model 放置在 src/pages/页面 文件夹内 如src/pages/ware/models/ware.js
model 的写法 1.不涉及分页查询结果数据时 参考 src/models/user.js
2.涉及分页查询数据时 参考 src\pages\Ware\models\ware.js
services 的写法
service 统一放置在 src\services\index.js 中, 文件命名方式:页面组名称+谓词 如:wareSearch wareDetail ...
注意:如果项目非常大可以把service拆分到页面组文件夹
如:src\pages\Ware 文件夹下面创建 service.js
2.6components 放置位置
1.系统通用组件放置在 src\components 文件夹内
2.页面组件放置在 src\pages\页面文件夹\components
三.项目发布
系统前端资源存放在七牛云
1.在七牛云配置好存储空间
2.把七牛存储空间绑定的域名配置到:config\config.js 的publicPath处,
3.把 key sercet bucket 配置到 scripts\publish.js 的相应位置 然后执行。
yarn run pub
Install-Package JobHost -Version 1.0.0