目录结构

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

推荐的目录结构如下：

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

注意

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

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

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

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

关于请求的优化，可阅读此篇文章史上最全的axios请求优化 (opens new window)

请求接口配置

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

//获取字典接口 
export function getDictCodeApi(options) {
  var promise = new Promise(function(resolve) {
    const dictCodeList = {
      "FRUITS": [
        {
          "value": "1",
          "label": "西瓜"
        },
        {
          "value": "2",
          "label": "草莓"
        },
        {
          "value": "3",
          "label": "莲雾"
        },
      ],
      "SPORTS": [
        {
          "value": "1",
          "label": "篮球"
        },
        {
          "value": "2",
          "label": "足球"
        },
        {
          "value": "3",
          "label": "乒乓球"
        },
      ],
      "PERSON_TYPE": [{
        "value": "005",
        "label": "民营企业代表"
      },{
        "value": "004",
        "label": "个体工商户"
      }, {
        "value": "003",
        "label": "机关事业单位法人"
      }, {
        "value": "002",
        "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.js **

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.js 更多配置详细字典包配置项>>

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