最近在开发两个CRM项目,像这种CRM其实很多组件都是可以公用的,比如封装的表格、表单、布局、封装的请求等等。如果分开两种情况来做的话,那相当于增加了double的工作量,作为一个21世纪的佛系猿来说: “不会偷懒的程序猿不是好程序猿(褒义)”,所以就想到了多页面来开发,好处当然是多多啦,共用公共组件,相互之间完全解耦,想想都有点小激动。
项目地址,感兴趣的可以拉下来看看。
如果只是想看多页面是怎么配置的,可以查看我的另外一篇文章 create-react-app 多页面配置
下面挑一些重点的来说下:
entrances
每一个文件代表着一个入口(应用), 没什么好说的,代码就像单页面的入口文件一样,每添加多一个入口文件,需要重启才能有效果。
访问每个应用直接入口文件的名称加上.html
如:
http://localhost:3000/portal.html
views(核心)
基本上都围绕这个“业务层来去展开的”,我把他设计层2层,第一层是应用层,第二层是模块层,每个模块下面的根目录都可以有 api.js
router.js
mock.js
一定是在模块的根目录才有效果
这3个文件的作用分别是:
api.js
: 该模块下的API请求接口
router.js
: 该模块下的路由表
mock.js
: 该模块下的Mock数据
以上3个文件名称是不能更改的,它们分别对应 src/services
src/routers
src/mocks
文件夹
services(api的中央机构)
每个文件对应入口文件,遍历该应用模块下的所有 api.js
文件
mocks(mock的中央机构)
每个文件对应入口文件,遍历该应用模块下的所有 mock.js
文件
routers(router表的中央机构)
每个文件对应入口文件,遍历该应用模块下的所有 router.js
文件
components
整个项目的公共组件, 这里的组件应该是不涉及到业务逻辑的。
layouts
整个项目的布局(主题)组件, 它也可以归纳到公共组件去,但是我把它单独出来了。
build(打包的程序)
每一个文件夹都代表着一个程序,每次打包只能打包一个程序,打包命令如下:
set BUILD_ENV=portal&& node scripts/build.js
但是我们是不是可以写在 package.json
的script写一个命令呢,机智如我[\嘿嘿]
{
"build": "set BUILD_ENV=portal&& node scripts/build.js && set BUILD_ENV=user&& node scripts/build.js"
}
这样子就可以运行,就会依次打包portal、user
npm run build
以上是对这个框架的一个简单的介绍,详细的可以把代码拉下来看看,只要有点基础的人,应该都能看的懂这个吧。如果觉得有用,或者有更好的实践的话,可以贡献下你的代码。
目标: 只为让前端早点下班