我通过vuecli脚手架创建好模板之后，在入口函数main.js删掉了原来代码 自己编写一个路由DEMO，但是consloe没有报错，也没有出现目标组件，找了几天 实在找不到，求助大虾们

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.config.productionTip = false
Vue.use(VueRouter)

var homePage={template:'<div>首页</div>'}
var fristPage={template:'<div>11111</div>'}
var secPage={template:'<div>22222</div>'}

var router=new VueRouter({
    mode:'history',
    base:__dirname,
    routes:[
        {path:'/',component:homePage},
        {path:'/fri',component:fristPage},
        {path:'/sec',component:secPage}
    ]
})
/* eslint-disable no-new */
new Vue({
  router,
  teamlate:`<div id='headnav'>
      <h1>导航</h1>
          <ul>
                  <li><router-link to="/">首页</router-link></li>
                  <li><router-link to="/fri">FRI</router-link></li>
                  <li><router-link to="/sec">SEC</router-link></li>
          </ul>
          <router-view/>
  </div>`
}).$mount('#app')