Vue不渲染

Question

根据here的帮助，我创建了以下内容 app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */
 import Vue from 'vue'
 import VueRouter from 'vue-router'

 import App from './app.vue'
 import welcome from './components/pages/Welcome'
 import about from './components/pages/About'
 import contact from './components/pages/Contact'

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('passport-clients', require('./components/passport/Clients.vue'));
Vue.component('passport-authorized-clients', require('./components/passport/AuthorizedClients.vue'));
Vue.component('passport-personal-access-tokens', require('./components/passport/PersonalAccessTokens.vue'));

Vue.use(VueRouter);

const routes = [
  { path: '/', name: 'welcome', component: Welcome },
  { path: '/about', name: 'about', component: About },
  { path: '/contact', name: 'contact', component: Contact }
]

const router = new VueRouter({
  mode: 'history',
  routes // short for `routes: routes`
});

const app = new Vue({
    el: '#app',
    router,
    render: h => h(App)
});

和App.vue

<template>
  <div id="app">
    <Navbar v-if="isHome" />
    <router-view></router-view>
    <Footer />
  </div>
</template>

<script>
  import Navbar from './components/includes/Navbar.vue'
  import Footer from './components/includes/Footer.vue'
  export default{
    components: {
      'Navbar': Navbar,
      'Footer': Footer
    }
  }
</script>

Welcome.vue in components / pages folder

<template>
  <div>
  <h3>This is the Index page</h3>
  </div>
</template>

<script>
  export default {}
</script>

组件中的Navbar组件/包含文件夹

<template>
  <div>
  <h3>This is the Navbar</h3>
  </div>
</template>

<script>
  export default {}
</script>

同样，我创建了所有其他页面，导航栏，页脚组件。当我运行npm run dev时，它表示构建成功。当我访问localhost时：800 url vue不呈现。 Chrome检查器控制台选项卡显示未捕获的ReferenceError：未定义欢迎

我还需要从web.php中删除索引路径

Answer 1

JavaScipt区分大小写，变量“welcome”与“Welcome”不同。

import welcome from './components/pages/Welcome'
{ path: '/', name: 'welcome', component: Welcome },

更改为：

{ path: '/', name: 'welcome', component: welcome },

它应该有效。对其余变量做同样的事情 - 关于和联系。