?????├── build ??????????????????????// 项目build脚本 ?????├── config ?????????????????????// 项目配置目录 ?????├── dist ???????????????????????// 项目输出部署目录，执行 npm run build后生成 ?????├── src ????????????????????????// 生产目录 ?????│   ├── assets ?????????????????// 静态资源，包含图片等 ?????│   ├── components ?????????????// 项目公用组件，例如Header、Footer组件等 ?????│   ├── mock ???????????????????// 接口mock文件目录 ?????│   ????└── index.js ???????????// mock接口集合文件 ?????│   ├── pages ??????????????????// 页面目录 ?????│   │ ??├── Demo ???????????????// Demo模块，必须用大写开头 ?????│   │ ??│ ??├── components ?????// Demo模块专用组件 组件建议全部首字母大写 ?????│   │ ??│ ??├── style ??????????// Demo模块专用css ?????│   │ ??│ ??├── services ???????// Demo模块服务，可以包含相应方法类 ?????│   │ ??│ ??├── interface.js ???// Demo模块接口结合文件 ?????│   │ ??│ ??└── index.vue ??????// Demo模块页面入口 ?????│   │ ??└── Other ??????????????// 其他页面目录 ?????│   ├── router ?????????????????// 路由配置文件，如果路由太多了，可以拆分 ?????│   ├── services ???????????????// 项目公用配置服务 ?????│   │ ??│ ??├── ajax.js ????????// 所有接口请求公共配置 ??可以和 request.js 合并一起 不嫌代码太长的话 ?????│   │ ??│ ??├── request.js ?????// (需求有则添加) 为所有接口设置公共请求头 ?????│   │ ??│ ??├── prompt.js ??????// 全局的提示 ?例如：接口错误提示、保存成功提示、操作错误提示等等... ?????│   │ ??│ ??├── validate.js ????// 全局表单校验具体封装可参照element-ui form表单模块 ?????│   ├── App.vue ????????????????// 组件入口 ?????│   ├── config.js ??????????????// 项目配置文件 ?例如：权限校验，cookie设置、access_token获取等等... ?????│   ├── interface.js ???????????// 项目公共接口文件 ?????│   └── main.js ????????????????// Webpack 预编译主入口 ?????├── style ??????????????????????// 项目公用style ?????├── static ?????????????????????// 静态文件目录，保留 ?????│ ??└── i18n ???????????????????// 国际化目录，每一个目录为一种语言 ?????│ ??????├── zh ?????????????????// 中文目录 ?????│ ??????│ ??└── index.json ?????// 配置文件 ?????│ ??????└── en ?????????????????// 英文目录 ?????├── index.html ?????????????????// 项目入口文件，一般不用改动 ?????├── package.json ???????????????// 项目配置 ?????├── README.md ??????????????????// 项目说明 ?????├── CHANGE_LOG.md ??????????????// 项目更新历史文档 ?????└── test ???????????????????????// 测试目录

/** * ajax 模块，可以将 axios 替换成 $.ajax 等 */import axios from ‘axios‘;import globalConfig from ‘../config‘import { Notification } from ‘element-ui‘// 注： 具体设置具体判断 根据公司项目需求 以及 接口需求 ??现在以我公司为例const init = function () { ?// 添加 axios 请求拦截器为所有请求加上前缀 、 access_token ?（我公司所有接口都比要有 access_token才能访问） ?// 有对 axios 不是很了解的 可以看看 axios 官方文档 ?https://www.kancloud.cn/yunye/axios/234845 ?axios.interceptors.request.use(function (config) { ???// 为所有接口加上前缀 例 https://www.kancloud.cn/yunye/axios/234845 前缀为 https://www.kancloud.cn ???// 因为相同环境下的所有接口前缀肯定是一样的 window.localStorage.gatewayDomain 为前缀域名 ?倘若后面更改域名之类的 ?只需改一个地方就行了 就不用说每个调接口的地方都去改 ?维护便捷 ???// 若想了解分环境打包以及分环境设置 公共域名、前缀等 ?请看以往博文 https://www.cnblogs.com/ljx20180807/p/9456489.html ???config.url = window.localStorage.gatewayDomain + config.url ???????// 登录时设置 cookies ???var cookies = globalConfig.getCookies() ???if (config.url.indexOf(‘?‘) < 0) { ?????config.url += ‘?‘ ???} ???// 为所有接口加上 access_token ???config.url += (‘access_token=‘ + cookies[‘access_token‘]) ???if (!config.data) config.data = {} ???return config; ?}, function (err) { ???// 错误处理 ???return Promise.reject(err) ?}) ?// 添加 axios 响应拦截器 ?axios.interceptors.response.use(function (response) { ???// 这里是当接口请求服务器成功响应的情况 ??解构赋值出需要的数据 ???const {status, data} = response; ???if (status === 200) { ?????// 如果不出现错误，直接向回调函数内输出 data ?状态200 ?????if (data.error === ‘SUCCESS‘) { ???????// 成功不用提示 ???????return data ?????} else { ???????// 若出现错误则弹窗错误提示 ???????if (data.message) { ?????????Notification({ ???????????title: ‘错误‘, ???????????message: data.message, ???????????type: ‘error‘, ???????????customClass: ‘el-error-msg‘, ???????????duration: 2000 ?????????}) ???????} ???????return data ?????} ???} else { ?????return response; ???} ?}, function (error) { ???// 这里是当接口请求失败的情况 （例如服务器没响应、后台代码问题之类的） ?（具体的响应判断根据你后台返回状态码结构） ???const {response} = error; ???// 这里处理错误的 http code ???if (!response || response.status === 404) { ?????if (!response) { ?// access_token 失效的情况 弹窗提示 ???????Notification({ ?????????title: ‘错误‘, ?????????message: ‘access_token已失效请重新登录‘, ?????????type: ‘error‘, ?????????customClass: ‘el-error-msg‘, ?????????duration: 1500, ?????????onClose() { ???????????window.location.href = window.localStorage.loginUrl ?// 自动跳转返回登录页重新获取access_token ?????????} ???????}) ?????} else { ???????// 这是请求url不对的情况 ???????console.log(‘404 error %o‘ + error); ?????} ???} ???// Do something with response error 对响应错误做点什么 ???return Promise.reject(error.message); ?});};export default { ?init}

const init = function () { ?const _this = this; ?// 建议为了方便使用，这里可以包装window.Alert ?具体怎么使用往下看 ?window.Alert = function (msg, duration = 3000) { ???// 错误提示 ???_this.$notify({ ?????title: ‘错误‘, ?????message: msg, ?????type: ‘error‘, ?????customClass: ‘el-error-msg‘, ?????duration ???}); ?}　// 成功提示 ?window.Tips = function (msg, duration = 3000) { ???_this.$notify({ ?????title: ‘成功‘, ?????message: msg, ?????type: ‘success‘, ?????duration ???}); ?}　// 警告提示 ?window.Warning = function (msg, duration = 3000) { ???_this.$notify({ ?????title: ‘警告‘, ?????message: msg, ?????type: ‘warning‘, ?????duration ???}); ?} ?// 全局延时器 ?window.SetTimeout = function (path, queryObject) { ???setTimeout(_ => { ?????_this.$router.push({ ???????path: path, ???????query: queryObject ?????}); ???}, 500) ?}};export default { ?init}

import axios from ‘axios‘;const ajax = { ?// 获取影像件上传列表 ?GET_IMAGE_LIST: ‘images?‘};// 提取公共部分const API_PATH_PRE_FIX = ‘apply/v1/‘; // 增加接口模块前缀let INTERFACE = {};for (let key in ajax) { ?INTERFACE[key] = API_PATH_PRE_FIX + ajax[key];}/** * 方式1： 多参数情况 ?获取列表 * @param data 参数 * @returns {*} */function getImageList(data) { ?return axios.get(INTERFACE.GET_IMAGE_LIST, { ???params: data ?}).catch(function (error) { ???window.Alert(error); ?});}/** * 方式2： es6模板语法 ?获取基本信息 * @param data 参数 * @returns {*} */function getContrantInfo(API_PATH_PRE_FIX, agreementId) { ?return axios.get(`${API_PATH_PRE_FIX}/middle/agreement/basic?agreementId=${agreementId}&`).catch(function (error) { ???window.Alert(error); ?});}export default { ?getImageList, ?getContrantInfo,};

<script>
// 引入上面的接口文件import INTERFACE from ‘./interface‘export default { ?data() { ???return { ?????imageList: [], ?????deleteList: [] ???} ?}, ?created() { ???// 获取列表 （调用封装好的请求） ???INTERFACE.getImageList().then(data => { ?????if (data && data.data) this.imageList = data.data ???}) ?}, ?methods: { ???// 确认删除 ???handleDelete() { ?????INTERFACE.deleteAgreement(this.deleteList).then(data => { ???????// 操作成功提示 （上面定义好的全局提示） ???????window.Tips(‘删除成功!‘) ?????}) ???} ?}}</script>

import Vue from ‘vue‘import ElementUI from ‘element-ui‘import App from ‘./App‘import ajax from ‘@/services/ajax‘// axios 统一配置ajax.init()// 全局变量indow.localStorage.gatewayDomain = ‘https://dev-api.cn/‘window.localStorage.defaultLanguage = ‘ZH_CN‘

<script>import prompt from ‘@/services/prompt‘export default { ?name: ‘app‘, ?mounted() { ???// 全局错误初始化 ???prompt.init.call(this) ?}}</script>

import Vue from ‘vue‘// 全局域名const apiUrlBase = window.apiUrlBaseconst API_URL = { ?GET_APPLICENT: `${apiUrlBase}/app/v1/apply/dictionaries`}const actions = { ??/** * 获取投保人数据字典 */actions.getApplicent = ({ state }) => { ?return new Promise((resolve, reject) => { ???Vue.http.get(`${API_URL.GET_APPLICENT}?access_token=${state.accessToken}`).then((ret) => { ???????resolve(ret.body) ?????}).catch((err) => { ???????reject(err) ?????}) ???}) ?}}export default actions

this.$store.dispatch(`${storeName}/getApplicent`) ?????.then((data) => { ???????console.log(data) ?????})