让 vue.js 2.0 与 Laravel 5.3 一起工作答案

【问题标题】：Get vue.js 2.0 to work with Laravel 5.3让 vue.js 2.0 与 Laravel 5.3 一起工作
【发布时间】：2017-04-21 10:49:27
【问题描述】：

我正在尝试使用Laravel 5.3 设置Vue.js 2.0。我想将<router-view> </router-view> 放在主要的App.vue 组件中。我如何让它与Vue 2.0一起工作。

这不再起作用了：

router.start(App, 'app');

所以我尝试了这个：

const app = new Vue({
    router,
    render: h => h(App)
});

但这对我不起作用。我是否必须拉入一个包才能让它工作？

谢谢！

【问题讨论】：

您没有将应用程序挂载到 HTML 文档中的任何元素。因此，为例如应用程序定义具有唯一 ID 的根级别 - div，然后像这样const app = new Vue({ router, render: (h) => h(App) }).$mount('#app')
所以你的意思是在我的index.blade 文件中？ <div id="app"></div>
是的。基本上我不知道你完整的应用程序结构是什么，但这应该可以。看看我的仓库，看看我是怎么做到的github.com/bedakb/vuewp/tree/master/public/app/themes/vuewp，访问应用程序目录查看 vue 的东西- index.php 是我的#app 所在的地方
很酷，谢谢！但这是最佳做法吗？去看看那个回购。
我看不出这种方法有什么问题。你总是要说 Vue 在哪里渲染自己。

【解决方案1】：

您忘记提供将呈现 Vue 代码的元素。

因此，您必须使用唯一 ID 声明根级别，例如 #app 并将其挂载到 Vue 实例。

const app = new Vue({
    router,
    render: (h) => h(App)
}).$mount('#app')

您可以使用扩展运算符，而不是渲染函数，几乎相同，也许阅读起来更简洁

const app = new Vue({
    router,
    ...App 
}).$mount('#app')

【讨论】：