spa starter kit

Codecast 的單頁應用程式入門套件

一個高度自以為是的單頁應用程式入門套件，構建在 Vue.js 和 Laravel 之上。

該套件包含兩個單獨的專案作為單一頁面應用程式的起點：一個 Vue.js 專案（使用 vue-cli + webpack 範本建立）和一個 Laravel 5.3 專案。

它們不僅僅是新創建的項目，而且是一個完全工作的應用程序，可以修改和擴展以成為您自己的應用程式。

示範

現場演示可以在 https://spa.codecasts.rocks/ 中找到。

特徵

1. 客戶端
   • 使用 vue-cli + webpack 模板建立 Vue.js 2.0 項目
   • 使用 Vuex 進行集中狀態管理
   • 使用 Vue-router 進行路由管理
   • 使用 JWT 進行身份驗證
   • 使用本地儲存的資訊保持用戶登入
   • 使用 Axios 進行 HTTP 請求
   • 帶有 AirBNB 預設的 ESLint
   • 與 Laravel 的 LengthAwarePaginator 整合的分頁
   • SweetAlert 提供的警報和確認警報
2. 伺服器端
   • 拉拉維爾 5.3
   • 使用 JWT 進行身份驗證
   • 分形
   • Dingo 的 RESTful Web 服務（計劃中）

先決條件

確保您已安裝Node和Yarn （最新版本）以及PHP 7和MySQL 。

安裝

複製

這些命令將下載儲存庫並為您準備。

 git clone --depth 1 -b master [email protected]:codecasts/spa-starter-kit.git
cd spa-starter-kit
rm -rf ./.git/
git init
git add --all
git commit -m "init"

設定

1. 客戶端 - 這是一個使用 vue-cli 建立的 Vue.js 項目
   • 使用終端cd client && yarn && yarn run dev 。
2. 伺服器端 - 這是一個 Laravel 5.3 項目
   • 附終端：
     • 導航到webservice資料夾，然後：
     • composer install用於安裝 Laravel 和第三方包
     • touch database/database.sqlite來建立一個空的資料庫文件
     • cp .env.example .env配置安裝
     • php artisan key:generate為專案產生唯一金鑰
     • php artisan jwt:secret
     • php artisan migrate建立所有表
     • php artisan db:seed用假資料填滿表
     • php artisan serve

用法

1. 客戶端
   • 您的應用程式將在http://localhost:8080上提供
2. 伺服器端
   • API端點是http:// localhost:8000/api

測試

導航到webservice資料夾並運行 Composer 測試腳本

$ composer test 

值得一提的事情

1. 錯誤處理是透過使用 Axios 的攔截器在全域範圍內完成的。但您仍然可以在組件內捕獲 () 錯誤來執行與該範圍相關的操作。請參閱/client/src/plugins/http.js；

2. 錯誤訊息以相同的方式存在於單一元件（/client/src/modules/general/alerts.vue）中，並且它們的可見性由 Vuex 屬性控制。因此，要顯示/隱藏訊息，只需從任何元件內調度 Vuex 操作即可；

3. 伺服器請求期間顯示的微調器（請參閱右上角靠近使用者識別的部分）也由 Vuex 屬性控制。顯示/隱藏它的過程與上面第 2 項中概述的相同；

4. 路由和 Vuex 模組與它們工作的模組非常接近。始終在模組目錄中尋找routes.js 和store.js。請參閱/client/src/modules/categories；

5. 重要提示：在webservice目錄中發現的 Laravel 項目已被修改，除了新增路由和控制器之外。例如： webservice/app/Exceptions/Handler.php對其原始版本進行了修改，以將所有異常傳回給客戶端，而不僅僅是 HttpExceptions。其他變化也已到位。因此，我們的建議是始終使用此項目來建立您自己的項目，而不是將控制器和路由複製到新項目。

貢獻

1. 叉它！
2. 從開發建立功能分支： git checkout -b feature/my-new-feature
3. 寫下你的程式碼。評論你的程式碼。
4. 提交更改： git commit -am 'Add some feature'
5. 推送到分支： git push origin feature/my-new-feature
6. 提交拉取請求以開發分支：D

製作人員

Fábio Vedovelli 和熱心貢獻者。

執照

根據 MIT 許可證獲得許可。