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

【问题标题】：Shoud I load Vue JS manually in laravel?我应该在 laravel 中手动加载 Vue JS 吗？
【发布时间】：2020-01-17 02:06:13
【问题描述】：

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

【问题讨论】：

标签： laravel-vue

【解决方案1】：

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

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

【讨论】：

【解决方案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>

【讨论】：