@H_502_0@vuejs 自定义了一种.vue文件，可以把html,css,js 写到一个文件中，从而实现了对一个组件的封装， 一个.vue 文件就是一个单独的组件。由于.vue文件是自定义的，浏览器不认识，所以需要对该文件进行解析。 在webpack构建中，需要安装vue-loader 对.vue文件进行解析。在 sumlime 编辑器中，我们 书写.vue 文件，可以安装vue Syntax highlight 插件，增加对文件的支持。
@H_502_0@环境搭建完毕，利用vue-router实现了页面跳转，那么现在要处理的就是页面的内容了。
@H_502_0@一个页面可以看作是由各种各样的组件组成的，大至一个页面，小至一个按钮都可以作为一个组件，页面的组件化可以大大提高代码的重用性，免除了很多重复性的劳动。vue允许把用户组件写成单个的文件，尾缀为.vue，然后再以模块的方式引入,下面是我的例子：
@H_502_0@入口文件：
<div class="jb51code">
<pre class="brush:js;">
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:'
});
