Xm-entadmin-main NPM

[](https://github.com/standar

主应用

提供公用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 线上环境

关于新增公共类库、公共组件、公共样式

新增公共类库： 1. 下载公共类库的UMD版本，放在CND-statics仓库中发布 2. 拿到发布后的地址，在配置中心增加类库的地址

新增公共组件： 1. 在src/export/component中开发组件 2. 在src/export/index.js和src/export/index.prod.js中导出新增的组件 3. 公共组件不能使用css module，用到的scss文件需要在src/export/index.scss和src/export/index.prod.scss中引入 4. 更新package.json的version，运行xnpm publish发布 5. 通过子应用重启服务或者手动更新主应用的npm包

新增公共样式： 1. 在src/style中增加样式 2. 更新package.json的version，运行xnpm publish发布 3. 通过子应用重启服务或者手动更新主应用的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/

主应用