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 许可证获得许可。