[英]Vue template or render function not defined
I have problem with Vue rendering on my website.我的网站上的 Vue 渲染有问题。 I have downloaded some forum app from github , I had some difficoulties with installing it, because npm is not really updated and app is from 2 years ago.
我已经从github下载了一些论坛应用程序,我在安装它时遇到了一些困难,因为 npm 并没有真正更新,应用程序是 2 年前的。 I managed to fix everything about npm with package.json like:
我设法用 package.json 解决了有关 npm 的所有问题,例如:
"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"
}
But now the problem is something with rendering vue:但现在问题出在渲染 vue 上:
app.js:71622 [Vue warn]: Failed to mount component: template or render function not defined.
app.js:71622 [Vue 警告]:无法安装组件:模板或渲染 function 未定义。
This is how app.js looks like:这是 app.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
});
You are getting that error because your App has no render template specified at all, new Vue()
is missing render
option called Render Function .您收到该错误是因为您的应用根本没有指定渲染模板,
new Vue()
缺少名为Render Function的render
选项。
This would contain the minimum required HTML for the app to work where most importantly: <div id="app"></div>
is required because the el
option set to #app
is telling Vue what html element it should mount it's self to when rendering.这将包含应用程序在最重要的地方工作所需的最低 HTML:
<div id="app"></div>
是必需的,因为设置为#app
的el
选项告诉 Vue 它应该将其自身安装到哪个 html 元素渲染时。
The most common way of of providing the instance with a template is to have a dedicated component that would be home to apps top level html layout but the minimum requirement is as follows:为实例提供模板的最常见方法是拥有一个专用组件,该组件将是应用程序顶级 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
});
However since this source appears to be a Laravel Project, clearly the HTML is in a blade template rendered server side and I always find Laravel rendering Vue components server side to be a wonkey concept, I prefer an SPA with Laravel Acting as an API. However since this source appears to be a Laravel Project, clearly the HTML is in a blade template rendered server side and I always find Laravel rendering Vue components server side to be a wonkey concept, I prefer an SPA with Laravel Acting as an API.
Perhaps this resource will help https://vuejsdevelopers.com/2017/11/06/vue-js-laravel-server-side-rendering/也许这个资源会帮助https://vuejsdevelopers.com/2017/11/06/vue-js-laravel-server-side-rendering/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.