VUE使用总结

关于APP.VUE

app.vue是我们整个项目的主组件，也是页面的入口文件，就相当于整个网站的首页。

在app.vue中为路由嵌套代码，有了这一行我们就可以在主组件中嵌套子组件，实现组件之间的跳转，至于组件的跳转我们用就可以跳转到Media组件了（其实就相当于一个a标签连接到Media页面）。在APP.VUE中我们可以把整个网站中都需要的用到的元素写在app.vue中，例如导航栏、footer、全局变量、或者是全局样式。

关于router.js

在router.js中，我们主要做的就是将你做的组件定义一下，以至于在其他组件中能够使用，并且能够很成功的显到页面中。定义组件的代码如下所示：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home //第一种定义组件的方式会在页面打开时就加载
    },{
      path: '/Media',
      name: 'media',
      component: () => import('./views/Media.vue')//第二种定义组件的方式，但属于懒加载，在使用时再进行加载
    }
  ]
})

关于Home.vue

在home.vue中主要是写网站的首页，如果页面内容较少，是完全可以都写在home中，如果页面内容很多，为了你方便清晰的查看是可以将内容写成几个组件加载到home组件中的。加载方式如下：

关于XXX.vue

组件的结构主要为下：