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這個生命週期

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上看看大多數都是高質量的插件，其實不少輪子都有人造好了，選取好的直接拿來用豈不妙哉？