目录结构
参照的视频 vue脚手架创建 a.vue
<template>
<div>a</div>
</template>
<script>
</script>
b.vue
<template>
<div>b</div>
</template>
<script>
</script>
c.vue
<template>
<div>c</div>
</template>
<script>
</script>
index.js
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
const routes =[
{path:'/a',component:()=>import('@/components/a.vue')},
{path:'/b',component:()=>import('@/components/b.vue')},
{path:'/c',component:()=>import('@/components/c.vue')}
]
const router=new Router({
routes
})
export default router
main.js
import Vue from 'vue'
import App from './App.vue'
import router from '@/router/index.js'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router
}).$mount('#app')
App.vue
<template>
<div>
<Header></Header>
<router-view></router-view>
<Footer></Footer>
</div>
</template>
<script>
import Header from './components/Header/'
import Footer from './components/Footer/'
export default {
name: '',
components: {
Header,
Footer
}
}
</script>
<style>
</style>
保存代码,cmd执行npm run serve报错 Failed to mount component: template or render function not defined. 解决:给a.vue,b.vue,c.vue添加export default {};
|