{"id":18974913,"url":"https://github.com/lfb/vue-cli-project","last_synced_at":"2025-04-15T17:47:17.408Z","repository":{"id":53549520,"uuid":"134264456","full_name":"lfb/vue-cli-project","owner":"lfb","description":"Vue.js  2.x 实战开发项目脚手架","archived":false,"fork":false,"pushed_at":"2019-11-07T12:03:44.000Z","size":140,"stargazers_count":126,"open_issues_count":0,"forks_count":44,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-28T23:11:19.633Z","etag":null,"topics":["vue","vue-cli","webpa","webpack"],"latest_commit_sha":null,"homepage":"http://www.boblog.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lfb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-21T12:11:45.000Z","updated_at":"2024-06-18T03:34:49.000Z","dependencies_parsed_at":"2022-09-11T04:00:52.998Z","dependency_job_id":null,"html_url":"https://github.com/lfb/vue-cli-project","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lfb%2Fvue-cli-project","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lfb%2Fvue-cli-project/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lfb%2Fvue-cli-project/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lfb%2Fvue-cli-project/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lfb","download_url":"https://codeload.github.com/lfb/vue-cli-project/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249124565,"owners_count":21216690,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["vue","vue-cli","webpa","webpack"],"created_at":"2024-11-08T15:16:41.374Z","updated_at":"2025-04-15T17:47:17.388Z","avatar_url":"https://github.com/lfb.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## vue-cli-project\n- 👨‍💻‍已构建配置好的vuejs全家桶项目，统一管理后端接口 | 获取数据 | 请求数据，已包含vue-router，vuex，api，axios. webpack, 储存用vue-ls, 异步async/await, css sass. 下载即使用项目开发。\n- 喜欢或对你有帮助的话请点star✨✨，Thanks.\n\u003e A Vue.js project\n\n## Vue cli3.x\n基于 Vue-cli3 搭建的前端开发项目模板，已在 vue.config.js 文件中配置好 webpack，仅供参考，开箱即用，欢迎大家围观指教！[https://github.com/liangfengbo/vue-cli3-template](https://github.com/liangfengbo/vue-cli3-template)\n\n### 使用\n\n``` bash\n# 安装服务\nnpm install\n\n# 启动服务\nnpm run dev\n\n```\n\n### 说明\n\n#### src架构\n\n```\n├── App.vue\n├── api\n│   ├── doctor.js\n│   └── fetch.js\n├── assets\n│   └── logo.png\n├── components\n│   └── HelloWorld.vue\n├── libs\n│   └── util.js\n├── main.js\n├── router\n│   └── index.js\n├── store\n│   ├── index.js\n│   ├── modules\n│   └── mutation-types.js\n└── views\n    └── doctor\n```\n\n\n\n处理数据页面这2大块，把数据和页面分离，在vuex里面做请求数据，页面只需要做调用数据。\n\n请求接口这块再细分，接口和请求接口分开，我使用了最新的async/await函数做数据请求\n\n#### api文件夹 主要放后端提供的接口，如\n\n\n```js\nimport fetch from './fetch';\n\nexport default {\n  // 获取医生列表\n  list(params) {\n    return fetch.get('/doctor/list', params)\n  },\n\n  // 获取医生详情信息\n  detail(id) {\n    return fetch.post('/doctor/detail/' + id);\n  },\n}\n```\n\n#### fetch.js 文件是封装axios请求，以及请求处理，和http状态码的等处理\n\n```js\nimport Util from '../libs/util'\nimport qs from 'qs'\nimport Vue from 'vue'\n\nUtil.ajax.defaults.headers.common = {\n  'X-Requested-With': 'XMLHttpRequest'\n};\n\nUtil.ajax.interceptors.request.use(config =\u003e {\n  /**\n   * 在这里做loading ...\n   * @type {string}\n   */\n\n  // 获取token\n  config.headers.common['Authorization'] = 'Bearer ' + Vue.ls.get(\"web-token\");\n  return config\n\n}, error =\u003e {\n  return Promise.reject(error)\n\n});\n\nUtil.ajax.interceptors.response.use(response =\u003e {\n\n  /**\n   * 在这里做loading 关闭\n   */\n\n    // 如果后端有新的token则重新缓存\n  let newToken = response.headers['new-token'];\n\n  if (newToken) {\n    Vue.ls.set(\"web-token\", newToken);\n  }\n\n  return response;\n\n}, error =\u003e {\n  let response = error.response;\n  if (response.status == 401) {\n    // 处理401错误\n\n  } else if (response.status == 403) {\n    // 处理403错误\n\n  } else if (response.status == 412) {\n    // 处理412错误\n\n  } else if (response.status == 413) {\n    // 处理413权限不足\n\n  }\n\n  return Promise.reject(response)\n\n});\n\nexport default {\n  post(url, data) {\n\n    return Util.ajax({\n      method: 'post',\n      url: url,\n      data: qs.stringify(data),\n      timeout: 30000,\n      headers: {\n        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'\n      }\n    })\n  },\n\n  get(url, params) {\n    return Util.ajax({\n      method: 'get',\n      url: url,\n      params,\n    })\n  },\n\n  delete(url, params) {\n    return Util.ajax({\n      method: 'delete',\n      url: url,\n      params\n    })\n  },\n\n  put(url, data) {\n\n    return Util.ajax({\n      method: 'put',\n      url: url,\n      data: qs.stringify(data),\n      timeout: 30000,\n      headers: {\n        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'\n      }\n    })\n  }\n}\n\n```\n\n\n#### 在vuex里面做请求，比如请求医生列表，用async/await，拿到数据存进store数据里面\n\n\n```js\n├── index.js\n├── modules\n│   └── doctor.js\n└── mutation-types.js\n\nimport doctor from '../../api/doctor'\nimport * as types from '../mutation-types'\n\nconst state = {\n  // 医生列表\n  doctorList: [],\n  // 医生详情信息\n  doctorDetail: null,\n};\n\nconst mutations = {\n  // 设置医生列表\n  [types.SET_DOCTOR_LIST](state, data) {\n    state.doctorList = data\n  },\n  // 设置医生详情信息\n  [types.SET_DOCTOR_DETAIL](state, data) {\n    state.doctorDetail = data\n  },\n};\n\nconst actions = {\n\n  /**\n   * 获取医生顾问列表\n   * @param state\n   * @param commit\n   * @param params\n   * @returns {Promise\u003cvoid\u003e}\n   */\n  async getDoctorList({state, commit}, params) {\n    let ret = await doctor.list(params);\n    commit(types.SET_DOCTOR_LIST, ret.data.data);\n  },\n\n  /**\n   * 获取医生详情信息\n   * @param state\n   * @param commit\n   * @param id 医生ID\n   * @returns {Promise\u003cvoid\u003e}\n   */\n  async getDoctorDetail({state, commit}, id) {\n    let ret = await doctor.detail(id);\n    commit(types.SET_DOCTOR_DETAIL, ret.data.data);\n  }\n};\n\nexport default {\n  state,\n  actions,\n  mutations\n}\n\n```\n\n#### 在页面里需要执行引入：\n\n```js\nimport {mapActions, mapState} from 'vuex'\n```\n\n#### 代码可以具体看文件的代码\n\n\n```js\n└── doctor\n    ├── detail.vue\n    └── list.vue\n\n\u003cscript\u003e\n  import {mapActions, mapState} from 'vuex'\n\n  export default {\n    components: {},\n    data() {\n      return {}\n    },\n    computed: {\n      ...mapState({\n        doctorList: state =\u003e state.doctor.doctorList,\n      })\n    },\n    async created() {\n      // 医生类型\n      let params = {type: 'EXP'};\n      // 获取医生列表\n      await this.getDoctorList(params);\n    },\n    methods: {\n      ...mapActions([\n        // 获取医生列表\n        'getDoctorList'\n      ]),\n\n      // 路由跳转方法\n      routeLink(link) {\n        this.$router.push({path: link});\n      },\n    }\n  }\n\u003c/script\u003e\n```\n\n#### 核心就是把API数据和页面分离，细分把接口，请求API数据方法放在vuex做处理，在页面映射vuex的mapActions提供的接口方法获取数据，做统一管理项目。喜欢或对你有帮助的话请点star✨✨，Thanks.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flfb%2Fvue-cli-project","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flfb%2Fvue-cli-project","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flfb%2Fvue-cli-project/lists"}