#017 - Tworzenie Bloga z Laravel, Vue.js i Tabler.io

Wstęp

#

Ten przewodnik przeprowadzi Cię przez proces tworzenia nowoczesnego bloga, korzystając z Laravel jako backendu, Vue.js jako frameworku frontendowego oraz Tabler.io dla atrakcyjnego interfejsu użytkownika.

Krok 1: Przygotowanie środowiska

#

Przed rozpoczęciem upewnij się, że masz zainstalowane następujące elementy:

• PHP (7.4 lub nowszy)
• Composer
• Node.js i npm
• Git

Krok 2: Instalacja Laravel

#

1. Otwórz terminal i uruchom następujące polecenia:

   composer create-project laravel/laravel blog
   cd blog
   

2. Zainstaluj Laravel UI i skonfiguruj Vue.js:

   composer require laravel/ui
   php artisan ui vue
   

Krok 3: Konfiguracja Vue.js i Tabler.io

#

1. Zainstaluj wymagane pakiety npm:

   npm install
   npm install @tabler/core
   

2. Skonfiguruj Vite (plik: vite.config.js):

   import { defineConfig } from 'vite';
   import laravel from 'laravel-vite-plugin';
   import vue from '@vitejs/plugin-vue';
   
   export default defineConfig({
       plugins: [
           laravel({
               input: ['resources/css/app.css', 'resources/js/app.js'],
               refresh: true,
           }),
           vue({
               template: {
                   transformAssetUrls: {
                       base: null,
                       includeAbsolute: false,
                   },
               },
           }),
       ],
   });
   

3. Skonfiguruj resources/js/app.js:

   import './bootstrap';
   import { createApp } from 'vue';
   import App from './App.vue';
   
   createApp(App).mount('#app');
   

4. Dodaj style Tabler.io do resources/css/app.css:

   @import '@tabler/core/dist/css/tabler.min.css';
   

Krok 4: Konfiguracja serwera deweloperskiego

#

Aby uprościć uruchamianie serwera deweloperskiego, stworzymy alias bash:

1. Otwórz plik ~/.bashrc lub ~/.bash_aliases.
2. Dodaj następującą linię (zastąp adres IP swoim adresem):

   alias serve-blog='(php artisan serve --host=192.168.1.100 --port=8000 &) && npm run dev'
   

3. Zapisz plik i uruchom source ~/.bashrc (lub odpowiedni plik).

Teraz możesz używać polecenia serve-blog w katalogu projektu, aby uruchomić serwer Laravel i proces npm.

Kolejne kroki

#

1. Tworzenie głównego komponentu Vue
2. Konfigurację routingu w Laravel
3. Budowanie podstawowych widoków bloga
4. Integrację Tabler.io z komponentami Vue