Vue.Js開源：bilibili-vue－前端 vue + 后端 koa，全棧式開發 bilibili 首頁
前言
為什么是寫嗶哩嗶哩(俗稱B站)呢？其一是因為本人是B站的重度使用者，每周基本上都會在B站上看看火影忍者、暴走大事件等。另外一個原因呢，就是B站首頁很美觀大方，而且處處充滿了細節。所以對于實踐確實是一個不錯的項目。目前的技術棧主要的采用的是前端Vue2+后端Koa2的前后端分離的方式，語法全部使用ES6/7。關于數據也來自真實的數據接口。
技術棧
前端：vue2 + vuex + webpack + ES6/7 + stylus + nginx
后端：koa2
項目運行
源碼地址: https://github.com/lybenson/bilibili-vue
如何運行
運行前請先安裝 nodejs
clone 項目到本地
git clone https://github.com/lybenson/bilibili-vue.git
前端運行
cd bilibili-vue npm install npm run dev
后端運行
cd bilibili-vue/bilibili-api npm install npm run dev
為了確保運行正確，請先運行后端服務。再運行前端，之后訪問 http://localhost:8080
組件
根據首頁的各模塊的功能不同，劃分出了共20多個可復用的組件。具體請看下方
├── banner //輪播組件
│ ├── Banner.vue
│ └── BannerItem.vue
├── common // 公共組件
│ ├── BHeader.vue
│ ├── BMenu.vue
│ ├── BMenuItem.vue
│ ├── PostMaterial.vue
│ ├── Search.vue
│ └── TopContainer.vue
├── content // 主內容組件
│ └── BContent.vue
├── contentRow // 單個分類的組件
│ ├── BContentRow.vue
│ ├── BRowBody.vue
│ ├── BRowHead.vue
│ ├── BRowItem.vue
│ ├── BRowRank.vue
│ └── BRowRankBody.vue
├── contentTop // 頁面頂部組件
│ ├── BContentTop.vue
│ └── BContentTopItem.vue
├── live //直播所在的組件
│ ├── BLive.vue
│ ├── BLiveItem.vue
│ ├── BLiveRank.vue
│ └── BLiveRankItem.vue
├── nav //右側導航條組件
│ ├── BNavSide.vue
│ └── smooth-scroll.js
└── promote // 推廣組件
├── BPromote.vue
└── BPromoteItem.vue
組件的原則就是盡量將復雜的UI布局劃分成單個小的UI組件，邏輯處理也被劃分成更多的單個小的邏輯。數據流動采用的單向數據流動。子組件的數據更多的是來自于父組件，父組件的數據主要是其本身發起的 ajax 請求。本項目中 ajax 請求庫使用的是 axios 。
狀態管理
目前的狀態管理采用 vuex 。由于 vuex 可以分多個子 module 。所以在不同模塊下單獨維護一份狀態，同時對于一些公共的狀態，比如發起網絡請求的 requesting ，錯誤時的狀態 error 則保存在根狀態中，之后可以通過子模塊中的 rootState.requesting 獲取來賦值。
在子模塊中發送網絡請求獲取數據是一個異步的過程，所以將網絡請求放在 actions 。每次發起網絡需要經歷下面的步驟
-
請求中
rootState.requesting = true //請求狀態更新為true,表示請求中 commit(TYPE.XX_REQUEST) // 發送同步操作，請求中的數據處理
-
請求成功
rootState.requesting = false //請求狀態更新為false,表示請求結束 commit(TYPE.XX_SUCCESS, response) //發送同步操作,處理請求成功后數據
-
請求失敗
rootState.requesting = false //請求狀態更新為false,表示請求結束 commit(TYPE.XX_SUCCESS, response) //發送同步操作,處理請求失敗
動畫
B站首頁充斥著大量的動畫效果。目前動畫使用的主要有三種方式：
-
以 hover 效果觸發。
-
通過 js 觸發的效果，如點擊輪播圖的原點時，主要通過設置css屬性 transition: .2s; ，再通過 js 設置css屬性 this.$refs.banner.style.marginLeft = left 。
-
通過 vue 提供的動畫方式。
<transition name="fade"> <div v-if="isSort"> <div class="tip"></div> <div class="custom-bg"></div> </div> </transition>
樣式
樣式文件使用的是 stylus ，暫未使用任何 vue 現成的UI組件。需要安裝 stylus-loader , stylus ，由于 vue-cli 中的 webpack 已經配置好了 stylus 了，所以只需要安裝就可以了。
npm install stylus-loader --save-dev npm install stylus --save-dev
性能優化
-
圖片懶加載
-
壓縮 js 、 css
-
服務器開啟 gzip
-
瀏覽器緩存
-
...
發布
完成項目后將發布到自己的服務器上，首先確保服務器已安裝 nodejs ，具體安裝步驟不再贅述。
后端發布
后端采用 pm2 做項目管理
安裝 pm2
npm install pm2 -g
啟動項目
cd bilibili-api && npm install pm2 start index.js
前端發布
- webpack 打包
npm run build
需要注意的是，直接運行此命令可能會導致資源無法找到的問題。所以需要對 webpack 配置做一定的修改。
在 webpack.base.conf.js 文件中修改 publicPath 如下
output: {
path: config.build.assetsRoot,
publicPath: './', //資源的公共路徑
// publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
filename: '[name].js'
}
這樣打包后還會出現 stylus 中 background-image 資源無法找到的問題，我采用的方式修改 ExtractTextPlugin 配置，在 webpack.prod.conf.js 中修改
new ExtractTextPlugin('[name].[contenthash].css')
將分離的 css 打包路徑分離到 static 文件夾之外。
打包完成后上傳到服務器 /var/www/html/bilibili 目錄下。
-
配置nginx服務器。
location /bilibili { root /var/www/html; index index.html; }
總結
目前主要功能都已經完成的差不多。主要還差一個預覽視頻與彈幕的功能尚未完成，希望能把B站首頁寫完，并且會持續更新中，后面可能會加上直播等功能。
相關截圖:
首頁：
輪播：
直播：
排行：
游戲：
拖拽排序與滾動效果：
項目主頁：http://www.baiduhome.net/lib/view/home/1493172369974