MYDS Logo

    MYDS

    Beta

    Laravel

    Panduan ringkas untuk memasang MYDS dalam aplikasi Laravel.

    Panduan Pemasangan

    Bina projek Laravel

    terminal
    laravel new nama-projek

    Anda akan ditanya beberapa soalan. Anda boleh membuat pilihan yang sesuai dengan keperluan projek anda:

    terminal
    ✔ Would you like to install a starter kit?
✔ Which testing framework do you prefer?
✔ Which database will your application use?
✔ Default database updated. Would you like to run the default database migrations?

    Penting

    Laravel Breeze atau Jetstream akan mengendalikan penyediaan frontend untuk anda, dengan memasang pakej yang diperlukan. Pastikan anda memilih React with Inertia atau mana-mana pilihan berasaskan React

    Selepas projek dibuat, pergi ke induk projek:

    terminal
    cd nama-projek
npm install && npm run build
composer run dev

    Pasang pakej

    npm i @govtechmy/myds-react @govtechmy/myds-style
// ☝️ Menggunakan kit permulaan (Laravel Breeze atau Jetstream)
 
npm i @govtechmy/myds-react @govtechmy/myds-style react react-dom @vitejs/plugin-react
// ☝️ Tidak menggunakan kit permulaan

    Konfigurasi stylesheet CSS

    Anda boleh menetapkan gaya melalui salah satu daripada dua (2) kaedah yang disenaraikan di bawah.

    1. Import CSS

    resources/css/app.css
    @import "@govtechmy/myds-style/full.css";

    2. Tailwind CSS

    Sila baca Konfigurasi Gaya untuk konfigurasi lanjutan.

    Konfigurasi vite.config.js & integrasi Blade

    Penting

    Jika anda menggunakan Laravel Breeze atau Jetstream, ini telah ditetapkan secara lalai melalui penyediaan berasaskan Inertia. Jika tidak melalui Inertia, anda perlu menetapkannya secara manual seperti di bawah.

    vite.config.js
    import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import react from "@vitejs/plugin-react"; 
 
export default defineConfig({
    plugins: [
        laravel({
            input: ["resources/css/app.css", "resources/js/app.js"],
            refresh: true,
        }),
        react(), 
    ],
});
    resources/views/app.blade.php
    # Pastikan konfigurasi berikut wujud dalam fail Blade.
<head>
  # Penyediaan bukan Inertia
  @viteReactRefresh
  @vite(['resources/css/app.css', 'resources/js/app.jsx']) 
 
  # Penyediaan Inertia
  @viteReactRefresh
  @vite(['resources/js/app.jsx', "resources/js/Pages/{$page['component']}.jsx"]) 
  @inertiaHead
</head>

    Mula menggunakan komponen!

    Cubalah <Button /> untuk memulakan membina dengan MYDS!

    resources/js/app.jsx
    import { Button } from "@govtechmy/myds-react/button";
 
function App() {
  return (
      <Button variant="primary-fill">
        Hello MYDS
      </Button>
  )
}
 
export default App

    Jika anda menggunakan penyediaan Inertia, anda boleh mula menggunakan komponen dalam komponen Pages anda.:

    app/js/Pages/Welcome.jsx
     
import { PageProps } from '@/types';
import { Head, Link } from '@inertiajs/react';
 
export default function Welcome() {
    return (
      <>
        <Head title="Welcome" />
        <Button variant="primary-fill">
          Hello MYDS
        </Button>
      </>
    );
 
}

    Sebelumnya

    Vite

    Seterusnya

    Akordion

    Di halaman ini

    Panduan PemasanganBina projek LaravelPasang pakejKonfigurasi stylesheet CSSKonfigurasi vite.config.js & integrasi BladeMula menggunakan komponen!