最近學了vuejs和laravel，然后順便就擼了簡單的demo，這里將會根據這個demo介紹下如何使用vuejs+laravel開發一個簡單的單頁面應用，demo的github地址是https://github.com/helbing/laravel-vue-start-kit
開發環境
windows 窮，沒辦法，買不起蘋果
phpstudy windows中最好的php集成開發環境，沒有之一
開發中所需的一些包介紹
package.json
如果會vuejs的話，那么絕大多數的包就算不用介紹也知道是用來做什么的
composer.json
這里將會用dingo api和json web token來開發后台API
（1）dingo api文檔，https://github.com/dingo/api/wiki
（2）jwt-auth文檔，https://github.com/tymondesigns/jwt-auth/wiki
后端API配置
通過那兩篇文檔，我們知道需要在如下幾個地方進行配置
（1）在config/app.php中加入
（2）執行php artisan vendor:publish --provider="Dingo\Api\Provider\LaravelServiceProvider"和php artisan vendor:publish --provider="Tymon\JWTAuth\Providers\JWTAuthServiceProvider"，然后再config目錄下就會自動生成api.php和jwt.php，接下來執行php artisan jwt:generate生成JWT_SECRET，最后在.env文件中寫入
在app/Http/Kernel.php中加入
（3）jwt-auth依賴於user表，也就是database/migrations/2014_10_12_000000_create_users_table.php，執行php artisan migrate生成user表，並確保app/User.php存在，然后類中加入protected $table = 'user';，不然聲明使用user表，不然會默認使用users表
初嘗dingo api
打開app/Http/routes.php文件
（1）引入dingo api，$api = app('Dingo\Api\Routing\Router');
（2）創建API版本
（3）創建路由
（4）創建相應的controller和action
BaseController為
在開始訪問API前，我們先來進行一些開發環境上的配置
打開phpstudy
（1）其他選項菜單->打開hosts
（2）其他選項菜單->站點域名管理
（*）網站目錄需要指向項目的public文件，讓/public/index.php作為項目的入口文件
執行php aritsan api:routes
接下來就可以在postman調試接口了demo.vue:82/api/test
將.env文件中的API_VERSION修改為v2，再次訪問接口就可以看到去調用的是Api/V2/Controllers/TestController@index
將.env文件中的API_PREFIX修改為api2，執行php aritsan api:routes，可以看到
使用jwt-auth
這里將會以我寫的demo來講解如何使用jwt-auth這個包，打開Api/V1/Controllers/AuthController，可以看到里面寫了三個action
（1）me用於獲取用戶信息和驗證token是否過期或有效，通過傳遞token可以進行解析獲取用戶信息
（2）login用於登錄，password字段是必須傳遞的
（3）register用於用戶注冊，password必須采用bcrypt加密，不然在JWTAuth::attempt的時候會獲取不到token，JWTAuth::attempt會對傳遞進去password自動進行bcrypt加密
接下來我們注冊相應的路由，然后用postman進行接口調試,（*）使用jwt.auth中間件就意味着每次調用接口的時候必須傳遞token，中間件會對token進行驗證，如demo.vue:82/me?token=token_value
現在我們通過postman調用demo.vue:82/register接口，並傳入四個參數name，email，password，password_confirmation
可以看到成功返回了token和name，在數據庫中也能看到用戶確實被創建了
接下來我們來調試demo.vue:82/login接口，傳入email和password兩個參數
（1）輸入了錯誤的密碼
可以看到返回的錯誤信息
（2）輸入了正確的密碼
成功返回了token和name，這就說明用戶確實登錄成功了
最后我們來調試demo.vue:82/me這個接口，由於該接口使用了jwt.auth這個中間件，所以每次調用接口的時候需要帶上token
（1）傳入了一個不存在的token
（2）傳入了正確的token
成功返回了用戶信息
前端部分
前端部分我不打算講如何一步一步寫代碼，這里會講一些需要注意的點和一些技巧，參考我寫的demo的代碼，相信你一定能很快學會如何結合laravel和vuejs寫一個單頁面應用
（1）Elixir的使用
Elixir是Laravel提供了一套干凈、平滑的API用於為Laravel應用定義基本的Gulp任務
之后gulp && npm run dev，這樣以后保存代碼都會自動gulp，同時還會同步到瀏覽器，大大節約了開發時間
（2）beforeEach和自定義字段的使用
beforeEach和自定義字段的用法可以查看文檔http://router.vuejs.org/zh-cn/api/before-each.html和http://router.vuejs.org/zh-cn/route.html
首先打開/resources/assets/js/routers.js，可以看到這段代碼
我在路由跳轉前進行了一些判定，我在/auth/profile，/dog等路由設置了自定義字段auth: true，讓用戶在跳轉到這些頁面時候判定token存不存在，不存在則表明用戶未登陸，直接跳轉到/auth/login。在/auth/login，/auth/register我設置了自定義字段guest: true，讓用戶在登陸后（token存在）無法再跳轉到這些頁面，如果訪問了，則跳轉到/auth/profile
localStroage的使用
因為調用某些接口需要用到token，所以需要將token值存入localStroage中方便取出使用。雖然可以將token存在store中，然而在有些地方，比如ready()中無法獲取到store中的值（參考/resource/assets/js/components/Auth/Profile.vue），所以將token值存儲在localStroage比較合適。