主应用
提供公用layout，通用组件，通用样式，主子应用通讯等方法
创建子项目
- 在当前组下创建子项目
- 使用
abc-cli创建子项目，abc init rc-micro-app，其中输入主项目名称这一项需要填写entadmin-main，输入主项目暴露在window下的变量名这一项需要填写主项目中配置的全局导出的变量EntAdmin.common - 切到创建的目录下
- 初始化之前在gitlab创建的子项目
关于开发
直接运行npm run dev，开始开发
关于iconfont
在iconfont的项目中直接复制Font Class下的css路径，替换src/index.html中的路径，发布时通过配置系统更新
关于图片
通过图片上传服务上传，不要引用本地图片路径
关于样式
在src/style中定义一些全局的样式给子应用使用
关于打包
运行npm run build 测试环境
运行npm run release 线上环境
关于新增公共类库、公共组件、公共样式
新增公共类库：
- 下载公共类库的UMD版本，放在CND-statics仓库中发布
- 拿到发布后的地址，在配置中心增加类库的地址
新增公共组件：
- 在
src/export/component中开发组件 - 在
src/export/index.js和src/export/index.prod.js中导出新增的组件 - 公共组件不能使用css module，用到的scss文件需要在
src/export/index.scss和src/export/index.prod.scss中引入 - 更新
package.json的version，运行xnpm publish发布 - 通过子应用重启服务或者手动更新主应用的npm包
新增公共样式：
- 在
src/style中增加样式 - 更新
package.json的version，运行xnpm publish发布 - 通过子应用重启服务或者手动更新主应用的npm包
关于发布
打包后去发布系统发布，发布完后确认入口文件地址已经可访问，并在配置系统中修改静态资源地址
公用样式对照表
基础颜色相关样式
命名规则 与衣服的尺寸相对于 xl(非常浅) l(浅) nromal(正常) d(深) xd(非常深) brand相关的颜色请谨慎使用，只有在需要跟随省份主题色变化时才需要使用brand，否则使用caution
| 变量名 | 颜色 | 字体颜色 | 背景色 | 边框色 | hover色 |
|---|---|---|---|---|---|
| $theme | #f53939 | .c-theme | .bgc-theme | .bc-theme | .hc-theme |
| $lTheme | #FF9B9B | .c-l-theme | .bgc-l-theme | .bc-l-theme | .hc-l-theme |
| $xlTheme | #FFF4F4 | .c-xl-theme | .bgc-xl-theme | .bc-xl-theme | .hc-xl-theme |
| $brown | #C09040 | .c-brown | .bgc-brown | .bc-brown | .hc-brown |
| $lBrown | #DBC093 | .c-l-brown | .bgc-l-brown | .bc-l-brown | .hc-l-brown |
| $xlBrown | #FFFDE9 | .c-xl-brown | .bgc-xl-brown | .bc-xl-brown | .hc-xl-brown |
| $link | #517ED0 | .c-link | .bgc-link | .bc-link | .hc-link |
| $success | #46C970 | .c-success | .bgc-success | .bc-success | .hc-success |
| $warning | #F7AE30 | .c-warning | .bgc-warning | .bc-warning | .hc-warning |
| $caution | #E6564E | .c-caution | .bgc-caution | .bc-caution | .hc-caution |
| $invalid | #CBCFD6 | .c-invalid | .bgc-invalid | .bc-invalid | .hc-invalid |
| $black | #000000 | .c-black | .bgc-black | .bc-black | .hc-black |
| $dark | #262A30 | .c-dark | .bgc-dark | .bc-dark | .hc-dark |
| $xdGray | #5C626B | .c-xd-gray | .bgc-xd-gray | .bc-xd-gray | .hc-xd-gray |
| $dGray | #959BA3 | .c-d-gr ay | .bgc-d-gray | .bc-d-gray | .hc-d-gray |
| $gray | #CBCFD6 | .c-gray | .bgc-gray | .bc-gray | .hc-gray |
| $lGray | #E9ECF0 | .c-l-gray | .bgc-l-gray | .bc-l-gray | .hc-l-gray |
| $xlGray | #F7F8F9 | .c-xl-gray | .bgc-xl-gray | .bc-xl-gray | .hc-xl-gray |
| $xxlGray | #FBFBFC | .c-xxl-gray | .bgc-xxl-gray | .bc-xxl-gray | .hc-xxl-gray |
| $white | #FFFFFF | .c-white | .bgc-white | .bc-white | .hc-white |
基础样式
| 类名 | 说明 |
|---|---|
| .relative .absolute .fixed .static | 定位 |
| .db .dib .di .dn | display相关 |
| .fl .fr .fn | float相关 |
| .normal .b | font-weight相关 |
| .tl .tr .tc .tj | text-align相关 |
| .v-base .v-mid .v-top .v-btm | vertical-align相关 |
| .top-0 .bottom-0 .left-0 .right-0 | top:0;bottom:0;left:0;right:0; |
| .fullscreen | 占满外容器 |
| .cf | 浮动清除 |
| .ellipsis | 单行文字省略 |
| .ellipsis-line-2 .ellipsis-line-3 | 多行文字省略(见mixin) |
| .f30 .f24 .f20 .f18 .f16 .f14 .f13 .f12 | 字号大小 |
| .m-#{x} .ml-#{x} .mr-#{x} .mt-#{x} .mb-#{x} | 四向外边距(以2px为步进值，第一个设置四边) |
| .p-#{x} .pl-#{x} .pr-#{x} .pt-#{x} .pb-#{x} | 四向内边距(以2px为步进值，第一个设置四边) |
| .w#{x} .h#{x} | 宽高(以2px为步进值) |
| .w200 .w300 .w400 | 基础预定宽度，顾名思义 |
| .w-#{x} | 宽(以10%为步进值) |
| .h-100 | 高100% |
| .lh#{x} | 行高(以2px为步进值) |
| .border | 阴影圆角边框 |
| .ba .bl .bt .br .bb .bn |
ba设置四边边框，其他分别设置单边边框 bn无边框 |
| .cur-p .cur-d .cur-disable | 鼠标手型 pointer default no-allowed |
| .ov-a .ov-h .ov-s | 内容溢出相关样式 auto hidden scroll |
| flex相关的样式 | 详细看src/style/reset.scss文件 |
公共组件列表
具体请看src/export/