Vue шаблон или функция визуализации не определены

Question

У меня проблема с Vue рендерингом на моем сайте. Я скачал какое-то приложение для форума с github , у меня были некоторые сложности с его установкой, потому что npm на самом деле не обновляется, а приложение уже 2 года go. Мне удалось все исправить в npm с пакетом. json вроде:

"devDependencies": {
        "axios": "^0.18.1",
        "bootstrap": "^4.4.1",
        "cross-env": "^5.2.1",
        "jquery": "^3.5.0",
        "laravel-mix": "^5.0.4",
        "lodash": "^4.17.15",
        "popper.js": "^1.16.1",
        "resolve-url-loader": "^3.1.1",
        "sass-loader": "^8.0.2",
        "vue": "2.5.21",
        "vue-template-compiler": "2.5.21"
    },
    "dependencies": {
        "laravel-echo": "^1.7.0",
        "node-sass": "^4.13.1",
        "pusher-js": "^4.4.0",
        "vue-loader": "15.5.1",
        "vue-router": "^3.1.6",
        "vue-simplemde": "^1.0.4",
        "vuetify": "^1.5.24"
    }

Но теперь проблема в рендеринге vue:

app. js: 71622 [Vue warn]: не удалось смонтировать компонент: шаблон или функция визуализации не определена.

Вот как приложение. js выглядит так:

require('./bootstrap');

window.Vue = require('vue');
import Vue from 'vue'
import Vuetify from 'vuetify'
import VueSimplemde from 'vue-simplemde'
import 'simplemde/dist/simplemde.min.css'


Vue.use(Vuetify)
Vue.use(VueSimplemde)
import md from 'marked'
window.md = md;

import User from './Helpers/User'
window.User = User

import Exception from './Helpers/Exception'
window.Exception = Exception

window.EventBus = new 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('AppHome', require('./components/AppHome.vue'));
import router from './Router/router.js'

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

Answer 1

Вы получаете эту ошибку, потому что в вашем приложении вообще не указан шаблон рендеринга, new Vue() отсутствует render опция называется Функция рендеринга .

Это будет содержать необходимый минимум HTML для того, чтобы приложение работало там, где важнее всего: <div id="app"></div> требуется, потому что опция el, установленная в #app, сообщает Vue, к какому элементу html оно должно монтировать себя при рендеринге.

Самым распространенным способом предоставления экземпляра с шаблоном является наличие выделенного компонента, в котором будет размещен макет верхнего уровня html приложений, но минимальное требование следующее:

// App.vue

<template>

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

</template>

// app.js

import Vue from 'vue'
import App from './App.vue' // <-- MAIN TEMPLATE
import router from './router'

const app = new Vue({
  el: '#app',
  render: h => h(App), // <-- REGISTER MAIN TEMPLATE
  router
});

Однако, поскольку этот источник выглядит как проект Laravel, очевидно, что HTML находится в блейд-шаблоне, отображаемом на стороне сервера, и я всегда считаю, что Laravel рендеринг Vue компонентов на стороне сервера является концепцией Wonkey, я предпочитаю SPA с Laravel, действующим как API.

Возможно, этот ресурс поможет https://vuejsdevelopers.com/2017/11/06/vue-js-laravel-server-side-rendering/