Vue.js架构设计前言Vue设计其实本质上设计并不难，在我们看来对vue整体架构设计在一开始分享的时候我就出了这几点！1.API设计的理解。2.路由设计的层次感。3.View视图的划分。4.应用级组件，项目级组件的正确姿势设计方式。5.Vuex和数据传递应用区别。6.文件结构目录的划分。只要掌握好这几点，我相信整体的架构体系是没有大的问题。这里我不牵扯ssh。Api设计在api设计当中，首我们先对一些请求进行封装，比如说fetch，还是用axios，我们都要首先对请求进行一层的封装，不用看，大家肯定会用promise，如果用axios的同学，也可以对请求进行一些拦截，这也是很有必要的基于axios封装importQsfrom'qs'importaxiosfrom"axios"varurl=location.origin+'/api'axios.defaults.baseURL=url;axios.defaults.timeout=5000;axios.defaults.transformRequest=[function(data){GitChatdata=Qs.stringify(data)returndata}]axios.defaults.transformResponse=[function(data){data=JSON.parse(data)returndata}]axios.interceptors.request.use(function(config){console.log("请求开始")returnconfig;},function(error){returnPromise.reject(error);});axios.interceptors.response.use((res)=>{console.log("请求结束")returnres;},(error)=>{returnPromise.reject(error);});functionhttp(url,params){returnnewPromise((resolve,reject)=>{axios.get(url,{params:params}).then((res)=>{resolve(res.data)}).catch(err=>{if(err=="Error:timeoutof5000msexceeded"){console.log("服务器请求超时")return}alert(err)})})}exportdefaulthttp基于fetch的封装exportdefaultasync(type='GET',url='',data={},method='fetch')=>{type=type.toUpperCase();url=baseUrl+url;if(type=='GET'){GitChatletdataStr='';//数据拼接字符串Object.keys(data).forEach(key=>{dataStr+=key+'='+data[key]+'&';})if(dataStr!==''){dataStr=dataStr.substr(0,dataStr.lastIndexOf('&'));url=url+'?'+dataStr;}}if(window.fetch&&method=='fetch'){letrequestConfig={credentials:'include',method:type,headers:{'Accept':'application/json','Content-Type':'application/json'},mode:"cors",cache:"force-cache"}if(type=='POST'){Object.defineProperty(requestConfig,'body',{value:JSON.stringify(data)})}try{varresponse=awaitfetch(url,requestConfig);varresponseJson=a...
