一個小項目，帶你深刻Vue單頁面應用開發

本人長期混跡於幣圈，無奈最近數字貨幣全線下跌，就此收手做罷。朋友推薦了幣乎，說這是一個神奇的網站，看了一眼，發現用戶數衆多，算是一個比較大而垂直的社區了。至因而不是區塊鏈行業的專業網站，我不作評論。做爲一名資深的前端開發狗，就本能地右鍵->查看源代碼，發現這是一個用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…