融易行前端

头号交易前端架构

整体使用 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 配置