Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
532 views
in Technique[技术] by (71.8m points)

javascript - Vue template or render function not defined yet I am using neither?

This is my main javascript file:

import Vue from 'vue'

new Vue({
  el: '#app'
});

My HTML file:

<body>
    <div id="app"></div>

    <script src="{{ mix('/js/app.js') }}"></script>
</body>

Webpack configuration of Vue.js with the runtime build:

alias: {
    'vue$': 'vue/dist/vue.runtime.common.js'
}

I am still getting this well known error:

[Vue warn]: Failed to mount component: template or render function not defined. (found in root instance)

How come when I don't even have a single thing inside my #app div where I mount Vue, I am still getting a render/template error? It says found in root but there is nothing to be found because it does not even have any content?

How am I suppose to mount if this does not work?

Edit:

I have tried it like this which seems to work:

new Vue(App).$mount('#app');

It make sense because using the el property implies you are 'scanning' that dom element for any components and it's useless because the runtime build does not have a compiler.

Still it is an extremely strange error message to throw, especially when I have my entire #app div emptied out.

Hopefully somebody could confirm my thoughts.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

In my case, I was getting the error because I upgraded from Laravel Mix Version 2 to 5.

In Laravel Mix Version 2, you import vue components as follows:

Vue.component(
    'example-component', 
    require('./components/ExampleComponent.vue')
);

In Laravel Mix Version 5, you have to import your components as follows:

import ExampleComponent from './components/ExampleComponent.vue';

Vue.component('example-component', ExampleComponent);

Here is the documentation: https://laravel-mix.com/docs/5.0/upgrade

Better, to improve performance of your app, you can lazy load your components as follows:

Vue.component("ExampleComponent", () => import("./components/ExampleComponent"));

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...