Vue șablon sau funcția de randare nu este definită încă nu folosesc niciuna dintre ele? (Programare, Javascript, Vuejs2, Vue Component, Vue.Js)

Stephan-v a intrebat.

Acesta este fișierul meu javascript principal:

import Vue from 'vue'

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

Fișierul meu HTML:

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

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

Configurația Webpack a Vue.js cu compilarea în timp de execuție:

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

Încă primesc această eroare bine cunoscută:

[Vue warn]: Nu a reușit să monteze componenta: șablonul sau funcția de redare nu este definită. (găsit în instanța rădăcină)

Cum se face că atunci când nu am nici măcar un singur lucru în interiorul div-ului meu #app unde montez Vue, tot primesc o eroare de randare/șablon? Se spune found in root dar nu se găsește nimic pentru că nu are nici măcar conținut?

Cum ar trebui să montez dacă acest lucru nu funcționează?

Editați:

Am încercat în felul următor, care pare să funcționeze:

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

Este logic, deoarece folosind el implică faptul că „scanați” acel element dom pentru orice componente și este inutil deoarece compilarea în timp de execuție nu are un compilator.

Cu toate acestea, este un mesaj de eroare extrem de ciudat de aruncat, mai ales atunci când am întregul div #app golit.

Sper că cineva ar putea să-mi confirme gândurile.

19 răspunsuri
Justin MacArthur

Motivul pentru care primiți această eroare este că utilizați build-ul runtime care nu acceptă șabloane în fișierele HTML, așa cum se vede aici vuejs.org

În esență, ceea ce se întâmplă cu fișierele încărcate vue este că șabloanele lor sunt convertite în timp de compilare în funcții de randare, în cazul în care funcția dvs. de bază încerca să compileze din elementul dvs. html.

Comentarii

  • Fișierele mele vue nici măcar nu au șabloane. Aceasta este problema mea. –  > Por Stephan-v.
  • @Stephan-v Aceasta este o problemă separată, Ceea ce am postat a fost despre montarea unei instanțe vue pe un element dom. dacă folosiți funcția el trebuie să aveți fie o funcție de randare, fie un compilator de șabloane, astfel încât să poată analiza html-ul și să construiască structura internă de randare. dacă nu aveți una dintre acestea, va da eroare deoarece nu poate compila instanța. –  > Por Justin MacArthur.
mutiemule

În cazul meu, primeam eroarea pentru că am făcut upgrade de la Laravel Mix versiunea 2 la 5.

În Laravel Mix versiunea 2, importați componentele vue după cum urmează:

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

În Laravel Mix Versiunea 5, trebuie să importați componentele după cum urmează:

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

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

Aici este documentația:https://laravel-mix.com/docs/5.0/upgrade

Mai bine, pentru a îmbunătăți performanța aplicației dvs. puteți încărca leneș componentele dvs. după cum urmează:

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

Comentarii

  • Sau adăugați .default la require orice doriți să utilizați. –  > Por Stephan-v.
  • Asta va funcționa, dar, conform documentației, trecerea la importurile EcmaScript este opțiunea recomandată. –  > Por mutiemule.
soluții justo Bin

Dacă obișnuiați să apelați o componentă în felul următor:

Vue.component('dashboard', require('./components/Dashboard.vue'));

Presupun că problema a apărut atunci când ați actualizat la laravel mix 5.0 sau la alte biblioteci, așa că trebuie să puneți .default. Ca și mai jos:

Vue.component('dashboard', require('./components/Dashboard.vue').default);

Am rezolvat aceeași problemă.

Comentarii

  • Asta mi-a rezolvat problema! Mulțumesc! –  > Por Flávio Silveira.
  • A rezolvat problema mea. Mulțumiri –  > Por Muhammad Habib.
Asqan

În cazul meu, am importat componenta mea (în router) ca:

import bsw from 'common-mod/src/components/webcommon/webcommon'

Se rezolvă pur și simplu dacă am schimbat-o în

import bsw from 'common-mod/src/components/webcommon/webcommon.vue'

Comentarii

  • Am pierdut atât de mult timp pentru a înțelege acest lucru. Cât de imprecise sunt mesajele de eroare în Vue. La naiba. –  > Por Mahesh.
  • A funcționat și pentru mine. Ar putea cineva să explice care este diferența dintre cele două importuri? –  > Por Javier Pallarés.
  • Cred că are ceva de-a face cu regulile actualizate de import al modulului webpack. În acest fel, recunoaște că este un fișier vue și îl montează corect. –  > Por Asqan.
  • Pentru mine acesta este răspunsul corect. Nu uitați extensia .vue în timpul importului! –  > Por xing.
  • Omule, mulțumesc mult! M-am blocat pe acest sh.t jumătate de zile în urmă, și am uitat, de asemenea, doar pentru a pune .vue la unul dintre importurile mele de componente… –  > Por Zsoca.
Dennis Adriaansen

Dacă altcineva continuă să primească aceeași eroare. Doar adăugați un div în plus în șablonul de componente.

După cum spune documentația:

Șablonul componentei trebuie să conțină exact un element rădăcină

Verificați acest exemplu simplu:

 import yourComponent from '{path to component}'
    export default {
        components: {
            yourComponent
        },
}

 // Child component
 <template>
     <div> This is the one! </div>
 </template>

Oleksandr Devhackerone

Există o actualizare de la Laravel Mix 3 la Laravel 4 care poate afecta răspunsul pentru toate componentele.
Consultați https://laravel-mix.com/docs/4.0/upgrade pentru mai multe detalii.

Lăsați 'example-component' să fie componenta de exemplu, a cărei adresă este './components/ExampleComponent.vue'.

Laravel 3:

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

Laravel 4:

Schimbarea constă în faptul că o .default este adăugată.

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

Nicholas Betsworth

În cazul meu, am folosit un import implicit:

import VueAutosuggest from 'vue-autosuggest';

Utilizarea unui import numit a rezolvat problema:import {VueAutosuggest} from 'vue-autosuggest';

Tohir

Ceva de genul acesta ar trebui să rezolve problema:.

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

Shaya Ulman

Ca un rezumat al tuturor postărilor

Această eroare:

[Vue warn]: Nu a reușit să monteze componenta: șablonul sau funcția de redare nu este definită.

Primești din cauza unei anumite probleme care împiedică montarea componentei tale.

Acest lucru poate fi cauzat de o mulțime de probleme diferite, după cum puteți vedea din diferitele postări de aici. depanați-vă bine componenta și fiți atenți la tot ceea ce poate nu este făcut corect și ar putea împiedica montarea.

Am primit eroarea atunci când fișierul meu de componentă nu a fost codificat corect…

Comentarii

  • > Por Soldarnal.

În Zaharia 11:8, Dumnezeu spune: „Într-o lună am scăpat de cei trei păstori”. (NIV)

Se pare că vrea să se refere la trei figuri istorice care au fost înlăturate toate din poziția lor într-o lună. Dar cine? Sau poate că „cei trei” și „unul” sunt figuri simbolice a ceva, dar nu înțeleg ce. Cine sunt cei trei păstori?

Vue.component('message', require('./components/message.vue'));
Bună întrebare - comentariile standard sunt la fel de confuze ca și mine.                - 

Dottard

.default

Vue.component('message', require('./components/message.vue').default);
                                        2 Răspunsuri                                    

Ozzie Ozzie Ozzie

Cine sunt cei trei păstori din Zaharia 11:8?

În Zaharia 11:8, Dumnezeu spune: „Într-o lună am scăpat de cei trei păstori”. (NIV)

const files = require.context('./', true, /.vue$/i)
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key)))

Scripturile nu ne spun cine sunt cei trei păstori care au fost tăiați în timpul în care Zaharia era păstorul turmei lui Dumnezeu (Zaharia 11:7), este evident că Zaharia avea autoritatea de a scăpa de ei.

Profeția Îl prefigura pe Isus, pe care Dumnezeu Tatăl Său l-a trimis să păstorească turma Sa din Israel. Conducătorii poporului lui Dumnezeu maltratau poporul, Isus a simțit compasiune pentru ei.

const files = require.context('./', true, /.vue$/i)
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Matei 9:36 (NASB)

” Văzând [a]poporul, I s-a făcut milă de el, pentru că era tulburat și descurajat ca niște oi fără păstor”.

Cei trei păstori pe care Isus i-a eradicat au fost 1/ fariseii, 2/ saducheii și 3/ erodienii.

Vă recomandăm să citiți Matei 22:15-46 NASB

Vue.component('my-component', {
    data() {
        return {
            ...
        }
    },
    props: {
        ...
    },
    template:`
        <div>
            ...
        </div>
    `
});

https://classic.biblegateway.com/passage/?search=Matthew%2022%20%3A15-46&version=NASB;NET

import MyComponent from '{path-to-folder}/my-component';

Vue.component('parent_component', {
    components: {
        MyComponent
    }
});

Fariseii și irodienii.

const MyComponent = Vue.component('my-component', {
    data() {
        return {
            ...
        }
    },
    props: {
        ...
    },
    template:`
        <div>
            ...
        </div>
    `
});

export default MyComponent;

Matei 22:15-16 NASB . Atunci, cei

farisei

s-au dus și [a]au pus la cale împreună cum să-L prindă în capcană [b]în ceea ce spunea El. 16. Și *au trimis la El pe ucenicii lor, împreună cu

Comentarii

    Herodieni,

  • zicând: „Învățătorule, noi știm că Tu ești sincer și că înveți calea lui Dumnezeu în adevăr și [c]nu te înfrânezi de la nimeni, căci Tu nu ești părtinitor față de nimeni. > Por .
  • Saducheii. > Por .
  • Matei 22:23-24 NASB.

În ziua aceea, niște saduchei

(care spun că nu există înviere) au venit la Isus și L-au interogat, 24 întrebând: „Învățătorule, Moise a zis: „Dacă un om moare fără să aibă copii, fratele său, ca rudă mai apropiată, să se căsătorească cu soția lui și să ridice copii fratelui său.

business_kid

Aș fi de acord în mare parte cu Ozzie Ozzie. Decât să ne concentrăm pe un singur verset, mai bine să luăm Zah 11:8 în context. Aș mai spune că nu îți dai seama de astfel de lucruri fără ajutorul oamenilor pe care Dumnezeu îi folosește acum. Matei 24:45-47

Comentarii

  • Zah 11, versetele 12-13 ne permit să plasăm acest lucru ferm în timpul lui Isus. Să-l prețuiești pe cea de-a doua cea mai puternică persoană din Univers cu prețul unui sclav este într-adevăr foarte jignitor. Prin urmare, toate interpretările evreiești pot fi ignorate, deoarece nu l-ar recunoaște pe Isus ca Mesia. > Por .Versetul 11:8 se referă într-adevăr la Saduchei, Farisei, & partidul adepților lui Irod. Este remarcabil faptul că, în timp ce ei îl urmau pe Irod, Irod nu a avut nicio problemă în a-i abandona în soarta lor.

Toiagul numit Plăcere se referea la modul în care Dumnezeu se poartă cu poporul Său. Relațiile sale cu ei până în acel moment. Toiagul numit „Uniune” reprezenta legământul Său cu ei. În schimb, el a instituit Noul Legământ.

Vedem responsabilitatea păstorilor atunci când ne dăm seama că i-au îndepărtat pe evrei de Mesia și i-au dus în cele din urmă în mâinile generalului Titus, care a cucerit orașul Ierusalim. Tatăl său, Vespasian, cucerise dinspre nord spre sud, în timp ce, în același timp, zeloții care cuceriseră Masada prin înșelăciune, făceau raiduri și jafuri spre nord, împingându-i pe toți în Ierusalim.

Din nou, în 132-135, liderii religioși au sprijinit calul greșit, Simon bar Khoba, care a avut inițial un oarecare succes. Creștinii au fost persecutați atunci când au refuzat recrutarea. Dar s-au întors mai mulți romani, care au devastat țara. De data aceasta, romanii au desființat Ierusalimul în întregime (sub Hadrian) și i-au împrăștiat pe evrei ca pe unt prin imperiu pentru a evita să deprime piața de sclavi de oriunde. Toți au fost vânduți ca sclavi. Evreilor le era interzis să intre în Ierusalim sub pedeapsa cu moartea.

Cine sunt cei trei păstori din Zaharia 11:8?

.vue

import myComponent from './my/component/my-component.vue';

.vue.tsmy-component.vue

<script lang="ts" src="./my-component.ts"></script>

.ts.vue

.vue

template

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './com/Home.vue';

Vue.use(VueRouter);

Vue.router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
    ]
});

<h1>Hello Vue</h1>

Failed to mount component: template or render function not defined.

found in

---> <Home> at resources/js/com/Home.vue
       <Root>

<template>
   <h1>Hello Vue</h1>
</template>

.storybook/webpack.config.js

const path = require('path');

module.exports = async ({ config, mode }) => {

    config.module.rules.push({
        test: /.ts$/,
        exclude: /node_modules/,
        use: [
            {
                loader: 'ts-loader',
                options: {
                    appendTsSuffixTo: [/.vue$/],
                    transpileOnly: true
                },
            }
        ],
    });

    return config;
};

import

import DataTable from '@/components/data-table/DataTable';

import DataTable from '@/components/data-table/';

render()<script></script>

<script>