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是當前路由地址對應的路由內容/是根路徑