最近在开发两个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




以上是对这个框架的一个简单的介绍,详细的可以把代码拉下来看看,只要有点基础的人,应该都能看的懂这个吧。如果觉得有用,或者有更好的实践的话,可以贡献下你的代码。



目标: 只为让前端早点下班