怎么做导航网站/舆情网站直接打开的软件

写在前面

最近用vue + vue-router 做了个单页应用的项目，页面大概有15个左右。积累了一些开发经验在此做一些记录.本文主要从可维护性方面来考虑SPA的开发实践

项目开始

1. 通用样式独立

全站的颜色定义放在一个文件里，其他组件和页面import这个配置来引用颜色。

$bgColor: #fff;
$color:#619eee;
$fontColor:#333333;
$redColor:#ff4c4c;
复制代码

2. vue，vue-router单独抽出来，用script标签引入

bad case

npm install vue
npm install vue-router
//js
import Vue from 'vue'
import VueRouter from 'vue-router'
复制代码

good case

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>
复制代码

好处： import过来的js会和你的业务代码打包在一起。无谓的增加代码的体积，而且vue这类基础包的更新频率是低于业务代码的。单拆出来加载有利于浏览器缓存,拆出来的会比import在一起的体积减小30k左右

3. 封装请求

采取axios和拦截器进行封装，方便以后根据业务进行各种判断和处理

import axios from 'axios'const codeMessage = {200: '服务器成功返回请求的数据',201: '新建或修改数据成功。',202: '一个请求已经进入后台排队（异步任务）',204: '删除数据成功。',400: '发出的请求有错误，服务器没有进行新建或修改数据,的操作。',401: '用户没有权限（令牌、用户名、密码错误）。',403: '用户得到授权，但是访问是被禁止的。',404: '发出的请求针对的是不存在的记录，服务器没有进行操作',406: '请求的格式不可得。',410: '请求的资源被永久删除，且不会再得到的。',422: '当创建一个对象时，发生一个验证错误。',500: '服务器发生错误，请检查服务器',502: '网关错误',503: '服务不可用，服务器暂时过载或维护',504: '网关超时',
}const instance = axios.create({baseURL: conifg.devBaseUrl,timeout: 10000,headers: {'Accept': 'application/json','Content-Type': 'application/json'}
})// 请求拦截处理
instance.interceptors.request.use(async (config) => {// 在发送请求之前做些什么return config
}, (error) => {// 对请求错误做些什么return Promise.reject(error)
})// 返回拦截处理
instance.interceptors.response.use((response) => {// 对响应数据做点什么if (response.status >= 200 && response.status < 300) {return response} else if (response.data.ret === 401) {Alert.alert(`提示`,'你已被登出!',{ cancelable: false })} else {const errortext = codeMessage[response.status] || response.statusTextconst error = new Error(errortext)Alert.alert(`请求错误 ${response.status}: ${response.url}`,`${errortext}`,{ cancelable: false })error.name = response.statuserror.response = responsethrow error}
}, (error) => {// 对响应错误做点什么Alert.alert(`提示`,`${error}`,{ cancelable: false })return Promise.reject(error)
})export default instance
复制代码