Laravel vue js 集成 - blade 文件中没有值

Question

我尝试将 vue.js 与 laravel 5.3 结合起来。我调用 "gulp"，它在 public 文件夹中创建 main.js 文件。我可以在浏览器中看到加载了 js 文件，但未显示 "message" 的值。它只写成{{message}}。有什么想法吗？

<body>
    <div class="container">
        <div class="content">
            <div class="title">                   
                <p>@{{ message }}</p>
            </div>
        </div>
    </div>
   <script src="js/main.js"></script> 
</body>

gulpfile:

var elixir = require('laravel-elixir');
require('laravel-elixir-browserify-official');
require('laravel-elixir-vueify');

elixir(mix => {
   mix.sass('app.scss').browserify('main.js');
});

main.js:

import Vue from 'vue';

var app = new Vue({
   el: 'body',
   data: {
      message: 'Hello Vue!'
   }
})

package.json:

"dependencies": {
   "bootstrap-sass": "^3.3.7",
   "gulp": "^3.9.1",
   "jquery": "^3.1.0",
   "laravel-elixir": "^6.0.0-9",
   "laravel-elixir-browserify-official": "^0.1.3",
   "laravel-elixir-vue-2": "^0.2.0",
   "laravel-elixir-vueify": "^1.0.0",
   "laravel-elixir-webpack-official": "^1.0.2",
   "lodash": "^4.16.2",
   "vue": "^2.0.1",
   "vue-resource": "^1.0.3"
}

Answer 1

编辑

package.json

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch",
    "slate": "rimraf node_modules && npm install",
    "clean": "rimraf public/css/app.css public/css/app.css.map public/js/app.js && npm run dev"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.3.7",
    "gulp": "^3.9.1",
    "jquery": "^3.1.1",
    "laravel-elixir": "^6.0.0-15",
    "laravel-elixir-browsersync-official": "^1.0.0",
    "laravel-elixir-vue-2": "^0.3.0",
    "laravel-elixir-webpack-official": "^1.0.10",
    "lodash": "^4.17.2",
    "moment": "^2.17.1",
    "vue": "^2.1.6",
    "vue-resource": "^1.0.3",
    "vuex": "^2.1.1"
  }
}

gulpfile.js

const elixir = require('laravel-elixir');

require('laravel-elixir-vue-2');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */

elixir(mix => {
    mix
        .sass('app.scss')
        .webpack('main.js');
});

除了一件事，您的代码很好。 Vue JS 不建议使用 body 元素作为 vue js 根。

The provided element merely serves as a mounting point. Unlike in Vue 1.x, the mounted element will be replaced with Vue-generated DOM in all cases. It is therefore not recommended to mount the root instance to or

https://vuejs.org/v2/api/#el

代码

<body>
    <div class="container" id="app"> <!-- Mind the id attached -->
        <div class="content">
            <div class="title">                   
                <p>@{{ message }}</p>
            </div>
        </div>
    </div>
   <script src="js/main.js"></script> 
</body>

和main.js

import Vue from 'vue';

var app = new Vue({
   el: '#app', // mind the root element is changed to app.
   data: {
      return { // mind the return in data
        message: 'Hello Vue!'
      }
   }
});

Laravel vue js 集成 - blade 文件中没有值

Laravel vue js integration - No values in blade file

laravel

vue.js

laravel-5

laravel-elixir