laravel-vue - 我应该在 laravel 中手动加载 Vue JS 吗?
问题描述
我在 Laravel 项目的视图中添加了一些 Vue 代码。我是否需要在布局中包含 vuejs,例如:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.12/vue.js"></script>
或者 laravel 以某种方式处理它。
我试过的:
我跑了npm install
,npm run dev
现在我已经在公共目录中了app.js
。app.css
我认为有以下几点:
const app = new Vue({
el: '#app',
data: {
comments: {},
post: {!! $post->toJson() !!},
user: {!! Auth::check() ? Auth::user()->toJson() : 'null' !!},
comment: 'Your Comment'
},
mounted(){
this.getComments();
},
methods:{
getComments(){
//Some code here
}
}
});
但是当我访问这个视图时,我得到:
ReferenceError: Vue is not defined
解决方案
运行 npm prod 编译 vue 文件并将其添加到您希望它使用的 body 标记的末尾。
Vue.js 如何在 laravel 中使用
当我们运行 npm install 时,它会将所有包下载到node_modules
目录中提到的webpack.mix.js.
然后我们添加所需的插件resources/js/app.js
。
在resources/js/app.js
我们使用初始化 vue.js
new Vue(
el:'#id_of_the_element'
})
然后我们运行npm run prod
编译 vue.js 的缩小版本并放置它public/js/app.js
现在可以添加到需要的地方
<html>
<body>
<div id="id_of_the_element">
//....
</div>
//import your app.js here
<script src="/js/app.js">
</body>
</html>
推荐阅读
- geospatial - AgensGraph 中的地理空间数据使用情况
- c - 了解堆中的内存分配
- algorithm - 给定一个由 0-9 组成的数组和一个整数 n,找出可以从输入数组中形成的所有整数,其中位数 = n
- javascript - Nodemailer 应用程序在页面刷新时发送电子邮件
- python - 使用 Cython 编译 Python GUI Kivy 框架程序
- laravel - Laravel vue 不会返回元标记
- python - Firestore:如何对多个 firestore.Client().collection 返回的文档进行重复数据删除
- laravel - Laravel 上的路线是错误的
- scala - 在纱线上运行火花时杰克逊/番石榴罐冲突
- service - 我们能否使用 Watson Knowledge Studio 模型来提高 Watson Discovery 服务查询能力,尤其是在自然语言查询方面?