VUE使用总结

关于APP.VUE

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

在app.vue中<router-view/>为路由嵌套代码，有了这一行我们就可以在主组件中嵌套子组件，实现组件之间的跳转，至于组件的跳转我们用<router-link to="/Media"></router-link>就可以跳转到Media组件了（其实<router-link to="/Media"></router-link>就相当于一个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组件中的。加载方式如下：

<template>
  <div class="home">
    <Shead msg="Shead"/>//组件名称如HTML标签一样的使用在页面中
    <Ouricons msg="ouricons"/>
  </div>
</template>

<script>
import Shead from '@/views/S-head'//引入S-head组件
import Ouricons from '@/views/Our-icons'
export default {
  components: {
    Shead,//定义组件名称
    Ouricons
  }
}
</script>

关于XXX.vue

组件的结构主要为下：

<template>
    <div class="media">
        //写页面结构，注意组件<template></template>中必须包裹一个div
    </div>
</template>

<script>
export default {
    data:function (){
        return{
            //写数据
        }
    }
}
</script>

<style lang="scss" scoped>
//写样式
</style>