Vue+webpack项目配置便于维护的目录结构教程详解(3)

import Vue from 'vue' import { API_DEFAULT_CONFIG } from 'Config' Vue.mixin({ computed: { // 图片根地址 imgUrl () { return API_DEFAULT_CONFIG.imgUrl }, baseUrl () { return API_DEFAULT_CONFIG.baseURL }, ippid () { return API_DEFAULT_CONFIG.ippid }, dicomUrl () { return API_DEFAULT_CONFIG.dicomUrl } } })

src/pages目录

主要的页面文件，目录结构主要按照层次结构来分。

ex:该页面主要跟医生相关，主要包含云搜索（cloud）、个人中心（myCenter）、工作中心（workCenter）、搜索（serach）、同理子层级也同样区分、目录结构如下

至于公共页面可以放在common文件目录下，也可以摆在文件夹外面。

src/plugins目录

也是配置文件目录

src/plugins/api.js

import axios from './axios' import _pick from 'lodash/pick' import _assign from 'lodash/assign' import _isEmpty from 'lodash/isEmpty' import { assert } from 'Utils/tools' import { API_DEFAULT_CONFIG } from 'Config' import API_CONFIG from 'Service/api' class MakeApi { constructor (options) { this.api = {} this.options = Object.assign({}, options) this.apiBuilder(options) } apiBuilder ({ config = {} }) { Object.keys(config).map(namespace => { this._apiSingleBuilder({ namespace, config: config[namespace] }) }) } _apiSingleBuilder ({ namespace, config = {} }) { config.forEach(api => { const { methodsName, desc, params, method, path, mockPath } = api let { mock, mockBaseURL, baseURL, debug, isJSON, loading } = this.options let url = mock ? (mockBaseURL + mockPath) : (baseURL + path) debug && assert(methodsName, `${url} :接口methodsName属性不能为空`) debug && assert(url.indexOf('https://www.jb51.net/') === 0, `${url} :接口路径path，首字符应为/`) Object.defineProperty(this.api, methodsName, { value (outerParams, outerOptions) { let allowtParam = (outerOptions && outerOptions.allowParams) || {} let _data = (outerOptions && outerOptions.isFormData) ? outerParams : _isEmpty(outerParams) ? params : _pick(_assign({}, params, outerParams), Object.keys(Object.assign(params, allowtParam))) return axios(_assign({ url, desc, method, isJSON, loading }, outerOptions, { data: _data })) } }) }) } } export default new MakeApi({ config: API_CONFIG, ...API_DEFAULT_CONFIG })['api']

src/plugins/axios.js

import axios from 'axios' import {AXIOS_DEFAULT_CONFIG} from 'Config/index' import {requestSuccessFunc, requestFailFunc, responseSuccessFunc, responseFailFunc} from 'Config/interceptors/axios' let axiosInstance = {} axiosInstance = axios.create(AXIOS_DEFAULT_CONFIG) // 注入请求拦截 axiosInstance .interceptors.request.use(requestSuccessFunc, requestFailFunc) // 注入失败拦截 axiosInstance .interceptors.response.use(responseSuccessFunc, responseFailFunc) export default axiosInstance

src/plugins/inject.js

import axios from './axios' import api from './api' // GLOBAL.ajax = axios export default { install: (Vue, options) => { Vue.prototype.$api = api Vue.prototype.$ajax = axios // 需要挂载的都放在这里 } }

src/plugins/router.js

import Vue from 'vue' import Router from 'vue-router' import ROUTES from 'Routes' import {ROUTER_DEFAULT_CONFIG} from 'Config/index' import {routerBeforeEachFunc} from 'Config/interceptors/router' Vue.use(Router) // 注入默认配置和路由表 let routerInstance = new Router({ ...ROUTER_DEFAULT_CONFIG, routes: ROUTES }) // 注入拦截器 routerInstance.beforeEach(routerBeforeEachFunc) export default routerInstance

src/router目录

路由配置文件目录，同理按照页面的层次结构来，结构如下

我们来看src/router/index.js 和 src/common/index.js 即可

src/common/index.js