用VueJS+webpack+semantic-UI+Laravel開發單頁應用

實驗性項目

https://github.com/zgldh/vuejs-laravel

結合當前最酷的幾樣玩意兒，製做單頁面Web APP。

vuejs-laravel

VueJS + webpack + semantic-UI + Laravel

• 先後分離的快速開發框架。
• 自帶 Laravel 基礎的帳號系統。
• 前端單頁面Web應用
• Webpack 構建前段頁面
• 使用 babel 來支持 ECMAScript6
• 使用 Vue 的單文件組件
• 使用 http-proxy 來解決先後端在開發模式下的Cookie問題。

安裝

1. 克隆代碼

2. 安裝後臺

   cd backend
       composer install
       // https://laravel.com/docs/5.2
       php artisan key:generate
       php artisan migrate

3. 配置Web服務器，須要支持 PHP5.6 以上。 例如域名爲 vuejs-laravel。服務器 root 配置到項目的public目錄下。(千萬注意不是backend/public)

4. 安裝前臺

   cd frontend
       npm install

5. 配置前臺後臺代理。打開 frontend/build/dev-server.js, 修改變量 devBackendDomain 爲第三步的域名。

6. 完畢

開發

cd frontend
    npm run dev

而後訪問 http://localhost:8080

frontend/src 目錄包含了前端代碼。代碼改動能實時反映在瀏覽器裏，我百思不得其解。

backend 目錄裏面就是典型的Laravel後端代碼

發佈

cd frontend
    npm run build

而後編譯過的前端代碼就出如今 public 目錄下。訪問你本地的Web服務器便可瀏覽。

參考資料

• Laravel: http://www.laravel.com
• VueJS: http://www.vuejs.org
• Webpack: http://webpack.github.io
• Semantic-UI: http://semantic-ui.cn

待續