已配置好的vue全家桶項目router,vuex,api,axios,vue-ls,async/await,less下載即使用

github.com

vue-cli-project

- 已構建配置好的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/utilimport qs from qsimport Vue from vueUtil.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/doctorimport * as types from ../mutation-typesconst 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>

核心就是把數據和頁面分離，細分把介面，請求數據用vuex做處理，在頁面獲取數據都做統一管理項目。可以具體看項目裡面的代碼。

https://github.com/liangfengbo/vue-cli-project?

github.com

推薦閱讀：