整体项目结构

1.我们主要关注初始化项目后的src目录
2.src目录即源码目录，分别有assets,components,router子目录
3.assets存放静态资源，components存放组件（一个个页面，可互相组合，或者是个单独页面），router（路由配置）
4.整个项目入口是main.js,main.js其实只引入了App.vue这个组件，App.vue会到router,route有相关组件的路由配置，根据router的路由配置，从而跳转到不同的组件显示

组件入口(App.vue)

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
</style>

说明：
1.这是App.vue的源码，可以看到有个<router-view/>标签，其实这个就是引入router
2.用户请求过来，App.vue会交给router分发处理，router决定返回哪个组件给浏览器显示

路由（router）

import Vue from 'vue'
import Router from 'vue-router'
import Home from "../components/Home";
import Teach from "../components/Teach";
import Student from "../components/Student";
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',        //访问路径
      component: Home   //组件
    },
    {
      path: '/student',
      component: Student
    },
    {
      path: '/teach',
      component: Teach
    }
  ]
})

说明：这是router配置，可以看到路径和组件之间是绑定的

组件（components）

<template>
  <div>
    <Menu/>
    <h1>主页</h1>
    <table border="1px">
      <tr>
        <td>ID</td>
        <td>NAME</td>
        <td>AGE</td>
      </tr>
      <tr v-for="user in results">
        <td>{{user.id}}</td>
        <td>{{user.name}}</td>
        <td>{{user.age}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
import Menu from "./Menu";
export default {
  name: "Home",
  components:{Menu,},
  data(){
    return{
      results:[]
    }
  },
  created() {
    this.$http.get("http://rap2api.taobao.org/app/mock/291666/userList").then(resp=>{
      this.results=resp.data.results
    })
  }
}
</script>

<style scoped>

</style>

说明：
1.这是一个组件源码，也是项目的一个主页，当用户访问根目录，那么会展示这个组件在页面上
2.一个组件明显包含三部分<template>(h5标签)<script>(js动作)<style>(css样式)，明显一个前端页面只要这三部分即可
3.其实在<script>中还用了一个组件axios,这个用于异步请求，主要用于获取后端接口数据的，类似jquery的ajx

异步请求（axios）

1.axios主要用于异步请求，和后端接口交互使用
2.安装axios：
  a.npm install axios
  b.在main.js引入 
    import axios from "axios";
    Vue.prototype.$http=axios

静态资源（assets）

主要用于存放静态资源，比如图片，css文件等