写在前面

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

项目开始

1. 通用样式独立

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

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

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

bad case

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

good case

复制代码

好处： 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.statusText    const error = new Error(errortext)    Alert.alert(      `请求错误 ${response.status}: ${response.url}`,      `${errortext}`,      { cancelable: false }    )    error.name = response.status    error.response = response    throw error  }}, (error) => {  // 对响应错误做点什么  Alert.alert(    `提示`,    `${error}`,    { cancelable: false }  )  return Promise.reject(error)})export default instance复制代码