-1

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

2 回答 2

0

运行 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>
于 2019-10-26T19:12:09.290 回答
0

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

2-然后在resources\js\app.js 的app.js 文件中添加该vue 代码

于 2019-09-16T09:14:20.123 回答