iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 28
1
Modern Web

Vue.js 30天系列 第 28

Vue.js 28 - 搭配後端 - Laravel(環境建置)

後端框架產生的預設專案,通常不含前端框架,/public內乾乾淨淨,view頁面也沒特別載 js,光是要讓前面範例跑起來,就得花些功夫。

但 php框架 Laravel 是個例外,從5.3版開始將Vue.js納入預設。

搭配後端 - Laravel將分為三篇

  • 上篇介紹 環境建置
  • 中篇介紹 Vue檔案結構
  • 下篇介紹 編譯流程跟設定

Mac環境建置

首先你會需要安裝相關環境,建議透過homebrew安裝

安裝 Xcode & Homebrew

先檢查系統是否已安裝 Xcode

$ xcode-select --install

再安裝 homebrew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

安裝 php & composer

接著透過homebrew安裝composer

brew update
brew tap homebrew/dupes
brew tap homebrew/php
brew install php56
brew install composer

測試一下composer是否安裝完成

$ composer -v

印出當前版本表示OK

建立 Laravel 專案

$ composer create-project --prefer-dist laravel/laravel VueSite

VueSite為專案名稱,假設我們裝在home目錄下

~/VueSite

測試專案是否正常運作

$ cd ~/VueSite
$ php artisan serve
Laravel development server started on http://localhost:8000/

接著到瀏覽器打 http://localhost:8000 ,瞧瞧起始頁面,環境建置告一段落。


若是你碰到一些狀況,官方說明Laravel環境需要裝些extension,此外還有不少東西要裝,開發環境會建議你採用

  1. 跑 VM 的 laravel/homestead
  2. 跑 Docker 的 laraedit-docker

個人偏好Docker,裝的東西少、簡單XD

Mac原生Docker只需下載dmg安裝檔,一鍵完成,可參考這份文件

如何在Docker上跑Laravel,已有大大寫過了,小弟就就不贅述了
https://blog.wu-boy.com/2016/03/replace-laravel-homestead-with-docker/


上一篇
Vue.js 27 - 跨組件狀態管理 - Vuex(應用篇)
下一篇
Vue.js 29 - 搭配後端 - Laravel(Vue檔案結構)
系列文
Vue.js 30天30

尚未有邦友留言

立即登入留言