目录结构

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

推荐的目录结构如下：

.
├── src
    ├── api
    |   |—— dto // 配置接口入参声明
    |   |—— vo // 配置接口响应数据
    │   ├── modules 
    │   │   ├── common-api.ts
    │   ├── axios.ts 统一请求，拦截及响应均在此处理
    │	  ├── index.ts 对modules的请求进行统一处理
    ├── assets
    │   ├── imgs   项目图片存放目录
    │   ├── data
    │   │   └── dict.ts
    ├── components  项目组件存放目录
    ├── directives  全局自定义指令
    ├── router   路由配置
    ├── store    pinia数据处理 
    ├── styles   样式
    ├── utils    公共常用方法目录
    ├── views    页面存放目录
    ├── app.vue  项目主入口页面
    ├── dict-config.ts
    └── main.ts 项目主入口文件
    

注意

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

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

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

• src/dict-config.ts: 字典包配置。

关于请求的优化，前往微信公众号【爆米花小布】

请求接口配置

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

//获取字典接口 
export function getDictCodeApi(options) {
  var promise = new Promise(function(resolve) {
    const dictCodeList = {
      "FRUITS": [
        {
          "value": "1",
          "label": "西瓜"
        },
        {
          "value": "2",
          "label": "草莓"
        },
        {
          "value": "3",
          "label": "莲雾"
        },
        {
          "value": "4",
          "label": "荔枝"
        },
        {
          "value": "5",
          "label": "青梅"
        },
        {
          "value": "6",
          "label": "芒果"
        },
        {
          "value": "7",
          "label": "火龙果"
        },
        {
          "value": "8",
          "label": "山竹"
        },
        {
          "value": "9",
          "label": "橙子"
        },
        {
          "value": "10",
          "label": "人参果"
        }
      ],
      "SPORTS": [
        {
          "value": "1",
          "label": "篮球"
        },
        {
          "value": "2",
          "label": "足球"
        },
        {
          "value": "3",
          "label": "乒乓球"
        },
        {
          "value": "4",
          "label": "羽毛球"
        },
        {
          "value": "5",
          "label": "网球"
        },
        {
          "value": "6",
          "label": "保龄球"
        },
        {
          "value": "7",
          "label": "水球"
        },
        {
          "value": "8",
          "label": "台球"
        },
        {
          "value": "9",
          "label": "跑步"
        },
        {
          "value": "10",
          "label": "游泳"
        }
      ],
      "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": {
        dictData: codeData,
        dictVersion: "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.ts **

export default {
  SEX: [
    {
      value: "1",
      label: "男"
    },
    {
      value: "2",
      label: "女"
    },
    {
      value: "3",
      label: "未知"
    }
  ],
  niceOrBad: [
    {
      "value": "0",
      "label": "好"
    }, {
      "value": "1",
      "label": "差"
    }
  ],
  area: [
    {
      "id": "110000",
      "parentId": "0",
      "label": "北京"
    },
    {
      "id": "110100",
      "parentId": "0",
      "label": "北京市"
    },
    {
      "id": "110101",
      "parentId": "110100",
      "areaName": "东城区"
    },
    {
      "id": "110102",
      "parentId": "110100",
      "areaName": "西城区"
    },
    {
      "id": "110105",
      "parentId": "110100",
      "areaName": "朝阳区"
    }
  ]
}

全局字典配置

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

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