目录结构

好的目录结构能够让项目更加简单易读，本篇文章推荐大家使用如下目录结构，让项目结构更加清晰明了。

推荐的目录结构如下：

.
├── src
    ├── api
    │   ├── modules 
    │   │   ├── common-api.js
    │   ├── axios.js 统一请求，拦截及响应均在此处理 防止重复请求  加载动画等
    │	├── index.js 对modules的请求进行统一处理
    ├── assets
    │   ├── imgs   项目图片存放目录
    │   ├── data
    │   │   └── dict.js
    ├── components  项目组件存放目录
    ├── directives  全局自定义指令
    ├── filters  全局过滤器
    ├── mixins   全局mixins函数
    ├── router   路由配置
    ├── store    vuex数据处理 
    ├── styles   样式
    ├── utils    公共常用方法目录
    ├── views    页面存放目录
    ├── app.vue  项目主入口页面
    ├── dict-setting.js
    └──  main.js 项目主入口文件
    

注意

请留意目录名的大写，及有无s结尾

• src/api/modules/common-api.js: 用于存放项目一些公共常用接口请求。

• src/assets/data/dict.js: 存放项目固定不变字典数据。

• src/dict-setting.js: 字典包配置。

请求接口配置

**注意：以下为模拟接口请求响应数据 src/api/modules/common-api.js **

//获取字典接口 
export function getDictCodeApi(options) {
  var promise = new Promise(function(resolve) {
    const dictCodeList = {
      "AAC004": [{
        "value": "1",
        "label": "男"
      }, {
        "value": "2",
        "label": "女"
      }, {
        "value": "9",
        "label": "未说明性别"
      }],
      "STATUSHIERARCHY": [{
        "value": "5",
        "label": "Lv5认证"
      }, {
        "value": "4",
        "label": "Lv4认证"
      }, {
        "value": "3",
        "label": "Lv3认证"
      }],
      "AAC058": [{
        "value": "01",
        "label": "居民身份证(户口簿)"
      }, {
        "value": "02",
        "label": "中国人民解放军军官证"
      }, {
        "value": "03",
        "label": "中国人民武装警察警官证"
      }],
      "AAC005": [{
        "value": "01",
        "label": "汉族"
      }, {
        "value": "02",
        "label": "蒙古族"
      }, {
        "value": "20",
        "label": "傈傈族"
      }],
      "LEGAL_STATUS": [{
        "value": "000",
        "label": "锁定"
      }, {
        "value": "001",
        "label": "正常"
      }],
      "PERSON_TYPE": [{
        "value": "005",
        "label": "民营企业代表"
      },{
        "value": "004",
        "label": "个体工商户"
      }, {
        "value": "003",
        "label": "机关事业单位法人"
      }, {
        "value": "002",
        "label": "社团法人"
      }, {
        "value": "001",
        "label": "企业法人"
      }],
      "UNIT_TYPE": [{
        "value": "3",
        "label": "地税编号"
      }, {
        "value": "2",
        "label": "统一信用代码"
      }, {
        "value": "1",
        "label": "组织机构代码"
      }],
      "MCC_TYPE": [{
        "value": "1",
        "label": "农,林,牧,渔业"
      }, {
        "value": "10",
        "label": "金融业"
      }, {
        "value": "11",
        "label": "房地产业"
      }],
      "UNIT_STATUS": [{
        "value": "000",
        "label": "注销"
      }, {
        "value": "001",
        "label": "正常"
      }]
    }

    let codeData = {}

    if (options&&options.type) {
      const typeList = options.type.split(",")
      for (let i = 0; i < typeList.length; i++) {
        const type = typeList[i]
        codeData[type] = dictCodeList[type]
      }
    } else {
      codeData = dictCodeList
    }
    const data = {
      "code": 0,
      "data": {
        dictCodeList: codeData,
        version: "0.0.2"
      },
      message: "成功",
      timestamp: "1594565635",
      type: "info"
    }
    resolve(data)
  })
  return promise
}

//获取全局配置  包含版本号
export function getGlobalConfigApi() {
  return new Promise((resolve, reject) => {
    resolve({version: "0.0.2"})
  })
}

固定字典数据配置

**注意：以下为项目固定不变字典数据 src/assets/data/dict.js **

export default {
  gender: [
    {
      "value": "000",
      "label": "注销"
    }, {
      "value": "001",
      "label": "正常"
    }
  ],
  "country": [
    {
      "id": "35062400",
      "parentId": "0",
      "areaName": "诏安县"
    },
    {
      "id": "35062401",
      "parentId": "35062400",
      "areaName": "太平镇"
    },
    {
      "id": "35062402",
      "parentId": "35062400",
      "areaName": "金星乡"
    },
    {
      "id": "35062403",
      "parentId": "35062400",
      "areaName": "南诏镇"
    },
    {
      "id": "35062404",
      "parentId": "35062400",
      "areaName": "霞葛镇"
    }
  ],
  "city": [
    {
      "id": "35060000",
      "parentId": "0",
      "areaName": "漳州市"
    },
    {
      "id": "35062400",
      "parentId": "35060000",
      "areaName": "诏安县"
    },
    {
      "id": "35062401",
      "parentId": "35062400",
      "areaName": "太平镇"
    },
    {
      "id": "35062402",
      "parentId": "35062400",
      "areaName": "金星乡"
    },
    {
      "id": "35062403",
      "parentId": "35062400",
      "areaName": "南诏镇"
    },
    {
      "id": "35062404",
      "parentId": "35062400",
      "areaName": "霞葛镇"
    },
    {
      "id": "35062300",
      "parentId": "35060000",
      "areaName": "云霄县"
    },
    {
      "id": "35062301",
      "parentId": "35062300",
      "areaName": "列屿镇"
    },
    {
      "id": "35062302",
      "parentId": "35062300",
      "areaName": "陈岱镇"
    },
    {
      "id": "35062303",
      "parentId": "35062300",
      "areaName": "云陵镇"
    },
    {
      "id": "35062304",
      "parentId": "35062300",
      "areaName": "火田镇"
    }
  ]
}

全局字典配置

**注意：以下为字典包配置文件 src/dict-setting.js 更多配置详细字典包配置项>>

import {getDictCodeApi} from "@/api/modules/common-api.js"
import localDictCodes from "@/assets/data/dict.js"
export default {
    getDictCodeApi, //必传 获取字典数据接口
    localDictCodes, //选填 项目写死的字典数据
}