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

const routes = [ { path: '/login', name: 'Login', component: () => import('Pages/login'), meta: { require: true, title: '登录' } }, { path: '/register', name: 'register', component: () => import('Pages/register'), meta: { require: true, title: '注册' } }, { path: '/404', name: '404', component: () => import('Pages/error/404.vue'), meta: { require: true, title: '404' } }, { path: '/500', name: '500', component: () => import('Pages/error/500.vue'), meta: { require: true, title: '500' } }, { path: '/403', name: '403', component: () => import('Pages/error/403.vue'), meta: { require: true, title: '403' } } ] export default routes

src/router/index.js

import common from './common' import doctor from './doctor' import patient from './patient' import test from './test' const route = [ { path: 'https://www.jb51.net/', redirect: '/login' }, { path: '/checkrecord', name: 'checkrecord', component: () => import('Pages/checkrecord.vue'), meta: { require: true, title: '检查记录' } }, { path: '/report', name: 'report', component: () => import('Pages/report.vue'), meta: { require: true, title: '心电图报告' } }, { path: '/opinion', name: 'opinion', component: () => import('Pages/opinion.vue'), meta: { require: true, title: '意见' } }, { path: '/bind', name: 'bind', component: () => import('Pages/bind.vue'), meta: { require: true, title: '绑定' } }, ...common, ...doctor, ...patient, ...test ] export default route

把所有的路由文件挂载进去。

src/service 目录

接口配置文件目录，根据页面来定义文件

同理我们只看src/service/api/index.js 和src/service/api/login.js、src/pages/login/index.vue以及页面如何调用接口即可。

src/service/api/login.js

先定义好login接口

const login = [ { methodsName: 'loginByPhone', // 方法名 method: 'POST', desc: '登录', path: '/rest/app/login', // 接口路径 mockPath: '/rest/app/login', params: { // 参数配置 这里需要注意，只有配置的这些参数才能通过接口，所以需要传递的参数都要在这里配置 phone: 1, password: 2, code: 3, codeid: '', clientid: '' } }, { methodsName: 'login', method: 'POST', desc: '登录', path: '/rest/interfacesLoginController/login', mockPath: '/rest/interfacesLoginController/login', params: { username: 1, password: 2, code: 3, codeid: '', clientid: '' } }, { methodsName: 'checkcode', method: 'POST', desc: '验证提取码', path: '/rest/app/medical/checksharecode', mockPath: '/rest/app/medical/checksharecode', params: { sharecode: '', id: '' } }, { methodsName: 'getCode', method: 'POST', desc: '获取验证码', path: '/rest/interRandomCodeController/gererateRandomCode', mockPath: '', params: { } }, { methodsName: 'getPublicKey', method: 'POST', desc: '获取公钥', path: '/rest/interRandomCodeController/clientIdAndPublicKey', mockPath: '', params: { } } ] export default login

src/service/api/index.js

挂载所有定义的接口文件

import login from './login' import workcenter from './workcenter' import detail from './detail' import register from './register' import doctorpc from './doctorpc' import patientpc from './patientpc' import checklist from './checklist' export default { login, workcenter, detail, register, doctorpc, patientpc, checklist }

src/pages/login/index.vue

this.$api.login( params).then(data => { }) // 这样调用登陆接口 this.$api.方法名(参数).then(res=>{}) // 方法名定义不能重名

其它目录

这些目录还是包含很多东西，用户的信息保存，主体，工具函数这些，就不多说了。

对于项目的维护还是需要看重，后期维护方便也便于管理。

总结

以上所述是小编给大家带来的Vue+webpack项目配置便于维护的目录结构的相关知识，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

您可能感兴趣的文章: