Урок: Создание блога на vue.js + Laravel + vuedo за 15 минут

В последнее время я повадился делится своими заметками с новичками в веб разработке. Для этого я использую блого-подобные системы. Большинство моих проектов построено на контент-фреймворке Drupal но всё чаще я стал смотреть по сторонам в выборе чего-то более шустрого на фронтенде. На момент написания статьи я тестировал блог на JS а именно на Ghost.

А в этой статье я поделюсь своим опытом как построить свой быстрый блог с фронтендом на известном JS фреймворке Vue.js и библиотеке Vuedo.

Для того, что бы выполнить этот урок, у вас уже должен быть веб-сервер с PHP и MySQL, установлен Composer, Node JS и Gulp. Так-же я продполагаю что вы используете Unix подобную ОС у меня это Mac OS, а на продакшене Ubuntu. Все шаги совпадают в различных системах, но могут отличаться в Windows, я предполагаю вы знаете об этих различиях раз выбрали эту ОС для разработки вместо нормальной.

Давайте приступим. Для начала скачайте Vuedo из репозитория на гитхабе https://github.com/Vuedo/vuedo Распакуйте его и закиньте в папку вашего веб сервера.

Установка очень простая, после распаковки архива переименуйте файл .env.example в .env затем необходимо настроить в этом файле параметрв, такие как Имя пользователя, хост, порт базы данных итд.

Здесь я приведу пример конфигурации:

APP_ENV=local  
APP_KEY=base64:gmx+enWOgaOw3RZLGFQzCK6LqMAV6TlOhDE3uU1b6tQ=  
APP_DEBUG=true  
APP_LOG_LEVEL=debug  
APP_URL=http://localhost
DB_CONNECTION=mysql //Необходимо изменить только следующие параметры  
DB_HOST=127.0.0.1    //Хост базы данных, по умолчанию это 127.0.0.1  
DB_PORT=3306         //Здеь так де указан хость по умолчанию  
DB_DATABASE=vuedo    //Имя базы данных которую необходимо предварительно создать  
DB_USERNAME=root     //имя пользователя БД  
DB_PASSWORD=1234     //ну и пароль для доступа к БД

Для того, чтобы начать установку откройте терминал, перейдите в папку проекта и по очереди выполните следующие команды:

composer install  
npm install  
php artisan key:generate  
php artisan migrate  
php artisan db:seed  
gulp  
php artisan serve

После отработки команды php artisan db:seed вы увидите ваш логин и пароль для админа. У меня отобразилось вот так:

New Admin created. Username: first@admin.com,  Password: 123pass

После выполнения последней команды php artisan serve наш сервер начнёт работать по адресу localhost:8000 где собственно и будет виден ваш блог.

Доступ к бекенду: http://localhost:8000/dashboard

Что мы получаем?

  • Управление статьями в блоге
  • Управление пользователями
  • Пользовательские роли
  • Модерирование статей
  • Управление мультимедиа файлами
  • Интеграция с сервисами Amazon s3
  • Редактор Markdown

Таким образом потратив всего несколько минут вы можете создать свой собственный блог и начать делиться своими идеями с миром.