前言：一般我们在创建vue项目时，都是使用官方提供的vue-cli2脚手架来搭建项目。一般来说，这种模式创建的项目不需要过多的配置就可以使用，但是有一个痛点就是每个项目都需要重新构建和配置。有没有办法省去这些繁琐的流程呢？比如我们有两个一模一样的项目，都使用了Vue框架，或者之前配置过。有些项目我们想直接接手使用。今天我们就来聊一聊如何基于vue搭建一个可复用且灵活的配置框架，让我们在需要的时候可以直接使用。一般来说，我们需要考虑三点：接口api的管理、路由的管理、公共数据的管理、公共方法的管理。1、接口api的管理。并且可以减少http请求，优化用户体验，节省资源。目前vue-cli3已经更新使用很久了。推荐使用vue-cli3脚手架搭建项目。我们在打包axios请求的时候，应该考虑如何统一管理API，这对于项目的优化级别来说是非常重要的。重要，因为管理API可以大大减少http请求，节省服务资源，提高响应速度。比如我们这样做，新建一个api文件，在api文件下新建一个index.js，用来存放后面要用到的接口：importrequestfrom'@/request/axios'//这是我们的打包的axios文件varENV=process.env.NODE_ENVvarTenv;ENV=='development'?Tenv='/api':Tenv=''//接口封装请求示例exportconstgetDiaryList=(pageIndex,pageSize)=>{returnrequest({url:Tenv+'/getDiaryList/list',method:'get',params:{pageIndex:pageIndex,pageSize:pageSize,}})}顺便贴一下我的axios包代码：/***http配置*axios参数说明*/importaxiosfrom'axios'importNProgressfrom'nprogress'//这是导航栏的请求状态动画插件，具体见下图import'nprogress/nprogress.css'axios.defaults.timeout=10000;//返回其他状态axios.defaults.validateStatus=function(status){returnstatus>=200&&status<=500;//Default};//跨域请求，允许保存cookieaxios.defaults.withCredentials=true;NProgress.configure({showSpinner:false});//HTTPrequest拦截axios.interceptors.request.use(config=>{NProgress.start();constmeta=(config.meta||{});constisToken=meta.isToken===假e;//配置headers中的serialize为true，开启序列化returnconfig},error=>{returnPromise.reject(error)});//HTTPresponse拦截axios.interceptors.response.use(res=>{NProgress.done();conststatus=res.data.code||200;constmessage=res.data.msg||'UnknownError';if(status!==200){returnPromise.reject(newError(message))}returnres;},error=>{NProgress.done();returnPromise.reject(newError(error));});exportdefaultaxios;NProgress是这样做的，当然，你不这样做也没关系，因为我它是一个后台管理系统：这样的话，如果我们有多个API，我们可以直接管理它们，或者如果我们有多个类型，我们也可以将它们存储在文件中。如果我们使用它们，我们只需要导入它们，因为我们发现很多初学者直接在页面中每次调用axios.get来导入api文件：import{getDiaryList}from'@/api/index'//即可一个有多个用途的对象如下：getDiaryList(pageIndex,pageSize){getDiaryList(pageIndex,pageSize).then(res=>{//请求处理成功console.log(res.data)}).catch(res=>{//请求处理失败console.log('Requestfailed')})},2.路由管理为什么要管理路由？路由可以说是Vue的灵魂。我之前接过一个项目。所有路由都写在router下的index文件中，没有父子关系。点，使用和查找极不方便关于路由管理，我们可以在router下新建一个文件夹来管理路由。例如，此文件夹名为RouterPage。我们可以通过模块和页面来管理它。比如我们可以在RouterPage下新建一个index.js管理Public和子模块的页面路由使用起来方便很多，管理起来也容易很多，这样下次交给别人的时候就不会手足无措了时间。比如我们的RouterPage下的index.js文件可以是这样的：/**路由页面配置文件**/exportdefault[{path:"/",redirect:'/index',},{path:'/index',name:'Homepage',component:()=>import('@/views/index'),meta:{requireAuth:true},//是否检查登录,children:[{path:'/',name:'登录页面',component:()=>import('@/views/home'),},]},{path:'/login',name:'登录页面',component:()=>import('@/views/login'),meta:{requireAuth:false}},]我们直接导入router下的index.js文件然后添加路由添加使用即可。我们可以在RouterPage上面的Public、module等路由下配置index.js；importVuefrom'vue'importVueRouterfrom'vue-router'importRouterPagefrom'./RouterPage/'//引入我可以创建的RouterPage文件名，Vue.use(VueRouter)constrouter=newVueRouter({mode:'history',base:process.env.BASE_URL,})router.addRoutes([...RouterPage]);//添加路由exportdefaultrouter我觉得包里还有一点肯定会考虑的，项目绝对会会用来检查当前打开的页面用户是否登录，是否需要登录，可以根据路由的全局监听来控制。可以在src目录新建一个inspect.js文件进行管控：importrouterfrom'./router'importCookiesfrom'js-cookie'//操作cookies的插件,next)=>{//Cookies.set('isAuth','iii',{expires:1});//to.matched.some(record=>record.meta.requireAuth)这个是requireAuth的属性在我们在route中设置的meta下，如果为true，表示需要判断是否登录，如果为false，则不需要判断if(to.matched.some(record=>record.meta.requireAuth)){if(Cookies.get('isAuth')){//判断条件可以自定义，这里是cookie判断，登录会存储isAuthif(to.fullPath=='/login'){}else{next()}}else{next({path:'/login',query:{redirect:to.fullPath}})}}else{Cookies.remove('isAuth');next()}})然后在main.js中全局导入这个文件，就可以实现路由变化，监听用户是否登录，是否登录他登录已过期。3.公共数据的管理关于公共数据的管理，官方已经提供了一个完善的方法，即vuex状态数据管理。我有一篇文章专门说，如果你想用vuex，可以看看。当然vuex教程还有另外一种使用方式，就是json数据管理方式。这样的话，也可以实现本地公共数据的管理，不过我还是推荐使用官方的vuex。比如我们有一个导航，需要预先配置本地菜单。我之所以不用vuex，是因为我们的menu在vuex中可能有两层，三层甚至四层，不然会影响数据的直观性。那么我们就可以这样了，创建一个nav.config.js:letresults={title:'管理平台',icon:'el-icon-s-platform',tab:[{name:'Navigation1',path:'/index/login','icon':'el-icon-s-check',children:[{name:'subset',path:'/','icon':'el-icon-s-check'},{name:'subset1',path:'/','icon':'el-icon-s-check'},{name:'subset2',path:'/','icon':'el-icon-s-check'},{name:'subset3',path:'/','icon':'el-icon-s-check'},{name:'subset4',path:'/','icon':'el-icon-s-check'},]},{name:'Navigation7',path:'/index/home','icon':'el-icon-s-check'},{name:'用户管理',path:'/index/login','icon':'el-icon-menu',children:[{name:'subset1',path:'/','icon':'el-icon-s-check'},{name:'subset1',path:'/','icon':'el-icon-s-check'},{name:'subset2',path:'/','icon':'el-icon-s-check',children:[{name:'subset11',path:'/','icon':'el-icon-s-check'},{呐me:'subset12',path:'/','icon':'el-icon-s-check'},{name:'subset23',path:'/','icon':'el-icon-s-check'},{name:'subset34',path:'/','icon':'el-icon-s-check'},{name:'subset45',path:'/','icon':'el-icon-s-check'},]},{name:'subset3',path:'/','icon':'el-icon-s-check'},{name:'subset4',path:'/','icon':'el-icon-s-check'},]},{name:'navigation9',path:'/index/login','icon':'el-icon-s-check'},{name:'Navigation10',path:'/index/login','icon':'el-icon-s-check'}]}exportdefault{results}和然后将需要的文件导入或者赋值给vuex的状态：importnavConfigfrom'../nav.config'data(){return{tabResults:navConfig.results,}}这样我们就可以直接也很方便使用this.tabResults在特定文件中操作或直接绑定页面。多用于本地菜单配置，可以灵活管理，比如：4.公共方法的管理公共方法的管理其实是可以共享的数据的管理类似，vuex也可以实现，不过我们一般习惯在公共方法文件中管理，达到直观、方便、灵活的效果比起我们可以新建一个utils.js:/***日期格式化*/exportfunctiondateFormat(date,format){format=format||'yyyy-MM-ddhh:mm:ss';if(date!=='InvalidDate'){leto={"M+":date.getMonth()+1,//month"d+":date.getDate(),//day"h+":date.getHours(),//小时"m+":date.getMinutes(),//分钟"s+":date.getSeconds(),//秒"q+":Math.floor((date.getMonth()+3)/3),//quarter"S":date.getMilliseconds()//毫秒}if(/(y+)/.test(format))format=format.replace(RegExp.$1,(date.getFullYear()+"").substr(4-RegExp.$1.length));for(letkino)if(newRegExp("("+k+")").test(format))format=format.replace(RegExp.$1,RegExp.$1.length===1?o[k]:("00"+o[k]).substr((""+o[k]).length));返回格式；}return'';}/***Json强转为Form类*@paramobj*@returns{FormData}*/exportfunctiontoFormData(obj){constdata=newFormData();对象.keys(obj).forEach(key=>{data.append(key,Array.isArray(obj[key])?obj[key].join(','):obj[key]);});returndata;}可以单独导入，也可以全部导入main.js，只使用一种或多种方法：import{toFormData}from'./utils'所有导入：importUtilsfrom'./utils'//UseUtils.toFormData(obj)总结：综上所述，我们从四个方面讲了如何打包自己的可复用Vue框架。推荐的方式是打包一个保存，可以放在Alicode或者github上。这样我们下次使用的时候，直接做基本的代理或者域名配置就可以了，可以大大节省很多时间，避免重复工作。目前正在完善中），大家一起交流学历，共同进步，共同成长。小程序代码：或微信搜索小程序“知府博客”体验知府博客官网
