...
|
...
|
@@ -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 |
...
|
...
|
|