Authored by 陈峰

开发规范

Showing 1 changed file with 56 additions and 25 deletions
... ... @@ -7,7 +7,7 @@ Vue@2.0 + vue-router + iView + axios
### 目录结构
```
```nginx
-app #前端开发目录
---build #webpack配置文件
---components #组件目录
... ... @@ -35,31 +35,12 @@ Vue@2.0 + vue-router + iView + axios
### 代码规范
#### 1.文件、组件命名规范
1.文件命名小写,使用-分割单词
2.
1.文件命名小写,使用-分割单词
#### 1.路由规范:
用webpack的code split方式加载页面模块,chunkname为[module].[page]
2.组件name大驼峰式命名
路由meta元信息:
``` js
{
pageName: '[页面名称]'
}
```
``` js
const page = r => require.ensure([], () => r(require('./onsale')), 'product.onsale');
3.变量名小驼峰命名
export default {
path: '/onsale.html',
name: 'onsale',
component: page,
meta: {
pageName: '在售商品'
}
};
```
#### 2.页面规范:
template
... ... @@ -120,7 +101,57 @@ lang=scss
</style>
```
#### 3.组件划分规范
#### 3.路由规范:
用webpack的code split方式加载页面模块,chunkname为[module].[page]
路由meta元信息:
``` js
{
pageName: '[页面名称]'
}
```
``` js
const page = r => require.ensure([], () => r(require('./onsale')), 'product.onsale');
export default {
path: '/onsale.html',
name: 'onsale',
component: page,
meta: {
pageName: '在售商品'
}
};
```
#### 4.组件划分规范
1.全局公共组件目录为components/global,该文件夹内组件会在Vue实例化前自动注册
2.模块组件在components/[modules]中创建
\ No newline at end of file
2.模块组件在components/[modules]中创建
### 开发流程
#### 1.创建页面及入口文件
在apps/pages/[modules]中创建页面文件夹,创建[page].vue及其入口index.js文件,[page].vue为页面业务代码,index.js为入口和路由代码并在[modules]文件夹下的入口文件添加页面的引用。
#### 2.数据获取操作
在页面业务中需要获取数据的逻辑或者需要做数据处理的统一在apps/services下创建service文件处理,涉及到需要调用的接口需要在server/common/api-domain注册:
``` js
// api调用列表
let domainApis = {
erp: {
login: '/erp-gateway-web/account/profile/login',
getPurview: '/erp-gateway-web/account/menu/query_by_pid'
},
platform: {
queryShopsByAdminPid: '/SellerShopController/queryShopsByAdminPid'
}
};
```
前端调用接口路径为domainApis的属性名,例如: '/platform/queryShopsByAdminPid'
#### 3.组件创建
业务组件创建在components/[modules]
全局组件创建在components/global
\ No newline at end of file
... ...