前端项目。通过webpack预处理vue, scss, js等模块，输出静态h5文件（html, css, js)
线上的两个域名 http://www.finupcloud.com/ http://cloud.renmaitech.com/
cas认证的两个域名 https://cas.renmaitech.com/puhui-cas/login https://cas.finupgroup.com/puhui-cas/login
平台配置
运行平台：node (v8.9.4)，建议通过nvm安装
安装全局依赖包yarn: `npm install yarn -g`
修改npm registry: `npm config set registry https://registry.npm.taobao.org`
安装全局依赖包pm2: `npm install pm2 -g`
本地开发
0. 安装nvm 选择node版本为v8.9.4(nvm install 8.9.4)
1. 初始化submodule（只需运行一次）: git submodule init
2. 更新submodule: git submodule update
3. 添加~/.yarnrc配置参考(https://github.com/webclipper/web-clipper-wxapp/blob/master/.yarnrc)
4. 更新依赖包：yarn
5. 修改后台服务接口（可选）：修改文件/fe-paas/build/webpack.dev.conf.js的/j-api/paas/ 指向
6. 本地运行：npm run dev
生产部署
yarn && git submodule init && git submodule update
npm run build
// 存放生成文件的目录：deploy/fe-paas/dist
生成静态文件：npm run build:dev（针对dev环境）, npm run build:test（针对测试环境）
├── app-galaxy，spa项目
│ ├── assets（工具文件夹，只在app-galaxy中使用）
│ │ ├── css
│ │ │ ├── common.scss（通用样式库）
│ │ │ └── fonts（自定义字体）
│ │ │ ├── my-icons.css
│ │ │ ├── my-icons.js
│ │ │ └── my-icons.woff
│ │ ├── js
│ │ │ ├── net.js（网络请求相关父类，存放网络请求的通用操作）
│ │ │ ├── store，vuex store父类
│ │ │ │ ├── helper.js（storeHelper父类提供多个页面通用的操作vuex数据的接口）
│ │ │ │ ├── index.js（vuex入口文件）
│ │ │ │ └── modules
│ │ │ │ └── global.js
│ │ │ ├── url.js（url父类，url通用操作，比如请求端口）
│ │ │ └── utils.js（js常用工具，如日期格式化）
│ │ ├── libs
│ │ │ └── components（vue组件打包，通过webpackChunkName，以独立的方式在前端加载，以便前端缓存，参考app-galaxy/profile.js）
│ │ │ ├── docs.js
│ │ │ └── profile.js
│ │ └── static（静态文件，会通过copy-webpack-plugin拷贝到dist/assets目录）
│ │ ├── files
│ │ │ └── ip白名单.xlsx
│ │ └── imgs（图片文件，按页面分到相应目录）
│ │ ├── default-icon.png
│ │ ├── finup-cloud-2.png
│ │ ├── finup-cloud.png
│ │ ├── index（主页用到的图片）
│ │ │ ├── communication.png
│ │ │ ├── feature-icons.png
│ │ │ ├── poster.png
│ │ │ └── storage.png
│ │ └── profile（控制台页面用到的图片）
│ │ └── create-an-app.png
│ ├── components（多个页面公用的组件）
│ │ ├── header-profile.vue
│ │ └── header.vue
│ ├── config（配置文件）
│ │ ├── network.js（axios网络配置）
│ │ └── vue.js（vue配置，将常用工具挂载到Vue.prototype上，以便在每个vue页面都可以调用）
│ ├── profile（控制台页面）
│ │ ├── net（网络请求相关）
│ │ │ ├── net.js（当前页面用到的ajax请求，继承assets/js/net.js，挂载到Vue.prototype.$net）
│ │ │ └── url.js（当前页面用到的url，继承assets/js/url.js，挂载到Vue.prototype.$url）
│ │ ├── router.js（路由逻辑）
│ │ ├── store（vuex store相关）
│ │ │ ├── index.js
│ │ │ ├── modules
│ │ │ │ ├── app.js
│ │ │ │ ├── tmp.js
│ │ │ │ └── user.js
│ │ │ └── store-helper.js（vuex store常用操作接口，挂载到Vue.prototype.$storeHelper）
│ │ └── pages（页面布局相关）
│ │ ├── profile.vue（控制台主页）
│ │ ├── route.js（路由配置）
│ │ └── profile
│ │ ├── components（profile页面用到的组件）
│ │ │ ├── dialog4log.vue
│ │ │ ├── image-selector.vue
│ │ │ ├── version-condition-filter.vue
│ │ │ └── version-selector.vue
│ │ ├── app（应用管理）
│ │ │ ├── add.vue
│ │ │ └── main.vue
│ │ ├── domain（外网域名）
│ │ │ ├── main.vue
│ │ │ └── white-list.vue
│ │ ├── instance（实例列表）
│ │ │ └── main.vue
│ │ ├── log（日志中心）
│ │ │ ├── deploy.vue
│ │ │ ├── main.vue
│ │ │ └── run.vue
│ │ ├── monitor（应用监控）
│ │ │ └── main.vue
│ │ ├── oauth（Access Key管理）
│ │ │ ├── key.vue
│ │ │ ├── main.vue
│ │ │ └── url.vue
│ │ ├── service（服务管理）
│ │ │ ├── add.vue
│ │ │ └── main.vue
│ │ ├── utils（profile页面用到的逻辑）
│ │ │ └── app-props.js
│ │ └── work-order（审批管理）
│ │ ├── components（审批管理页面用到的组件）
│ │ │ ├── feature.vue
│ │ │ └── show-detail.vue
│ │ ├── list.vue（工单列表）
│ │ ├── main.vue（审批管理主页面）
│ │ ├── todo（待办工单子页）
│ │ │ ├── accept.vue（验收工单）
│ │ │ ├── add.vue（添加工单）
│ │ │ ├── deploy.vue（部署工单）
│ │ │ ├── modify.vue（修改工单）
│ │ │ └── test.vue（测试工单）
│ │ ├── todo.vue（待办工单页）
│ │ └── utils（工具逻辑）
│ │ ├── data-format.js
│ │ └── work-order-props.js
│ ├── profile.js（登录页面Vue配置入口）
│ ├── docs（帮助文档页面）
│ │ ├── docs.vue
│ │ └── net（网络请求相关）
│ │ ├── net.js
│ │ └── url.js
│ ├── docs.js（帮助文档的Vue配置入口）
│ ├── index（主页）
│ │ └── index.vue
│ ├── index.js（主页的Vue配置入口）
│ ├── login（登录页面）
│ │ ├── login.vue
│ │ └── net（网络请求相关）
│ │ ├── net.js
│ │ └── url.js
│ ├── login.js（登录页面配置入口）
│ ├── terminal（实例终端页面）
│ │ ├── net
│ │ │ ├── net.js
│ │ │ └── url.js
│ │ └── terminal.vue
│ ├── terminal.js（实例终端页面Vue配置入口）
│ ├── user（用户中心）
│ │ ├── net（用户中心页网络请求相关）
│ │ │ ├── net.js
│ │ │ └── url.js
│ │ └── pages（页面）
│ │ ├── router.js（路由配置）
│ │ ├── user（用户中心子页面）
│ │ │ ├── info.vue
│ │ │ └── operation.vue
│ │ └── user.vue（用户中心首页）
│ └── user.js
├── assets（（工具文件夹，所有项目通用））
│ ├── css
│ │ ├── fix-style.scss
│ │ ├── highlight.scss
│ │ ├── markdown.scss
│ │ ├── mixin.scss
│ │ └── mixins
│ │ └── _vendor-prefixes.scss
│ ├── js
│ │ └── utils.js
│ ├── libs
│ │ ├── components
│ │ │ ├── basic.js
│ │ │ └── element-ui-fix.scss
│ │ └── debug
│ │ ├── browser.js
│ │ ├── debug.js
│ │ ├── index.js
│ │ └── node.js
│ └── static
│ └── libs
│ ├── gateone.js
│ └── lodash
│ ├── lodash.core.js
│ └── lodash.min.js
├── build（webpack预处理配置文件）
│ ├── build.js
│ ├── check-versions.js
│ ├── config
│ │ ├── dev.env.js
│ │ ├── index.js
│ │ ├── index.tpl
│ │ ├── prod.env.js
│ │ └── test.env.js
│ ├── cooking.conf.js
│ ├── utils.js
│ ├── vue-loader.conf.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── element-ui（独立的git项目，地址：http://gitlab.puhuitech.cn/paas-fe/element-ui，作为该git项目的submodule）
├── dist（预处理输出目录，改文件夹下的内容会打到@paas/fe-paas包）
│ └── package.json（发包配置文件，发包指令：npm publish）
├── package.json
└── yarn.lock
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;
Vue.prototype.$url
/fe-paas/app-galaxy/assets/css/common.scss
主要控制
盒子模型的内外边距，用于局部空白调整
类名命名规则 padding的首字母p + (all,left,right,top,bottom) 的首字母 (a,l,r,t,b) 组合, 其中 x 为水平方向左和右， y 为垂直方向上和下, (0,1,2,3,4,5) 表示像素 (0px,4px, 8px, 16px, 24px, 48px)
.pa-0,.pa-1,.pa-2,.pa-3,.pa-4,.pa-5
.pt-0,.pt-1,.pt-2,.pt-3,.pt-4,.pt-5
.pb-0,.pb-1,.pb-2,.pb-3,.pb-4,.pb-5,
.pl-0,.pl-1,.pl-2,.pl-3,.pl-4,.pl-5,
.pr-0,.pr-1,.pr-2,.pr-3,.pr-4,.pr-5,
.px-0,.px-1,.px-2,.px-3,.px-4,.px-5,
.py-0,.py-1,.py-2,.py-3,.py-4,.py-5,
类名命名规则 取margin的首字母 m, 以及 (left,right,top,bottom) 的首字母 (l,r,t,b) 组合, 其中 x 为水平方向左和右， y 为垂直方向上和下, (0,1,2,3,4,5) 表示像素 (0px,4px, 8px, 16px, 24px, 48px)
.mt-0,.mt-1,.mt-2,.mt-3,.mt-4,.mt-5,
.mb-0,.mb-1,.mb-2,.mb-3,.mb-4,.mb-5,
.ml-0,.ml-1,.ml-2,.ml-3,.ml-4,.ml-5,
.mr-0,.mr-1,.mr-2,.mr-3,.mr-4,.mr-5,
.mx-0,.mx-1,.mx-2,.mx-3,.mx-4,.mx-5,
.my-0,.my-1,.my-2,.my-3,.my-4,.my-5,
/* space补件 */
.mx-auto {
margin-left: auto !important;
margin-right: auto !important;
}
@each $level,$space in (0, 0),(1, 4),(2, 8)(3, 16),(4, 24),(5, 48) {
.pa-#{$level} {
padding: #{$space}px !important;
}
.pt-#{$level} {
padding-top: #{$space}px !important;
}
.pb-#{$level} {
padding-bottom: #{$space}px !important;
}
.pl-#{$level} {
padding-left: #{$space}px !important;
}
.pr-#{$level} {
padding-right: #{$space}px !important;
}
.px-#{$level} {
padding-left: #{$space}px !important;
padding-right: #{$space}px !important;
}
.py-#{$level} {
padding-top: #{$space}px !important;
padding-bottom: #{$space}px !important;
}
.mt-#{$level} {
margin-top: #{$space}px !important;
}
.mb-#{$level} {
margin-bottom: #{$space}px !important;
}
.ml-#{$level} {
margin-left: #{$space}px !important;
}
.mr-#{$level} {
margin-right: #{$space}px !important;
}
.mx-#{$level} {
margin-left: #{$space}px !important;
margin-right: #{$space}px !important;
}
.my-#{$level} {
margin-top: #{$space}px !important;
margin-bottom: #{$space}px !important;
}
}