vue项目目录解析

1.index.js

其中index.js是vue项目的单页面。

所有其他的vue组件都会被自动注入到此div下，即编写的其他内容都将在这个div中显示。

2.App.vue

该组件为根组件，其他组件又都包含在这个组件中。.vue文件是一种自定义文件类型，在结构上类似html。由三个部分组成，html语句写在template标签里；js脚本语句写在script标签里；css样式写在style标签里。

<router-view/>

这是一个容器，叫做“路由视图”，即当前路由（URL）指向的内容将显示在这个容器当中。其他组件都有自己的路由，需要在router文件夹的index.js文件中定义。最终都显示在App.vue跟组件上。

3.maim.js

new Vue({  el: '#app',  router,  components: { App },  template: '<App/>' })

在这个 js 文件中，我们创建了一个 Vue 对象（实例），el 属性提供一个在页面上已存在的 DOM 元素作为 Vue 对象的挂载目标，router 代表该对象包含 Vue Router，并使用项目中定义的路由。components 表示该对象包含的 Vue 组件，template 是用一个字符串模板作为 Vue 实例的标识使用，类似于定义一个 html 标签。