# eiip

**Repository Path**: ay8yt/eiip

## Basic Information

- **Project Name**: eiip
- **Description**: 10个字10个字10个字10个字
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-11-10
- **Last Updated**: 2022-11-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# EIIP

## 项目初始化
```
npm install
```

### 启动项目
```
npm run serve
```

### 打包项目
```
npm run build
```

### 导出webpack文件
```
#导出开发配置
vue inspect > output.js
#导出生产配置
vue inspect --mode production > output.prod.js
```

### 在本地测试时的注意事项
1. 恢复App.vue中有关临时登录的代码
2. 注释掉router/index.js中的路由守卫


### 任务分配
## 宋佳盟 
1. 注册

## 李亚波
1. 开发者认证,
2. 开发者认证模板管理
3. 资源申请
4. 工单管理

## 尹涛
1. 单点登录
2. 权限判断
3. 我的消息
4. 个人中心
5. 账号审批
6. 系统认证
7. 日志管理
8. 我的资源
9. IaaS平台资源管理
10. 文档管理
11. 多租户管理
12. 组织用户管理
13. 角色权限管理,
14. 系统管理-组织用户管理
15. 系统管理-角色权限管理
16. 社区论坛（集成）
17. 首页（集成）
18. 帮助中心（集成）
19. 应用商店（集成）


### 项目结构及其它说明



```bash
project
├---public
|    ├---js
|    |    ├--lodash.js #loadash通用库
|    ├---index.html #最终html页面
├---src 
|    ├---assets #动态资源目录
|    |    ├--css #通用CSS文件 
|    |    ├--font #本地图标库（通常采用远程加载）
|    |    ├--img #通用图片资源
|    ├---components #通用组件目录
|    |    ├--common #业务无关通用组件
|    |    ├--project #当前项目通用组件
|    |    |    ├--Crumbs.vue #面包屑组件
|    |    |    ├--NavBar.vue #顶部导航组件
|    |    |    ├--Result.vue #审核提交结果组件
|    ├---router #路由目录
|    |    ├--index.js #路由配置
|    ├---store #vuex仓库目录
|    |    ├--index.js #仓库实例
|    |    ├--xxx.js #仓库模块
|    |    ├--yyy.js #仓库模块
|    |    ├--zzz.js #仓库模块
|    ├---util #工具函数目录
|    |    ├---request.js #axios请求封装
|    ├---views #页面目录
|    |    |    ├--development #开发者社区
|    |    |    |    ├--CertApply.vue #开发者认证申请
|    |    |    |    ├--CertInfoManagement.vue #开发者认证模板管理
|    |    |    |    ├--Community.vue #开发者社区（集成）
|    |    |    |    ├--WorkOrderDetail.vue #开发者认证工单详情
|    |    |    |    ├--WorkOrderManagement.vue #开发者认证工单管理
|    |    |    ├--docManagemrnt #文档管理模块
|    |    |    |    ├--List.vue #列表页
|    |    |    ├--helpCenter #帮助中心
|    |    |    |    ├--helpCenter.vue #帮助中心首页
|    |    |    ├--helpCenterManagement #帮助中心管理
|    |    |    |    ├--List.vue #帮助中心管理配置中心
|    |    |    ├--homePageManagement #首页管理
|    |    |    |    ├--List.vue #首页管理配置中心
|    |    |    ├--login #登录注册
|    |    |    |    ├--Login.vue #登录页面
|    |    |    |    ├--Register.vue #注册页面
|    |    |    ├--myResources #我的资源
|    |    |    |    ├--List.vue #列表页
|    |    |    ├--resourceApply #资源申请模块
|    |    |    |    ├--List.vue #资源申请工单列表
|    |    |    |    ├--WorkOrderDetail.vue #资源申请工单详情
|    |    |    |    ├--PaaSApply.vue #PaaS资源申请页
|    |    |    |    ├--IaaSApply.vue #IaaS资源申请页
|    |    |    ├--resourcesManagement #IaaS资源管理
|    |    |    |    ├--List.vue #列表页
|    |    |    ├--roleManagement #租户角色授权管理
|    |    |    |    ├--List.vue #列表页
|    |    |    |    ├--adduser.vue #用户列表（组件））
|    |    |    |    ├--accredit.vue #权限列表（组件）
|    |    |    ├--systemManagement #系统管理模块
|    |    |    |    ├--accountApproval #账户审批
|    |    |    |    |    ├--List.vue #列表页
|    |    |    |    ├--logManagement #日志管理模块
|    |    |    |    |    ├--List.vue #列表页
|    |    |    |    ├--roleManagement #系统角色授权管理
|    |    |    |    |    ├--List.vue #列表页
|    |    |    |    |    ├--adduser.vue #用户列表（组件）
|    |    |    |    |    ├--accredit.vue #权限列表（组件）
|    |    |    |    ├--systemCertification #系统认证
|    |    |    |    |    ├--List.vue #列表页
|    |    |    |    ├--userManagement #组织机构（用户）管理
|    |    |    |    |    ├--List.vue #列表页
|    |    |    ├--tenantManagement #多租户管理
|    |    |    |    ├--List.vue #列表页
|    |    |    ├--tenantManagement #租户组织机构（用户）管理
|    |    |    |    ├--List.vue #列表页
|    |    |    ├--workorderManagement #工单管理
|    |    |    |    ├--List.vue #列表页
|    |    |    ├--AppSotre.vue #应用商店（集成）
|    |    |    ├--Home.vue #首页
|    ├---App.vue #根组件
|    ├---main.js #入口文件
├---.browserslistrc #浏览器兼容配置文件（供babel等工具使用）
├---.gitignore #git提交忽略文件
├---bable.config.js #bable配置文件
├---package.json #项目配置文件
├---vue.config.js #vue配置文件
```



> ## 一些基本原则

【1】 一般原则下，如有设计图，尽量不使用第三方UI组件库，但可以引入CSS自定义样式库，例如 bootstracp自定义主题

【2】 如使用第三方组件库，需要再main.js进行[【按需引入】【全局引入】，禁止因个人需要，在页面内局部导入第三方组件库
**Ex: 正确写法** 

```bash
### main.js

import {Toast,Button} from 'vant'
```

**Ex: 不规范写法**

```bash
### detail.vue

import {Toast,Button} from 'vant' 
或者 
import vant from 'vant'
```



【3】 局部引入组件时，可以使用**驼峰命名**方式直接编写组件，或使用**中横线命名**编写，总之要保持一致
**Ex: 正确写法第一种**

```html
### detail.vue

<template>
	<div>
		<TestDefault></TestDefault>
	</div>
</template>

<script>
	import TestDefault from './views/xxx/TestDefault.vue'
	export default {
		...
		components: {
			TestDefault
		}
		...
	}
</script>
```

**Ex: 正确写法第二种**

```html
### detail.vue

<template>
	<div>
    	<test-default></test-default>
	</div>
</template>

<script>
	import TestDefault from './views/xxx/TestDefault.vue'
	export default {
		...
		components: {
			'test-default':TestDefault
		}
		...
	}
</script>
```

**Ex: 不规范写法** 

```html
### detail.vue

<template>
	<div>
    	<test-default></test-default>
	</div>
</template>

<script>
	import TestDefault from './views/xxx/TestDefault.vue'
	export default {
		...
		components: {
			TestDefault
		}
		...
	}
</script>
```



【4】统一采用ES最新语法，包括但不限于 解构赋值、箭头函数、Map集合、扩展运算等，禁止出现新老语法混用。

**Ex: 正确写法** 

```javascript
let {map, info} =  obj
let res = map.res;

### test.vue
{
    data(){
        return {
            ...
        }
    },
	methods: {
        publish() {
            this.$http({
                method: 'poost',
                url: 'xxxxxx',
                data: { ... }
            })
            .then( res => {
                
            })
            .catch( err => {
                
            })
        },
        prefill() {
            
        }
    }
}
```

**Ex: 不规范写法**

```javascript
let {map, info} =  obj
var res = map.res; //不规范

### test.vue
{
    data(){
        return {
            ...
        }
    },
	methods: {
        publish: function() { //不规范
            this.$http({
                method: 'poost',
                url: 'xxxxxx',
                data: { ... }
            })
            .then( res => {
                
            })
            .catch( function(err){ //不规范
                var _this = this; //不规范
                ...
            })
        },
        prefill() {
            
        }
    }
}
```

 



> ## VUE页面的写法规范

【1】组件各个部分声明顺序要统一标准

```
export deafult {
	name : 'xxxx',
	components: {  //优先声明使用的组件
    	xxxx
    	xxxx
    },
    data() {
    	return { ... }
    },
    created() { 
    	//页面初始数据请求统一在这里进行
    },
    mounted() {
    	//涉及页面初始DOM操作的，统一在这里执行
    },
    ....
    methods: {
    	aaaa(){ //方法说明注释写在这里，方便代码折叠时查看
    		...
    	},
    	bbbb(){ //方法说明注释写在这里，方便代码折叠时查看
    	
    	}
    },
    watch: { 
    
    }，
    computed: { //计算属性不影响代码阅读，放在最后
    	xxxxx(){
    		
    	}
    }
}
```



【2】 原则上组件的属性过多时尽量不折行，当需要折行时，将静态属性与动态属性分开

```html
 <el-select filterable class="xxxx" placeholder="请输入场馆名称"
 			v-model="formData.venueId" :popper-append-to-body="false"
       		@change="venueChanged" @click="xxxxxx">

<!-- 原则上一行能显示的，尽量不折行 -->     
## 原则上不允许写行内样式！！！
   除非在后期BUG修复阶段，更改成本过高时考虑  
<!-- 
	静态属性跟标签写在第1行，
    动态属性写在第2行
    事件写在第3行
-->     
     
```



> ## **基本封装**

1 使用**axios**进行网络请求，已进行封装，并支持jsonp，详情参见 **util/request.js**文件

2 全局引入**lodash**工具，详情参见**main.js**文件。文档地址： https://www.lodashjs.com/

3 路由 **index.js** 文件添加了全局钩子函数，可根据需要进行验证。详情参见 **router/index.js**



> ## **关于样式**

1 使用sass作为CSS预处理方案，  对于sass不熟悉者，可编写原生CSS， 但必须严格遵循sass树形结构语法

2 所有页面必须启动css module， 避免样式的冲突，全局样式写在App.vue中， 不要重复劳动

```html
<style scoped>
	...
</style>
```

3 如果第三方组件样式需要在个别页面修改，必须使用css module方式，禁止直接link或import CSS文件

**Ex: 正确写法** 

```html
### App.vue

<style>
	@import '../assets/common/base' /*全局使用的scss在App.vue中导入*/
</style>

### detail.vue

<style scoped>
	@import '../assets/xxx/detail_form'  /*局部使用的局部导入，并使用scoped*/
</style>
```

**Ex: 不规范写法**

```html
### App.vue

<style>
	@import '../assets/common/base' 
</style>

### detail.vue

<style scoped>
    @import '../assets/common/base' /*局部再次导入通用scss*/
	@import '../assets/xxx/detail_form' 
</style>
```





> ## **关于路由router/index.js**

【1】 子路由必须保持restful风格，禁止所有子路由采用根路径访问

**Ex: 正确写法** 

```bash
### router/index.js

path: '/aaa'
component: a
children: [
	{
		path: 'bbb'
		component: b
	}
]

### 跳转方式
this.$router.push({ path：'/aaa/bbb' })
```

**Ex: 不规范写法**

```bash
### router/index.js

path: '/aaa'
component: a
children: [
	{
		path: '/bbb'
		component: b
	}
]

### 跳转方式
this.$router.push({ path：'/bbb' })
```

 

【2】路由组件使用异步加载

 **Ex: 正确写法** 

```javascript
component: () => import( /* webpackChunkName: "home" */ '../views/Home.vue')
```

 **Ex: 不规范写法** 

```javascript
import Home from '../views/Home.vue'
...
component: Home
```






> ## 关于vuex

1 使用action与mutiation，以防止出现异步操作，如有异步操作，需写在action层

3 不使用getters，不做map映射，提高组件代码的可读性

4 非全局数据禁止使用vuex存储





> ## vue.config.js

【1】启用了externals选项，包含Vue、jQuery、lodash，打包时排除在外，改由在index.html直接引入，详情参见文件内容。

【2】配置proxy代理请求前缀 /api , 所有需要代理的请求前缀必须带上 /api



> iframe通信规范及示例代码