Laravel 5.1 中使用 Vue2.0 組件化開發（配置）
現今前端組件化開發、MVVM 模式，給開發帶來了很多的便利，可讀性、可維護性更高。然而自Laravel 5.3 開始，VueJS 成為框架默認的標配。
本文基于 Laravel 5.1 LTS 版本引入 Vue 2.0 進行配置。
我已在 Github 配置好，Clone 下來后按照 README 安裝依賴后即可用： https://github.com/jcc/vue-laravel-example
步驟一：配置package.json
在根目錄下修改 package.json , 可在 devDependencies 下配置你所需的所有依賴。我的配置如下：
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch" },
"devDependencies": {
"bootstrap-sass": "^3.3.7",
"gulp": "^3.9.1",
"jquery": "^3.1.0",
"laravel-elixir": "^6.0.0-9",
"laravel-elixir-vue": "^0.1.4",
"laravel-elixir-webpack-official": "^1.0.2",
"laravel-elixir-browsersync-official": "^1.0.0",
"lodash": "^4.14.0",
"vue": "^2.0.0-rc.2",
"vue-resource": "^0.9.3",
"vue-router": "^2.0.0-rc.3" }
}
安裝配置的依賴，在根目錄下，運行：
npm install
當然你可以通過 npm install {package_name} --save-dev 的方式安裝你所需的包。
步驟二：配置 gulpfile.js
Laravel 5.1 的 gulpfile.js 內容如下：
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.sass('app.scss');
});
可見還沒使用 ES6 的語法，因此我們修改如下：
const elixir = require('laravel-elixir');
require('laravel-elixir-vue');
elixir(mix => {
mix.webpack('main.js');
});
mix.webpack('main.js') 是將 resources/assets/js 下的所有文件進行編譯合并，合并到 public/js/main.js 文件。
步驟三：配置 Vue 并創建基礎例子
在 resources/assets 文件夾下 創建 js/main.js 文件，該文件主要引入 vue 、 vue-router 等所需的包。
main.js ：
import Vue from 'vue/dist/vue.js'
import App from './App.vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import Example from './components/Example.vue'
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: [
{ path: '/example', component: Example }
]
})
new Vue(Vue.util.extend({ router }, App)).$mount('#app')
由于 vue-router 需要Vue.js 0.12.10+ 并不支持 Vue.js 2.0，因此以上的是根據 vue-router v2.0.0+ 的版本配置，配置跟 0.12.10+ 有明顯區別。
在 js 文件夾下創建 App.vue 文件
App.vue ：
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
在 js 文件夾下創建 components/Example.vue 文件
Example.vue ：
<template>
<h1>{{ msg }}</h1>
</template>
<script>
export default {
data () {
return {
msg: 'This is a Example~!'
}
}
}
</script>
到此 vue 的配置已完成，接下來需要配置一下 Laravel, 讓 Laravel 成功引導到 Vue
步驟四：定義路由、編譯合并 JS 代碼
定義路由，在 app/Http/routes.php 加入：
Route::get('example', function () {
return view('example');
});
創建 example.blade.php 模板：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body>
<div id="app"></div>
<script src="{{ asset('js/main.js') }}"></script>
</body>
</html>
最后編譯合并 JS 代碼，在命令行下，輸入：
gulp
如需實時編譯，可輸入 gulp watch
步驟五：訪問
最后通過瀏覽器訪問： http://laravel.app/example
https://github.com/jcc/vue-laravel-example
更多請關注 Laravel.so 、 PIGJIAN BLOG
來自：http://laravelacademy.org/post/5656.html