vue.js 2.0 項目開發小結

作者：離塵不理人

https://segmentfault.com/a/1190000011066120

項目架構

項目目錄

項目目錄是採用 自動生成，其它按需自己新建就好了。

開發實踐

動態修改 document title

在不同的路由頁面，我們需要動態的修改文檔標題，可以將每個頁面的標題配置在路由元信息 裡面帶上，然後在 鉤子函數中修改：

Event Bus 使用場景

我們在項目中引入了 ，通常情況下是不需要使用 的，但是有一種情況下我們需要使用它，那就是在路由鉤子函數內部的時，在項目中，我們需要在 路由鉤子裡面對外拋出事件，在這個鉤子函數中我們無法去到 對象。

在 的 方法中監聽這個事件

自定義指令實現埋點數據統計

在項目中通常需要做數據埋點，這個時候，使用自定義指令將會變非常簡單

在項目入口文件 中配置我們的自定義指令

在組件中使用我們的自定義指令

使用過濾器實現展示信息格式化

如下圖中獎金數據信息，我們需要將後台返回的獎金格式化為帶兩位小數點的格式，同時，如果返回的金額是區間類型，需要額外加上起字和￥金額符號

在入口文件 中配置我們自定義的過濾器

在組件中使用：

axios 使用配置

在項目中，我們使用了 axios 做介面請求

在項目中全局配置

然後我們在介面中使用就方便很多了

vuex 狀態在響應式頁面中的妙用

由於項目是響應式頁面，PC 端和移動端在表現成有很多不一致的地方，有時候單單通過 CSS 無法實現交互，這個時候，我們的 狀態就派上用場了，

我們一開始在 裡面監聽了頁面的 事件，動態的更新 裡面 的狀態值

然後，我們在組件層，就能響應式的渲染不同的 結構了。其中最常見的是 PC 端和移動端載入的圖片需要不同的規格的，這個時候我們可以這個做

下圖分別是 PC 端和移動短的表現形式，然後配合 CSS 媒體查詢實現各種布局

開發相關配置

反向代理

在項目目錄的 文件下面的 配置我們的本地反向代理和埠信息

然後我們調用介面的形式就會變成如下映射，當我們調用 的時候，其實是調用了

nginx 配置

線上部署

如果路由使用的是 模式的話，需要在 裡面配置將所有的請求到轉發到 去

在 或者對應的站點 文件下面配置

優化

開啟靜態資源長緩存

開啟靜態資源 gzip 壓縮

開啟了 gzip 壓縮之後，頁面資源請求大小將大大減小，如下圖所示，表示已經開啟了 壓縮

Q&A

文章到這就結束了，如果有遺漏或者錯誤的地方，歡迎私信指出。希望這篇文章能帶給大家一絲絲收穫。

回復「面試題」「ajax」等詞，可看文章；

其它功能正在完善，不定期更新....

覺得本文對你有幫助？請分享給更多人

關注「前端大學」，提升前端技能

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！