已构建配置好的vuejs全家桶项目，统一管理后端接口 | 获取数据 | 请求数据，已包含vue-router，vuex，api，axios. webpack, 储存用vue-ls, 异步async/await, css less. 下载即使用项目开发。
喜欢或对你有帮助的话请点star✨✨，Thanks.
A Vue.js project
使用
# 安装服务npm install# 启动服务npm run dev
说明
src架构
├── App.vue├── api│ ├── doctor.js│ └── fetch.js├── assets│ └── logo.png├── components│ └── HelloWorld.vue├── libs│ └── util.js├── main.js├── router│ └── index.js├── store│ ├── index.js│ ├── modules│ └── mutation-types.js└── views └── doctor
处理数据页面这2大块，把数据和页面分离，在vuex里面做请求数据，页面只需要做调用数据。
请求接口这块再细分，接口和请求接口分开，我使用了最新的async/await函数做数据请求
api文件夹 主要放后端提供的接口，如
import fetch from './fetch';export default { // 获取医生列表 list(params) { return fetch.get('/doctor/list', params) }, // 获取医生详情信息 detail(id) { return fetch.post('/doctor/detail/' + id); },}fetch.js 文件是封装axios请求，以及请求处理，和http状态码的等处理
import Util from '../libs/util'import qs from 'qs'import Vue from 'vue'Util.ajax.defaults.headers.common = { 'X-Requested-With': 'XMLHttpRequest'};Util.ajax.interceptors.request.use(config => { /** * 在这里做loading ... * @type {string} */ // 获取token config.headers.common['Authorization'] = 'Bearer ' + Vue.ls.get("web-token"); return config}, error => { return Promise.reject(error)});Util.ajax.interceptors.response.use(response => { /** * 在这里做loading 关闭 */ // 如果后端有新的token则重新缓存 let newToken = response.headers['new-token']; if (newToken) { Vue.ls.set("web-token", newToken); } return response;}, error => { let response = error.response; if (response.status == 401) { // 处理401错误 } else if (response.status == 403) { // 处理403错误 } else if (response.status == 412) { // 处理412错误 } else if (response.status == 413) { // 处理413权限不足 } return Promise.reject(response)});export default { post(url, data) { return Util.ajax({ method: 'post', url: url, data: qs.stringify(data), timeout: 30000, headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' } }) }, get(url, params) { return Util.ajax({ method: 'get', url: url, params, }) }, delete(url, params) { return Util.ajax({ method: 'delete', url: url, params }) }, put(url, data) { return Util.ajax({ method: 'put', url: url, data: qs.stringify(data), timeout: 30000, headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' } }) }}在vuex里面做请求，比如请求医生列表，用async/await，拿到数据存进store数据里面
├── index.js├── modules│ └── doctor.js└── mutation-types.jsimport doctor from '../../api/doctor'import * as types from '../mutation-types'const state = { // 医生列表 doctorList: [], // 医生详情信息 doctorDetail: null,};const mutations = { // 设置医生列表 [types.SET_DOCTOR_LIST](state, data) { state.doctorList = data }, // 设置医生详情信息 [types.SET_DOCTOR_DETAIL](state, data) { state.doctorDetail = data },};const actions = { /** * 获取医生顾问列表 * @param state * @param commit * @param params * @returns {Promise<void>} */ async getDoctorList({state, commit}, params) { let ret = await doctor.list(params); commit(types.SET_DOCTOR_LIST, ret.data.data); }, /** * 获取医生详情信息 * @param state * @param commit * @param id 医生ID * @returns {Promise<void>} */ async getDoctorDetail({state, commit}, id) { let ret = await doctor.detail(id); commit(types.SET_DOCTOR_DETAIL, ret.data.data); }};export default { state, actions, mutations}在页面里需要执行引入：
import {mapActions, mapState} from 'vuex'代码可以具体看文件的代码
└── doctor ├── detail.vue └── list.vue<script> import {mapActions, mapState} from 'vuex' export default { components: {}, data() { return {} }, computed: { ...mapState({ doctorList: state => state.doctor.doctorList, }) }, async created() { // 医生类型 let params = {type: 'EXP'}; // 获取医生列表 await this.getDoctorList(params); }, methods: { ...mapActions([ // 获取医生列表 'getDoctorList' ]), // 路由跳转方法 routeLink(link) { this.$router.push({path: link}); }, } }</script>