VUE学习（二、组件与路由）

一、结构理解

先来理解main.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

最上面为引入了VUE，App.vue组件，路由配置

接下来的 new Vue实例化，声明el：'#app'，意思是将所有视图放在id值为app这个dom元素中，启用路由。

components表明引入的文件，这个文件的内容将以这样的标签写进去#app中，就是将App.vue放到#app中。

单页面组件

.vue文件，在Vue中，官网叫它做组件，单页面的意思是结构，样式，逻辑代码都写在同一个文件中，当我们引入这个文件后，就相当于引入对应的结构、样式和JS代码。

文件内分为三大部分，分别是