spa starter kit

Стартовый комплект одностраничного приложения Codecast

Высоко оцененный стартовый набор одностраничных приложений, созданный на основе Vue.js и Laravel.

Этот пакет содержит два отдельных проекта, которые могут служить отправной точкой для одностраничного приложения: проект Vue.js (созданный с помощью шаблона vue-cli + webpack) и проект Laravel 5.3.

Это не просто только что созданные проекты, а полностью работающее приложение, которое можно модифицировать и расширять, чтобы оно стало вашим собственным приложением.

Демо

Живую демо-версию можно найти по адресу https://spa.codecasts.rocks/.

Функции

1. Клиентская часть
   • Проект Vue.js 2.0 создается с помощью шаблона vue-cli + webpack
   • Централизованное управление состоянием с помощью Vuex
   • Управление маршрутами с помощью Vue-router
   • Аутентификация с помощью JWT
   • Задерживать вход пользователя в систему с использованием локально сохраненной информации
   • HTTP-запросы с Axios
   • ESLint с предустановкой AirBNB
   • Пагинация интегрирована с LongAwarePaginator от Laravel.
   • Оповещения и оповещения с подтверждением, предоставляемые SweetAlert
2. Серверная часть
   • Ларавел 5.3
   • Аутентификация с помощью JWT
   • фрактал
   • Веб-сервис RESTful с Dingo (планируется)

Предварительные условия

Убедитесь, что у вас установлены 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.js, созданный с помощью vue-cli.
   • С cd client && yarn && yarn run dev .
2. Серверная часть — это проект Laravel 5.3.
   • С терминалом:
     • Перейдите в папку веб-сервиса , а затем:
     • 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 для обслуживания приложения на локальном хосте: 8000

Использование

1. Клиентская часть
   • Ваше приложение будет доступно по адресу http://localhost:8080.
2. Серверная часть
   • Конечная точка API — http:// localhost:8000/api.

Тестирование

Перейдите в папку веб-сервиса и запустите тестовый скрипт композитора.

$ composer test 

Вещи, которые стоит упомянуть

1. Обработка ошибок осуществляется глобально с использованием перехватчиков Axios. Но вы все равно можете использовать ошибки .catch() внутри компонентов для выполнения действий, связанных с этой областью. См. /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. Важно : проект 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

Кредиты

Фабио Ведовелли и преданные авторы.

Лицензия

Лицензировано по лицензии MIT.