头号交易前端架构

整体使用vue-cli3构建

框架选用vue全家桶 + sass + element-ui

代码规范强制要求使用 eslint-airbnb 规范

项目分为架构层，业务层和视图层：

  • 架构层需要处理请求封装，请求中断，异常处理，公用函数封装，全局sass变量，登陆状态判断，权限的路由拦截等。

  • 业务层对应BFF层，包括数据存储和视图层所需要的数据的返回处理，前期也负责mock数据的返回。(未应用)

    • 视图层分为3部分，组件部分：

      • 凡是超过1次复用的都需要抽成组件。
      • sass公用部分。
      • 禁止在App.vue文件进行ui框架的全局样式覆盖。

    • 视图层布局部分：

      • 公用header，nav，footer部分相应的逻辑应在该部分处理。
      • 全局小工具也应在该部分处理。

    • 视图层具体页面：

      • 对应高保真。
      • 多tab的情况需用文件夹包裹整页内容。
airbnb详解 前端开发规范

基于开发习惯, 为以下几点做了处理

rules: {  'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',  'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',  'no-multiple-empty-lines': [1, { max: 2 }], // 空行最多不能超过2行  'no-plusplus': 'off', // 一元运算符  'guard-for-in': 'off', // 遍历  'no-prototype-builtins': 'off', // 从实例对象调用方法  'no-restricted-syntax': 'off',  'no-param-reassign': 'off', // 重新分配  'class-methods-use-this': 'off'}

目录结构

┌─public│ ├─favicon.ico│ └─index.html├─src│ ├─assets│ │ ├─img // 图片│ ├─components│ │ ├─common // 公用组件(例: 步骤条/票据详情等)│ │ ├─containers // 外层容器(例: 前台容器Home, 后台容器Backstage)│ │ ├─layout // 布局组件(例: 前台header, 前台footer)│ │ ├─views // 页面 (下方是例子)│ │ │ │ ├─BuyerOrder // 买方订单│ │ │ │ │ ├─common // 组件调用的公用组件│ │ │ │ │ │ ├─filter.vue // 筛选条件组件│ │ │ │ │ ├─component // 买方订单用到的组件│ │ │ │ │ │ ├─BuyerOrderListAll.vue│ │ │ │ │ │ ├─BuyerOrderListFail.vue│ │ │ │ │ │ ├─BuyerOrderListNotSigned.vue│ │ │ │ │ │ ├─BuyerOrderListPlatformProcessing.vue│ │ │ │ │ │ ├─BuyerOrderListSuccess.vue│ │ │ │ │ │ ├─BuyerOrderListUnpaid.vue│ │ │ │ │ │ └─BuyerOrderListUnreviewed.vue│ │ │ │ │ └─BuyerOrderList.vue // 买方订单对外展示的页面, 需注册到路由│ ├─httpConfig // 请求封装│ │ └─http.js│ ├─style // 样式│ │ ├─base.scss // css重置样式│ │ ├─common.scss // 公用样式│ │ ├─element-variables.scss // 修改主题│ │ └─project.scss // 项目公用样式│ ├─utils // 函数库│ │ ├─calc.js // 计算函数(包括金额格式化, 精准计算等)│ │ ├─city.js // 省市区json│ │ ├─cookie.js // cookie封装│ │ ├─platform.js // 项目用的公用函数(瑕疵跳转等)│ │ └─secret.js // 加解密函数封装│ ├─App.vue│ ├─main.js // 入口文件, 权限判断, 常用方法挂载│ ├─router.js // router│ └─store.js // vuex(只做公用处理, 比如个人信息存储, 公司地址等信息)├─tests // 自动化测试│ ├─unit│ │ ├─.eslintrc.js│ │ └─example.spec.js├─.browserslistrc├─.editorconfig├─.eslintrc.js // eslint配置文件├─.gitignore // git忽略目录├─.prettierrc.json // 代码格式化配置├─babel.config.js├─jest.config.js├─package-lock.json├─package.json├─postcss.config.js├─README.md└─vue.config.js // 项目配置, webpack配置