Vue 小專案的最佳實踐

HopeFE發表於2017-04-18
Vue

專案簡介

目前一期只是為App內某個模組資訊模組文章的分享和APP下載，後續還會有更多的功能,為了專案可擴充套件、可伸縮結合了我以前的實踐搭建了此專案專案地址,如果這個簡單的專案能給您帶來幫助請給小哥哥⭐Star好不好（手動筆芯）。

功能

  • 根據分享出來的文章ID獲取資料
  • 在網頁內可以開啟或者下載該APP
  • 微信平臺的特殊處理
    • 微信平臺的遮蔽了scheme,文章頁面的開啟APP的功能需要出浮窗提示去瀏覽器中開啟
    • 下載APP頁面在微信中，IOS可以喚起APP Store,安卓則需要提示浮窗

使用技術須知

Vue,VueRouter,Vuex三件套不在多說

Axios

主要用來發起Http請求，想要詳細瞭解具體使用方式和操作指南可以請參考下面的幾篇文章
Axios全攻略
Vuex2和Axios的開發
注意：因為Axios使用了Promise,適配低版本瀏覽器 一定要配合使用es6-promise

Vuex-router-sync

Vuex-router-sync資料
功能：將Router中的 這些資料注入到Store中，方便我們呼叫。
在此專案中 我用此外掛獲取URL上的文章ID

Vue-meta

Vue-meta資料
功能：改變網頁Head上的一些標籤值。
在此專案中，我用此外掛改變文章頁面上的Title，在瀏覽器中標題不那麼木訥。

Mobi.css

Mobi.css資料
功能：小而精美的手機端CSS佈局庫
在此專案中，不想用太大的UI框架也不想自己寫太多的樣式，選擇了它。

Vue-infinite-loading

Vue-infinite-loading資料
功能：緩解載入資料時頁面空白的尷尬，可自定義loading動畫。

關鍵實現

URL上獲取文章ID

和APP的同學商量了我們就用http://xxxx/article/:id的方式去定義分享出去文章地址，頁面通過獲得URL上的
ID去請求相對應的資料。我是使用Vuex-router-sync直接從Store中獲得ID的rootState.route.params.id

// 檔案src/modules/action
/** 獲取文章資訊 */
export const getArticle = ({ rootState, commit }) => {
  return new Promise((resolve, reject) => {
    axios({
      method: 'get',
      url: 'share/news_details',
      params: {
        news_id: rootState.route.params.id
      }
    })
    .then((response) => {
      commit(types.ARTICLE, response.data.data)
      resolve(response)
    })
    .catch((error) => {
      reject(error)
    })
  })
}複製程式碼

Store中獲取環境區別

在每個頁面進行操作時，我們需要鑑別當前系統是IOS或者安卓，每次通過正則去鑑別UA裡的字串太麻煩，所以我將此放到Store中，方便所有的元件使用

// 檔案src/modules/store
const state = {
  system: (/iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase()) ? 'IOS' : 'Android'),
  article: {},
  isWeixin: (/MicroMessenger/ig).test(navigator.userAgent)
}複製程式碼

合理的處置異常

我們去載入資料時可能會遇到失敗的情況，這裡需要對頁面有一個良好的處理，這裡我主要使用Vue-infinite-loading去實現頁面上的效果。

_onInfinite () {
  this.getArticle().then(() => {
    // 完成之後loading消失 
    this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded')
    this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete')
  })
  .catch(() => {
    // 異常之後頁面的展示  執行下方slot="no-results"部分
    this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete')
  })
}複製程式碼
<infinite-loading :on-infinite="_onInfinite" ref="infiniteLoading" spinner="bubbles">
  <span slot="no-results">好像來到了奇怪的地方~</span>
  <span slot="no-more"></span>
</infinite-loading>複製程式碼

keep-alive元件複用

這是一個很能提高頁面效能的標籤，會將已使用過的不活動的元件快取起來而不是銷燬。在效能不太好的手機上，模版的渲染也是需要一定時間的，我們可以用這個標籤將快取曾經使用過的元件（頁面），在此元件啟用時重新整理裡面的資料即可。啟用時使用activated這個生命週期

Vue 小專案的最佳實踐
activated

  activated () {
    this.clearArticle() //啟用時先清除Store中的資料 因為$InfiniteLoading是根據頁面高度來發起請求的
    this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset')
  }複製程式碼

元件程式碼的規範

始終基於模組的方式來構建你的 app，每一個子模組只做一件事情。
Vue.js 的設計初衷就是幫助開發者更好的開發介面模組。一個模組是應用程式中獨立的一個部分。

我們需要將我們*.vue檔案按照一定的結構組織，使得元件便於理解，主要有以下幾點比較重要：

  • 匯出一個清晰、組織有序的元件，使得程式碼易於閱讀和理解。同時也便於標準化。
  • 按首字母排序屬性，data, computed, watches 和 methods 使得屬性便於查詢。
  • 合理組織，使得元件易於閱讀。(name; extends; props, data and computed; components; watch and methods; lifecycle methods, 等.);
  • 使用 name 屬性。藉助於vue devtools可以讓你更方便的測試
  • 合理的 CSS 結構，如 BEM 或 rscss - 詳情?;
  • 使用單檔案 .vue 檔案格式來元件程式碼

同時配合ESLint將程式碼寫的更加規範和閱讀，我這邊使用Standard的風格，在VScode中也開啟了Standard的驗證。
ESLint官網
JavaScript 程式碼規範-Standard風格
元件規範也可以參考筆者這篇：Vue.js 元件編碼規範

最後

看起來此專案簡單，實則上用了不少外掛去實現需要較強的動手（第三方坑也多，選擇一個好的外掛得先去github上看看，作者的程式碼質量），需要保持一定的彈性方便日後的擴充套件也要避免過度的設計。大家若想要加速自己的開發速度，可以多逛逛Vue awesome上看看大多數都是高質量的外掛，其實很多輪子都有人造好了，選取好的直接拿來用豈不妙哉？

相關文章