环境搭建完毕，利用vue-router实现了页面跳转，那么现在要处理的就是页面的内容了。

一个页面可以看作是由各种各样的组件组成的，大至一个页面，小至一个按钮都可以作为一个组件，页面的组件化可以大大提高代码的重用性，免除了很多重复性的劳动。vue允许把用户组件写成单个的文件，尾缀为.vue，然后再以模块的方式引入,下面是我的例子：

入口文件：

import Vue from 'vue';
import VueRouter from 'vue-router'

import Main from'./components/main.vue'
import Login from'./components/login.vue'
import Content from'./components/content.vue'
Vue.use(VueRouter);

const routes=[
    {path:'/login',component:Login},
    {path:'/main',component:Main},
    {path:'/main/content',component:Content},
    {path:'/',redirect:'/login'}
];
const router=new VueRouter({
        routes
    });
var app=new Vue({
    router,
    el:'#app',
    template:'<router-view></router-view>'
});

这是其中的一个组件content：

<template>
    <p class="demo-title">{{msg}}</p>
</template>
<script>
    export default{
        data:function(){
            return{msg:"hello"}
        }
    }
</script>
<style>
    .demo-title{color:red;}
</style>

这里用上了ES6的模块加载功能：export和import，在组件中使用export，可以把组件定义为一个模块，import则可以把已定义的组件，这样就能方便处理模块间的依赖关系。

一个vue文件一般来说有三个元素：template（html模板），script，style，我们在script中编写组件所需要的依赖和交互代码，并用export将整个组件以模块的方式定义。在script中，组件的编写方法与在vue对象中的编写组件的方法并无二致，所以也可以把template写进script里面。

一个组件对应一个文件，这样子就可以在组件内部处理组件自身的内容，css也可以只针对组件生效，十分方便。