本人长期混迹于币圈，无奈最近数字货币全线下跌，就此收手作罢。朋友推荐了币乎，说这是一个神奇的网站，看了一眼，发现用户数众多，算是一个比较大而垂直的社区了。至于是不是区块链行业的专业网站，我不做评论。作为一名资深的前端开发狗，就本能地右键->查看源代码，发现这是一个用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。