在Laravel5.4中使用Vue2.1

在laravel5.4中已经内置了vuejs前端框架，这里介绍如何使用它们一起工作。
假设你已经安装好相关的依赖：

1. 编辑routes/web.php

Route::get('/', function () {
    return view('welcome');
});

我们的首页将会显示welcome.blade.php这个页面。

2. 修改resources/views/welcome.blade.php，修改页面的body部分

3. 建立resources/assets/js/components/Example.vue

4. 修改resources/assets/js/bootstrap.js
   加入window.Vuw = require('vue');
5. 修改resources/assets/js/app.js

require('./bootstrap');

import Example from './components/Example'
new Vue({
  el: '#app',
  components: { Example }
})

这个文件被打包后会在welcome.blade.php中被使用。
以上部分总共建立了三个文件

• welcome.blade.php: laravel的样板页
• Example.vue: vue单文件组件
• app.js: 建立vue实体和注册vue组件

6. 修改webpack.mix.js
   接下来就是打包了，打包会把.vue组件和.js编译成一个独立的.js文件，由于我们require('./bootstrap')，所以其中的js也会被一起打包。laravel5.4引入了mix，比之前的laravel elixir更简单好用，它使用webpack来执行打包，相应的设置在webpack.mix.js中，现在我们修改其中的内容：

let mix = require('laravel-mix');

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

目的是把resources/assets/js/app.js打包后放到public/js/app.js

7. 打包并执行
   在cmd中切换到项目根目录，执行npm run dev或yarn run dev
   这样就打包完成了。
   接下来启动内置服务器php artisan serve
   顺利的话就可以在localhost上看到相应页面了。
8. 自动打包更新
   由于我们必须打包后才能在网站上看到结果，这样每次对vue文件的修改后都要执行npm run dev，这样实在太没效率了，我们可以改用npm run watch或yarn run watch指令来自动打包更新。
9. 发布
   如果你想要开放public/js/app.js，由于它们是尚未被压缩的内容，而且引入了其它元件，文件大小有1MB多，这可不能拿来给实际的产品用。当你的网站要发布到产品服务器上时，必须使用npm run prod或yarn run prod 来进行打包压缩。

抽取组件
通常你的网站不会只有一页，因此你会在不同的页面建立不同的.vue和.js文件，但是它们都是使用同样的一些组件，当你打包时，这些相同的组件就会被重复打包在不同的.js文件中，浪费资源。
我们可以将这些会重复使用的组件抽取出来，封装成一个独立的文件，这样只会在第一次载入时多花一点时间，之后浏览器就可以很快地从中读取，不会重复下载相同的内容。
先来看看我们使用了哪些组件，打开resources/assets/js/bootstrap.js，看看全局变量请求了哪些组件，有lodash,jquery,axios以及我们加入的vue，我们要将这些组件抽取成为一个独立的文件。
首先，编辑webpack.mix.js，使用extract指令来抽取组件：

mix.js('resources/assets/js/hello.js', 'public/js')
   .extract(['lodash','jquery','axios','vue']);

这样当你打包时就会产生2个额外文件和一个自己写的文件：

• public/js/manifest.js: webpack manifest runtime
• public/js/vendor.js: 使用的组件全部打成一包
• public/js/hello.js: 自己的js文件，这里是hello.js

之后我们要稍微调整一下welcome.blade.php的

为了避免JavaScript执行时发生错误，必须按照上面的顺序，自己的js放在最后载入。

这样就完成了组件的抽取。

不过，在laravel中，我们通常会使用layout将页面中的公共部分抽取出来。下面介绍laravel中layout的写法：
假设你有一个layout文件resources/views/layouts/app.blade.php:

    
    
    


    

        @yield('content')
    
    
    
    @yield('script')

我们指定了三个准备填入的内容title，content，script .
接着修改resources/views/welcome.blade.php

@extends('layouts.app')

@section('title', 'Laravel With Vue Demo')

@section('content')
    
    
@endsection

@section('script')
    
@endsection

只要使用同一个layout的页面，内容差不多就是这样，并且原本写在这里的代码可以直接写到vue中了。