Laravel 5.4中使用Vuejs的坑

Webpack的方式改变

使用过5.2或5.3的可能使用过Laravel-elixir,默认会有一个gulpfile.js来使用laravel-elixir进行webpack

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 your application as well as publishing vendor resources.
 |
 */

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

在webpack的时候需要输入命令$ gulp

---

然而在Laravel 5.4中使用的是Laravel-mix，通过查看webpack.mix.js可以发现使用了ES6的语法

const { mix } = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

使用方式

要使用Laravel-mix，其实就是把自己建立的css文件方法pulic/css目录下，js文件放到public/js中，注意的是要引入，当然css不容易出错，但是js可能会出错，后面会提到。

坑

使用Laravel-mixwebpack的方式和以往的Laravel-elixir不太相同，要使用的命令变成了$ (sudo) npm run dev，所以我们首先要确保npm以及nodejs的版本为最新，比如npm如果使用4.0.x的版本就会报错。

/**
* npm更新到最新版本
*
*/
$ npm install npm@latest -g
or
$ cnpm install cnpm@latest -g

/**
* nodejs在Ubuntu下更新到最新版本
*
*/
笔者在写这篇文章时nodejs稳定版已经到达了7.4.x了
但是如果使用Ubuntu16.10并且都update&&upgrade了之后的7.2.1也是毫无问题的
$ n stable
$ sudo rm /usr/local/bin/node
$ sudo ln -s /usr/local/n/versions/node/VERSION/node /usr/local/bin/node
VERSION要替换成自己下载好的文件夹文件名

Vue cannot read property ‘post’

如果你没有做出任何设置，那么如果你在代码中存在this.$http.post这样的代码，很有可能会报错
cannot read property 'post' of undefined

解决方法

• 安装vue-resource并且在bootstrap.js中使用

$ npm install vue-resource

/**
* bootstrap.js
*
*/

require('vue-resource');

更多请查看我的博客
by vampirebitter