一个小项目，带你深刻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…