laravel + vue + Element 搭建過程
注意:搭建前確保安裝好了composer
1.新建 Laravel5.5 專案
在 Web 伺服器目錄下，使用 Composer 建立laravel新專案
composer create-project --prefer-dist laravel/laravel Larvuent // 新專案名為 LarvuentLarvuent 安裝完成後，執行
cd Larvuent //進入專案目錄2.安裝前端依賴庫
進入 Larvuent 專案後，執行
npm install // 速度慢的請自行切換淘寶映象 cnpm(百度搜索 'npm淘寶映象' )3.在web.php路由檔案中,修改路由
Route::get('/', function () { return view('index');});4.新建 Hello.vue 檔案
在 resources/assets/js/components 目錄下新建 Hello.vue 檔案
<template> \t<div> <h1>Hello, Larvuent!</h1> <p class="hello">{{ msg }}</p> </div></template><script>export default { data() { return { msg: 'This is a Laravel with Vue and Element Demo.' } }}</script><style>.hello { font-size: 2em; color: green;}</style>5.修改 app.js 檔案，渲染元件
修改 resources/assets/js/app.js 檔案
require('./bootstrap');window.Vue = require('vue');// Vue.component('example', require('./components/Example.vue')); // 註釋掉import Hello from './components/Hello.vue'; // 引入Hello 元件const app = new Vue({ el: '#app', render: h => h(Hello)});說明：app.js 是構建 Vue 專案的主檔案，最後所有的元件都會被引入到這個檔案，在引入所有元件之前，bootstrap.js 檔案做了一些初始化的操作。同時，因為有了 window.Vue = require(‘vue’) 這句話，就不再需要使用 import Vue from ‘vue’ 重複匯入 Vue 了。
6.新建 Laravel 檢視檔案，和 Vue 互動
在 resources/views 目錄下新建 index.blade.php 檔案
<!doctype html>\t <html lang="en"> \t<head> \t \t <meta charset="UTF-8">\t \t <title>Larvuent</title> </head> <body> \t\t <div id="app">\t\t \t\t </div> \t\t<script src="{{ mix('js/app.js') }}"></script> </body> </html>說明：你可能在其他教程中看到有的在使用 assets 函式，這兩個函式的主要區別就是 assets 函式會直接使用所填路徑去 public 資料夾下找檔案，而 mix 函式會自動載入帶 hash 值的前端資源。這是和 Laravel 前端資源的快取重新整理相關的，如果現在還不明白，不要緊，你記得使用 mix 函式就好了，然後繼續往後看。
7.編譯前端元件，執行
執行以下命令，編譯前端資源
npm run dev 該命令預設會去執行根目錄下的 webpack.mix.js 檔案，使用 Laravel 提供的 Laravel Mix 編譯資源，並將編譯好的資源放在根目錄 public 資料夾下。
說明：前端編譯工具有許多，比如 gulp、webpack 等等，Laravel 也為自己提供了開箱即用的編譯工具，比如 Laravel5.3 及更早版本提供基於 gulp 的 Laravel Elixir 和從 Laravel5.4 開始提供基於 webpack 的 Laravel Mix，當然你也可以不使用官方提供的工具，自己去配置編譯工具。這些編譯工具的作用都是一樣的，使用方法也大同小異。前面說過，本文第一次安裝儘量簡單，能執行即可，所以不再去配置前端編譯工具，使用官方提供的即可。
訪問專案
到目前為止，Laravel + Vue 已經完成了，下面開始引入 Element。
8.引入 Element
執行命令，安裝 ElementUI
npm i element-ui -S修改 resources/assets/js/app.js 檔案
import Hello from './components/Hello.vue'; // 引入Hello 元件import ElementUI from 'element-ui'; //這裡已經直接引入所有的Element,其中的方法都可以直接額拿過來使用,不用再去單獨載入import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);9.修改 Hello.vue 檔案，使用 Element 元件
修改 resources/assets/js/components/Hello.vue 檔案為
<template> \t\t<div>\t <h1>Hello, Larvuent!</h1>\t <el-button @click="visible = true">按鈕</el-button>\t <el-dialog v-model="visible">\t <p>歡迎使用 Element</p>\t </el-dialog> </div></template><script>export default { data() { return { visible: false } }}</script><style>.hello { font-size: 2em; color: green;}</style>10.再次編譯前端資源，執行
好了，到目前為止，Laravel5.5 + Vue2 + Element 的環境搭建已經完成了，為了方便理解，第一次的搭建過程儘量簡潔。本文下面的部分將使用 Vue 路由等等，逐步完善，便於後期的開發。
完善 CSRF 防護
環境搭建完成後，訪問專案，開啟開發者模式，切換到 Console ，會看到以下報錯
Laravel 為了避免應用遭到跨站請求偽造攻擊(CSRF)，自動為每一個有效使用者會話生成一個 CSRF 令牌，該令牌用於驗證授權使用者和發起請求者是否是同一個人。
修改 resources/views/index.blade.php 檔案為
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>Larvuent</title></head><body> <div id="app"></div> <script src="{{ mix('js/app.js') }}"></script></body></html>注:建立一個 meta 標籤並將令牌儲存到該 meta 標籤中，問題可解決。
使用 Vue Router
構建大型專案時，使用 Vue Router 將是一個好的方式，它可以幫助你更好的組織程式碼，優化路由。
1.安裝 vue-router
執行命令，安裝 vue-router
npm install vue-router --save-dev2.配置 vue-router
在 resources/assets/js 目錄下新建目錄 router ，同時在 router 目錄下新建 index.js 檔案
import Vue from 'vue';import VueRouter from 'vue-router';Vue.use(VueRouter);export default new VueRouter({ saveScrollPosition: true, routes: [ { \t\tname: 'hello', path: '/hello', component: resolve => void(require(['../components/Hello.vue'], resolve)) } ] });3.引入 vue-router
在 resources/assets/js 目錄下新建 App.vue 檔案
修改 resources/assets/js/app.js 檔案為
// import Hello from './components/Hello.vue';import App from './App.vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-default/index.css';Vue.use(ElementUI);import router from './router/index.js'; const app = new Vue({ el: '#app', router, render: h => h(App) //將Vue的App.vue檔案掛載到index.blade.php的id='app' 的檔案中});4.重新編譯
npm run dev通過路由訪問 hello 元件
以後如果要新增元件，只需在 resources/assets/js/components 目錄下新建 vue 檔案，在 resources/assets/js/router/index.js 檔案裡引入，然後就可以通過路由訪問了。
程式碼拆分
程式碼拆分是將一些不經常變動的程式碼提取出來，以避免每次都要重新編譯，如果你頻繁更新應用的 JavaScript，需要考慮對 vendor 庫進行提取和拆分，這樣的話，一次修改應用程式碼不會影響 vendor.js 檔案的快取。
Laravel Mix 的 extract 方法可以實現這樣的功能：
修改專案根目錄下的 webpack.mix.js 檔案
mix.js('resources/assets/js/app.js', 'public/js') .sass('resources/assets/sass/app.scss', 'public/css') .extract(['vue','axios']);extract 方法接收包含所有庫的陣列或你想要提取到 vendor.js 檔案的模組，使用上述程式碼作為示例，Mix 將會生成如下檔案:
public/js/manifest.js // Webpack manifest runtimepublic/js/vendor.js // vendor 庫public/js/app.js // 應用程式碼同時修改 resources/views/index.blade.php 檔案為
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>Larvuent</title></head><body> <div id="app"></div> <script src="{{ mix('js/manifest.js') }}"> </script> <script src="{{ mix('js/vendor.js') }}"></script> <script src="{{ mix('js/app.js') }}"></script> </body> </html>全域性的 mix 函式會根據 public/mix-manifest.json 中的路徑去載入對應的檔案，同時也要注意引入三個 js 檔案的順序，以避免出錯。
重新執行命令，就可以了。
npm run dev總結
到目前為止，這篇文章也快寫完了，為了便於理解，第一次搭建時，儘量簡單，能執行即可，成功之後，再新增其它功能。前端編譯工具使用基於 webpack 的 Laravel Mix，一般情況下，它可以滿足大部分的需求，當然你也可以完全拋棄 Laravel Mix，配置自己的 webpack。