vue-cli结构介绍

vue-cli是vue项目开发的脚手架，非常方便，其结构大致如下，

其中static是存放静态资源的，存放的静态数据可以访问到，如果在static文件夹中创建mock文件夹，在mock文件夹中创建index.json,这样运行的vue-cli不仅开通的服务器http://localhost:8080中输入http://localhost:8080/static/mock/index.json可以访问mock文件夹中的index.json的文件内容。

通常ajax 的api的接口通常是“/api/index.json”vue-cli中的我们可以模仿一个后台的接口实现这样后台接口的效果。

在vue-cli 中config文件夹中有index.js文件中有“proxyTable”，是空对象，可以在这个空对象中做出如下配置：

这里fastclick 通过npm install fastclick --save下载，stylus 和stylus-loader也是采用如此方法，项目中使用vue-awesome-swiper轮播插件，通过刚才的方式下载，因为是vue插件，需要使用vue.use(VueAwesomeSwiper)这种方式，这样全局都可以使用这个插件了

proxyTable: {
  '/api':{
    target:'http://localhost:8080',
    pathRewrite:{
      '^/api':'/static/mock'
    }
这样我们就可以使用这个api了，非常方便。
src 下的assets文件夹中是存放静态资源的地方，像css,图片都可以放在这里；

// 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 VueAwesomeSwiper from 'vue-awesome-swiper'
import fastClick from 'fastclick'
import 'styles/reset.css'
import 'styles/border.css'
import 'styles/iconfont.css'
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper)
fastClick.attach(document.body)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
//路由是根据网址的不同，返回不同的内容给用户 App.vue是根组件，router-view是当前路由地址对应的路由内容/是根路径