在laravel5.4中已經內置了vuejs前端框架，這里介紹如何使用它們一起工作。
假設你已經安裝好相關的依賴：
- 編輯routes/web.php
Route::get('/', function () {
return view('welcome');
});
我們的首頁將會顯示welcome.blade.php這個頁面。
- 修改resources/views/welcome.blade.php，修改頁面的body部分
<body>
<!-- vue的掛載點-->
<div id='app'>
<!--使用我們建立的組件-->
<example></example>
</div>
<!--載入打包后的js-->
<script src="js/app.js"></script>
</body>
- 建立resources/assets/js/components/Example.vue
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">{{ name || '匿名'}}</div>
<div class="panel-body">
{{msg}}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['name'],
data () {
return {
msg: '這是laravel下的一個vue組件example.'
}
}
}
</script>
- 修改resources/assets/js/bootstrap.js
加入window.Vuw = require('vue'); - 修改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組件
- 修改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
- 打包并執行
在cmd中切換到項目根目錄，執行npm run dev或yarn run dev
這樣就打包完成了。
接下來啟動內置服務器php artisan serve
順利的話就可以在localhost上看到相應頁面了。 - 自動打包更新
由于我們必須打包后才能在網站上看到結果，這樣每次對vue文件的修改后都要執行npm run dev，這樣實在太沒效率了，我們可以改用npm run watch或yarn run watch指令來自動打包更新。 - 發布
如果你想要開放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的<script>部分：
<script src="js/manifest.js"></script>
<script src="js/vendor.js"></script>
<script src="js/app.js"></script>
為了避免JavaScript執行時發生錯誤，必須按照上面的順序，自己的js放在最后載入。
這樣就完成了組件的抽取。
不過，在laravel中，我們通常會使用layout將頁面中的公共部分抽取出來。下面介紹laravel中layout的寫法：
假設你有一個layout文件resources/views/layouts/app.blade.php:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>@yield('title')</title>
</head>
<body>
<div id="app">
@yield('content')
</div>
<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script>
@yield('script')
</body>
</html>
我們指定了三個準備填入的內容title，content，script .
接著修改resources/views/welcome.blade.php
@extends('layouts.app')
@section('title', 'Laravel With Vue Demo')
@section('content')
<Hello name="Tony"></Hello>
<Hello></Hello>
@endsection
@section('script')
<script src="js/hello.js"></script>
@endsection
只要使用同一個layout的頁面，內容差不多就是這樣，并且原本寫在這里的代碼可以直接寫到vue中了。
