示例代码请访问我的GitHub：

该节教程代码可通过npm start运行devServer，在http://localhost:8080/查看效果

Vue 2.0组件开发说明

之前的教程中使用的一直是Vue 1.0的组件写法，接下来的课程都会使用Vue 2.0的语法。 Vue 2.0项目开发都需要通过Webpack进行打包，此时就要通过相关loader进行处理，具体可以查看webpack.config.js中的配置。 所有的组件都是以vue作为后缀。

入口js文件说明

代码示例：/lesson17/src/index.js

index.js主要用来引入住入口组件App.vue，以及路由配置，其余组件都通过App组件引入。

import Vue from 'vue';// 主入口组件import App from './App.vue';// 引入路由配置import router from './routers';let vm=new Vue({  el: '#div1',  data: {},  components: {App},  router, // 将路由表挂载到Vue实例，在组件中可以直接使用路由组件和功能  template: `    
      `})复制代码

路由配置说明

代码示例：/lesson17/src/routers/index.js

使用vue-router完成路由配置，并将实例导出，提供给入口index.js中的Vue实例引用，这样在组件中就可以直接使用路由组件和方法。

import Vue from 'vue';import Router from 'vue-router';// 引入页面组件 import Index from '@/index.vue';import News from '@/news.vue';// 全局使用RouterVue.use(Router);// 配置路由export default new Router({  routes: [    {      path: '/',      name: 'index',      component: Index    },    {      path: '/news',      name: 'news',      component: News    }  ]})复制代码

App.vue组件说明

代码示例：/lesson17/src/App.vue

App.vue为项目的入口组件，可以通过它跳转到其他组件，或者通过它引入其他组件。

// 此处书写template模板，支持html等多种语言，等同于Vue.component中的template属性
    // 此处书写JavaScript代码，等同于Vue.component代码// 此处书写样式，支持css、less等其他语言复制代码