Javascript Laravel VueJS-找不到元素：#导航_Javascript_Php_Laravel 5_Vue.js

Javascript Laravel VueJS-找不到元素：#导航

javascript php laravel-5 vue.js

Javascript Laravel VueJS-找不到元素：#导航,javascript,php,laravel-5,vue.js,Javascript,Php,Laravel 5,Vue.js,我是新来的拉维尔和VueJs 我目前的问题是以下三件事： [Vue warn]：找不到元素：#导航 [Vue warn]：找不到模板元素或模板元素为空：#导航 vue.js:437[vue warn]：未能装载组件：未定义模板或渲染函数。这是我的navigation.vue文件 <template id="navigation"> <div class="c-header col-xs-12 col-sm-12 colmd-12 col-lg-12">

我是新来的拉维尔和VueJs

我目前的问题是以下三件事：

[Vue warn]：找不到元素：#导航

[Vue warn]：找不到模板元素或模板元素为空：#导航

vue.js:437[vue warn]：未能装载组件：未定义模板或渲染函数。

这是我的navigation.vue文件

<template id="navigation">
  <div class="c-header col-xs-12 col-sm-12 colmd-12 col-lg-12">
    <div class="u-tab-menu">
      <router-link class="u-tab-menu__tab pull-left col-xs-2 col-sm-2 col-md-2 col-lg-2" :to="/home">home</router-link>
      <router-link class="u-tab-menu__tab pull-left col-xs-2 col-sm-2 col-md-2 col-lg-2" :to="/about">about</router-link>
      <router-link class="u-tab-menu__tab pull-left col-xs-2 col-sm-2 col-md-2 col-lg-2" :to="/products">products</router-link>
      <router-link class="u-tab-menu__tab pull-left col-xs-2 col-sm-2 col-md-2 col-lg-2" :to="/services">services</router-link>
      <router-link class="u-tab-menu__tab pull-left col-xs-2 col-sm-2 col-md-2 col-lg-2" :to="/contact">contact</router-link>
      <router-link class="u-tab-menu__tab pull-left col-xs-2 col-sm-2 col-md-2 col-lg-2" :to="/qa">qa</router-link>
    </div>
  </div>
  </div>
</template>

<script type="text/javascript">
  export default {}
</script>

// import components into routes.js here
import home from './components/home.vue'
import about from './components/about.vue'
import products from './components/products.vue'
import services from './components/services.vue'
import contact from './components/contact.vue'
import qa from './components/qa.vue'

var router = new VueRouter();

router.map({
  path: "/home",
  component: "home"
}, {
  path: "/about",
  component: "about"
}, {
  path: "/products",
  component: "products"
}, {
  path: "/services",
  component: "services"
}, {
  path: "/contact",
  component: "contact"
}, {
  path: "/qa",
  component: "qa"
});

export default router

import Vue from 'vue'
import VueRouter from 'vue-router'

import {
  routes
} from './routes.js'
import navigation from './components/navigation.vue'

/**
 * 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.
 */

Vue.use(vueRouter);
router.start(navigation, '#app');

require('./bootstrap');

window.Vue = require('vue');

<!doctype html>
<html lang="{{ config('app.locale') }}">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Laravel Test Application</title>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
  <script type="text/javascript" src="https://unpkg.com/vue-router@2.6.0/dist/vue-router.js"></script>
  <!--<script type="text/javascript" src="resources/assets/js/main.js"></script>-->
  <!-- Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
  <!-- Styles -->
  <link href="{{ elixir('css/app.css') }}" rel="stylesheet" type="text/css">
  <link href="{{ elixir('css/main_style.css') }}" rel="stylesheet" type="text/css">
</head>

<body>

  <div class="container">
    <div class="row">
      <div id="app">
        <!-- Root Vue Instance -->

        <navigation></navigation>
        @{{ testData }}
      </div>
    </div>

    <router-view></router-view>

  </div>

  <script type="text/javascript">

    Vue.component('navigation', {
      template: '#navigation'
    });

    const app = new Vue({

      el: '#app',
      data: {
        testData: "Some text here"
      },
      methods: {

      },
      router: this.router
    }).$mount('#app')

  </script>

</body>

</html>

这是我的main.js文件

<template id="navigation">
  <div class="c-header col-xs-12 col-sm-12 colmd-12 col-lg-12">
    <div class="u-tab-menu">
      <router-link class="u-tab-menu__tab pull-left col-xs-2 col-sm-2 col-md-2 col-lg-2" :to="/home">home</router-link>
      <router-link class="u-tab-menu__tab pull-left col-xs-2 col-sm-2 col-md-2 col-lg-2" :to="/about">about</router-link>
      <router-link class="u-tab-menu__tab pull-left col-xs-2 col-sm-2 col-md-2 col-lg-2" :to="/products">products</router-link>
      <router-link class="u-tab-menu__tab pull-left col-xs-2 col-sm-2 col-md-2 col-lg-2" :to="/services">services</router-link>
      <router-link class="u-tab-menu__tab pull-left col-xs-2 col-sm-2 col-md-2 col-lg-2" :to="/contact">contact</router-link>
      <router-link class="u-tab-menu__tab pull-left col-xs-2 col-sm-2 col-md-2 col-lg-2" :to="/qa">qa</router-link>
    </div>
  </div>
  </div>
</template>

<script type="text/javascript">
  export default {}
</script>

// import components into routes.js here
import home from './components/home.vue'
import about from './components/about.vue'
import products from './components/products.vue'
import services from './components/services.vue'
import contact from './components/contact.vue'
import qa from './components/qa.vue'

var router = new VueRouter();

router.map({
  path: "/home",
  component: "home"
}, {
  path: "/about",
  component: "about"
}, {
  path: "/products",
  component: "products"
}, {
  path: "/services",
  component: "services"
}, {
  path: "/contact",
  component: "contact"
}, {
  path: "/qa",
  component: "qa"
});

export default router

import Vue from 'vue'
import VueRouter from 'vue-router'

import {
  routes
} from './routes.js'
import navigation from './components/navigation.vue'

/**
 * 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.
 */

Vue.use(vueRouter);
router.start(navigation, '#app');

require('./bootstrap');

window.Vue = require('vue');

<!doctype html>
<html lang="{{ config('app.locale') }}">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Laravel Test Application</title>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
  <script type="text/javascript" src="https://unpkg.com/vue-router@2.6.0/dist/vue-router.js"></script>
  <!--<script type="text/javascript" src="resources/assets/js/main.js"></script>-->
  <!-- Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
  <!-- Styles -->
  <link href="{{ elixir('css/app.css') }}" rel="stylesheet" type="text/css">
  <link href="{{ elixir('css/main_style.css') }}" rel="stylesheet" type="text/css">
</head>

<body>

  <div class="container">
    <div class="row">
      <div id="app">
        <!-- Root Vue Instance -->

        <navigation></navigation>
        @{{ testData }}
      </div>
    </div>

    <router-view></router-view>

  </div>

  <script type="text/javascript">

    Vue.component('navigation', {
      template: '#navigation'
    });

    const app = new Vue({

      el: '#app',
      data: {
        testData: "Some text here"
      },
      methods: {

      },
      router: this.router
    }).$mount('#app')

  </script>

</body>

</html>

这是我的.blade.php文件

<template id="navigation">
  <div class="c-header col-xs-12 col-sm-12 colmd-12 col-lg-12">
    <div class="u-tab-menu">
      <router-link class="u-tab-menu__tab pull-left col-xs-2 col-sm-2 col-md-2 col-lg-2" :to="/home">home</router-link>
      <router-link class="u-tab-menu__tab pull-left col-xs-2 col-sm-2 col-md-2 col-lg-2" :to="/about">about</router-link>
      <router-link class="u-tab-menu__tab pull-left col-xs-2 col-sm-2 col-md-2 col-lg-2" :to="/products">products</router-link>
      <router-link class="u-tab-menu__tab pull-left col-xs-2 col-sm-2 col-md-2 col-lg-2" :to="/services">services</router-link>
      <router-link class="u-tab-menu__tab pull-left col-xs-2 col-sm-2 col-md-2 col-lg-2" :to="/contact">contact</router-link>
      <router-link class="u-tab-menu__tab pull-left col-xs-2 col-sm-2 col-md-2 col-lg-2" :to="/qa">qa</router-link>
    </div>
  </div>
  </div>
</template>

<script type="text/javascript">
  export default {}
</script>

// import components into routes.js here
import home from './components/home.vue'
import about from './components/about.vue'
import products from './components/products.vue'
import services from './components/services.vue'
import contact from './components/contact.vue'
import qa from './components/qa.vue'

var router = new VueRouter();

router.map({
  path: "/home",
  component: "home"
}, {
  path: "/about",
  component: "about"
}, {
  path: "/products",
  component: "products"
}, {
  path: "/services",
  component: "services"
}, {
  path: "/contact",
  component: "contact"
}, {
  path: "/qa",
  component: "qa"
});

export default router

import Vue from 'vue'
import VueRouter from 'vue-router'

import {
  routes
} from './routes.js'
import navigation from './components/navigation.vue'

/**
 * 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.
 */

Vue.use(vueRouter);
router.start(navigation, '#app');

require('./bootstrap');

window.Vue = require('vue');

<!doctype html>
<html lang="{{ config('app.locale') }}">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Laravel Test Application</title>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
  <script type="text/javascript" src="https://unpkg.com/vue-router@2.6.0/dist/vue-router.js"></script>
  <!--<script type="text/javascript" src="resources/assets/js/main.js"></script>-->
  <!-- Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
  <!-- Styles -->
  <link href="{{ elixir('css/app.css') }}" rel="stylesheet" type="text/css">
  <link href="{{ elixir('css/main_style.css') }}" rel="stylesheet" type="text/css">
</head>

<body>

  <div class="container">
    <div class="row">
      <div id="app">
        <!-- Root Vue Instance -->

        <navigation></navigation>
        @{{ testData }}
      </div>
    </div>

    <router-view></router-view>

  </div>

  <script type="text/javascript">

    Vue.component('navigation', {
      template: '#navigation'
    });

    const app = new Vue({

      el: '#app',
      data: {
        testData: "Some text here"
      },
      methods: {

      },
      router: this.router
    }).$mount('#app')

  </script>

</body>

</html>


拉威尔试验应用
@{{testData}}
Vue.component（'导航'{
模板：“#导航”
});
const app=新的Vue({
el:“#应用程序”，
数据：{
testData：“此处有一些文本”
},
方法：{
},
路由器：这是路由器
}).$mount（“#应用程序”）

我不知道从哪里开始去弄清楚它为什么要这样做。我基本上把所有的部分放在一起，使它工作，但我不知道错误在哪里。请帮忙。提前谢谢

我也犯了同样的错误。我通过围绕Vue声明使用

$(document).ready(function() { .... };

我也犯了同样的错误。我通过围绕Vue声明使用

$(document).ready(function() { .... };

col-xs-2 col-sm-2 col-md-2 col-lg-2

可以简化为

col-2

。没有名为

col-xs-2

的类。引导首先是移动的。

col-xs-2 col-sm-2 col-md-2 col-lg-2

可以简化为

col-2

。没有名为

col-xs-2

的类。引导首先是移动的。