我在网站上渲染Vue时遇到问题。我已经从github下载了一些论坛应用程序,安装起来有些困难,因为npm并未真正更新,并且该应用程序是2年前的。我设法用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"
}
但是现在问题在于渲染vue:
app.js:71622 [Vue警告]:无法安装组件:模板或渲染 函数未定义。
这是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
});
答案 0 :(得分:1)
您收到该错误是因为您的应用程序根本没有指定渲染模板,new Vue()
缺少名为Render Function的render
选项。
这将包含最重要的应用程序运行所需的最低HTML:<div id="app"></div>
是必需的,因为设置为el
的{{1}}选项告诉Vue它应该挂载哪个html元素它是渲染时的自我。
为实例提供模板的最常见方法是拥有专用组件,该组件将作为应用程序顶级html布局的宿主,但最低要求如下:
#app
// App.vue
<template>
<div id="app"></div>
</template>
但是,由于此源似乎是Laravel项目,因此HTML显然位于刀片模板渲染的服务器端,并且我总是发现Laravel渲染Vue组件服务器端是一个“金钥匙”概念,因此我更喜欢使用Laravel充当SPA的SPA。 API。
也许此资源会帮助https://vuejsdevelopers.com/2017/11/06/vue-js-laravel-server-side-rendering/