本人長期混跡於幣圈，無奈最近數字貨幣全線下跌，就此收手作罷。朋友推薦了幣乎，說這是一個神奇的網站，看了一眼，發現使用者數眾多，算是一個比較大而垂直的社群了。至於是不是區塊鏈行業的專業網站，我不做評論。作為一名資深的前端開發狗，就本能地右鍵->檢視原始碼，發現這是一個用react寫成的網站。抱著試一試的心態，呼叫了一下api，發現竟然做了跨域處理，第三方可以無痛呼叫（不需要token、簽名驗證什麼的）。程式設計師都有重新造輪子的職業病（臭毛病），就打算把網站用Vue重新構建，給想學習vue開發的同學做個教程。
廢話不多說，先放線上預覽地址：liuxuanqiang.github.io/vue-bihu
由於是託管在github上的，第一次訪問可能比較慢，請耐心等待。。。
再放幾張截圖：
當然了，作為一個現代的網際網路專案，是完全適配移動端的：
展示到此為止，下面說說程式碼。
1.請先從GitHub上clone原始碼：github.com/liuxuanqian…
2.安裝依賴：npm install，下載太慢的話請使用cnpm，沒用過請檢視教程：npm.taobao.org/
3.安裝完成後，啟動專案：npm run dev，該命令會啟動一個本地伺服器，http://localhost:8080/
4.打包專案：npm run build，會在專案根目錄下生成dist資料夾，目錄下是打包好的入口html檔案及其相關資原始檔，可將其部署至web伺服器。
是的，看到這裡你也看出來了，這是一個基於vue-cli腳手架的專案，不得不說vue很好地規範了其開發生態，開發者只需要關注業務程式碼本身，而不必操心複雜的webpack配置，可以說是對開發人員尤其是新手是相當友好的。
以上是專案概覽，下面挑幾個點詳細說說。
1.路由配置（src/router/index.js）
import Vue from 'vue'import Router from 'vue-router'import Index from '@/pages/index'import Article from '@/pages/article'import User from '@/pages/user'
Vue.use(Router)
export default new Router({ routes: [{ path: '/', name: 'index', component: Index }, { path: '/article/:id', name: 'article', component: Article }, { path: '/user/:userId', name: 'user', component: User }]})
複製程式碼2.引入http請求庫—axios（main.js）
// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router'import axios from 'axios'import utils from './utils/index.js'
Vue.config.productionTip = false
Vue.prototype.$axios = axiosVue.prototype.$utils = utils
/* eslint-disable no-new */new Vue({ el: '#app', router, components: { App }, template: '<App/>'})
複製程式碼注意這句：Vue.prototype.$axios = axios，這麼寫的目的是將axios掛載為vue的一個全域性方法，在程式碼中可以這樣用了：this.$axios.post()，this.$axios.get() ...
基本就是這樣，由於沒有登入及註冊介面，登入、註冊、關注等這些功能暫且未開發，我也在尋求其他辦法，本專案也會持續更新，若對你有所幫助，請star，歡迎issues。
原始碼地址：github.com/liuxuanqian…