vue2.0 router遇到的问题

昨天按照教程安装好vue-router模块后，在应用中引入router 发现没有router.map方法，百度后原来是vue2.0里的路由改了

// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

这是官方代码，这里有一个问题官方的组件写在index.html里的，我的是写在app.vue中的 所以第四步要写成

/ 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
    router:router,
    render: h => h(App)
}).$mount('#app')

render 函数是渲染一个视图，然后提供给 el 挂载，所以不加的话就是空白什么都没有

上面的修改完后继续跑，接着又报错You are using the runtime-only build of Vue where the template option is not available.

弄了一下午愣是没弄好，最后在知乎上看到说是vue会打包生成3个文件一个是 runtime only 的文件 vue.common.js，一个是 compiler only 的文件 compiler.js，一个是 runtime + compiler 的文件 vue.js。

用 webpack 的别名功能把 vue/dist/vue.js 命名成了 vue，不然vue 的 package.json 中的 main 指向的是 dist/vue.common.js。

webpack.config.js

resolve: {
        alias: {
            'vue': 'vue/dist/vue.js'
        }
    },

期待已久的页面总算出来了