Vue默认项目结构

看这篇文章得来的。。
包学会之浅入浅出Vue.js：开学篇 - 知乎专栏

image.png

就说一点，要查看About里面的内容访问地址为

image.png

再就是貌似默认生成的改名叫index.js了 不叫router.js
其中Hello.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to beat'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

About.vue

<template>
  <div class="eat">
    <h1>{{ msg }}</h1>
    
  </div>
</template>

<script>
export default {
  name: 'eat',
  data () {
    return {
      msg: 'Welcome to eat'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import About from '@/components/About'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },
    {
        path:'/about',
        name:'about',
        component:About
    }
  ]
})

参考