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
複製代碼