基于Vue2.0 SPA结构的有货前端开发框架
开发文档 （试行版本）
框架技术
Vue@2.0 + vue-router + iView + axios
目录结构
-app #前端开发目录
---build #webpack配置文件
---components #组件目录
------global #全局注册的公用组件
------[modules] #业务模块用的组件，在模块下已功能类别划分文件夹，比如filter-select(列表查询组件)、table-cell(单元格组件)，具体组件明明建议以select-[component]、cell-[component]命名
---config #前端配置文件
---directives #指令文件夹
---filters #过滤器
---images #图片
---pages #业务代码
-----[modules] #已业务模块划分文件夹
-------[pages] #已业务模块中页面划分文件夹
---------index.js #页面的路由注册入口
-------index.js #业务模块的路由注册入口
-----app.vue #最外层组件
-----index.js #路由注册入口
-----layout.vue #layout文件和全局样式
---plugins #插件
---servies #业务数据获取、数据处理、业务逻辑等
-----[modules]-service
---app.js #入口文件
---index.html #模板页
-server #后端开发目录代码规范
1.文件、组件命名规范
1.文件命名小写，使用-分割单词
2.组件name大驼峰式命名
3.变量名小驼峰命名2.页面规范：
template
<layout-body>
<layout-filter>
...列表筛选区域
<filter-item :label="">
...筛选查询项
<Input v-model="skn" placeholder=""></Input>
</filter-item>
</layout-filter>
<layout-action>
...批量操作区域
<Button type="error" @click="batchSetOffSale">下架</Button>
</layout-action>
<layout-list>
...表格列表区域
<Table></Table>
</layout-list>
</layout-body>script
import {SelectBrand, SelectCategory} from 'components/select'; // 建议以{}的形式引入组件
export default {
data() {
return {};
},
created() { // 需要在页面初始化执行的周期事件
},
beforeDestory() { // 需要在页面销毁时执行的周期事件
},
methods() {
xxx() {
}
}
components: {}
}style
lang=scss
<style lang="scss">
.list-page {
float: right;
}
</style>3.路由规范：
用webpack的code split lazy方式加载页面模块，chunkname为[module].[page]
路由meta元信息:
{
pageName: '[页面名称]'
}export default {
path: '/onsale.html',
name: 'onsale',
component: () => import(/* webpackChunkName: "product.onsale" */'./onsale),
meta: {
pageName: '在售商品'
}
};4.组件划分规范
1.全局公共组件目录为components/global，该文件夹内组件会在Vue实例化前自动注册
2.模块组件在components/[modules]中创建
3.页面级无复用性组件在app/pages/[modules]/[pages]/components文件夹创建
开发流程
1.创建页面及入口文件
在apps/pages/[modules]中创建页面文件夹，创建[page].vue及其入口index.js文件，[page].vue为页面业务代码，index.js为入口和路由代码并在[modules]文件夹下的入口文件添加页面的引用。
2.数据获取操作
在页面业务中需要获取数据的逻辑或者需要做数据处理的统一在apps/services下创建service文件处理，涉及到需要调用的接口需要在server/common/api-domain注册：
// 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的属性名，并且加上前缀/Api，例如: '/Api/platform/queryShopsByAdminPid'
3.组件创建
全局组件创建在components/global
业务组件创建在components/[modules]
页面级无复用性组件在app/pages/[modules]/[pages]/components文件夹创建
CLI
项目初始化，执行npm i和生成dll的操作（clone项目之后执行）
npm run init启动node dev开发模式
npm run dev启动前端dev开发模式
npm run static编译静态资源文件
npm run build代码生成器(生成基础带筛选条件的基础模板页面)
npm run code -module=[modulename] -page=[pagename]全局js语法检查和css语法检查
npm run lint-jsnpm run lint-css