更多請關注Laravel.so、PIGJIAN BLOG
現今前端組件化開發、MVVM 模式，給開發帶來了很多的便利，可讀性、可維護性更高。然而自 Laravel 5.3 開始，VueJS 成為框架默認的標配。
本文基於 Laravel 5.1 LTS 版本引入 Vue 2.0 進行配置。
我已在 Github 配置好，Laravel 5.1 和 Laravel 5.2 均有，Clone 下來后按照 README 安裝依賴后即可用：
https://github.com/jcc/vue-laravel-example
步驟一：配置 package.json
1. 在根目錄下修改 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" } }2. 安裝配置的依賴，在根目錄下，運行：
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 並創建基礎例子
1. 在 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+ 有明顯區別。
2. 在 js 文件夾下創建 App.vue 文件
App.vue：
<template> <div id="app"> <router-view></router-view> </div> </template>3. 在 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 代碼
1. 定義路由，在 app/Http/routes.php 加入：
Route::get('example', function () { return view('example'); });2. 創建 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>3. 編譯合並 JS 代碼
在命令行下，輸入：
gulp如需實時編譯，可輸入 gulp watch
步驟五：訪問
最后通過瀏覽器訪問：http://laravel.app/example
Laravel5.1 + Vue2.0 組件化配置
https://github.com/jcc/vue-laravel-example
更多請關注Laravel.so、PIGJIAN BLOG
你可能感興趣的文章
浙ICP備 15005796號-2 浙公網安備 33010602002000號 杭州堆棧科技有限公司版權所有
CDN 存儲服務由 又拍雲 贊助提供
你好，問下你這個服務是用什么起的？即http://laravel.app/example是怎么定義的？
贊 +2