vue单页面应用实践

写在前面

最近用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.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
复制代码

转载于:https://juejin.im/post/5d0dbc26f265da1b7f2987a3