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是当前路由地址对应的路由内容/是根路径