Question

我在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

Answer 1

1-您应该将脚本添加到索引文件中

2-然后将这些vue代码添加到resources \ js \ app.js的app.js文件中

Answer 2

运行npm prod编译vue文件，并将其添加到要使用的body标签的末尾。

如何在laravel中使用Vue.js

当我们运行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>

我应该在laravel中手动加载Vue JS吗？

2 个答案: