آموزش نصب و راه اندازی inertia - vue3

آموزش نصب و راه اندازی inertia - vue3Vue.js یک ابزار قدرتمند است که بسیاری از مزایای زیادی نسبت به استفاده از قالب های Blade لاراول را دارد، با این حال در ابتدا ممکن است برای شما سخت باشد که بخش های front-end و backend خود را با هم ترکیب کنید. در اینجا “Inertia” به کمک شما می آید، این ابزار به شما کمک می کند تا ارتباط بین بخش های front-end و backend خود را با یکدیگر برقرار کنید. این روش به عنوان `modern monolith` شناخته می شود.نحوه راه اندازی Inertiaموارد زیر مربوط به لاراول 10 (به همراه Vite) است و فرض می‌کنیم که شما از قبل با Vue آشنایی دارید.مرحله 1 - نصب dependenciescomposer require inertiajs/inertia-laravel tightenco/ziggynpm install @inertiajs/inertia @inertiajs/inertia-vue3 @inertiajs/progress @vitejs/plugin-vue vueمرحله 2 - ایجاد ساختار پوشه هاساختار پوشه های پروژه را به شکل زیر ایجاد کنید.resources --| js ----| Components ----| Layouts ----| Pagesشما میتوانید که ساختار را متناسب با پروژه خودتان شخصی سازی کنید، فقط توجه داشته باشید که حتما باید مسیرها (path) جدید را در فایل های config بروزرسانی کنید.مرحله 3 - ایجاد یک فایل root با فرمت bladeفایل resources/views./app.blade.php را ایجاد کنید و کد زیر را جایگذاری کنید.<!DOCTYPE html> <html lang=&quot{{ str_replace('_', '-', app()->getLocale()) }}&quot> <head> <meta charset=&quotutf-8&quot> <meta name=&quotviewport&quot content=&quotwidth=device-width, initial-scale=1&quot> <title inertia>{{ config('app.name', 'Laravel') }}</title> @routes @vite('resources/js/app.js') @inertiaHead </head> <body> @inertia </body> </html>مرحله 4 - ایجاد middleware مربوط به Inertiaدستور زیر را اجرا کنید تا middleware مربوط به Inertia در مسیر app/Http/Middleware/HandleInertiaRequests.php ایجاد بشود.php artisan inertia:middlewareزمانی که فایل middleware ساخته شد وارد فایل app/Http/Kernel.php بشوید و به عنوان آخرین آیتم در `web middleware` کد زیر را جایگذاری کنید.'web' => [ // ... \App\Http\Middleware\HandleInertiaRequests::class, ],مرحله 5 - تنظیم فایل کانفیگ Viteسپس شما نیاز دارید تا `Vue plugin` را در فایل کانفیگ Vite اضافه کنید، کد زیر را در 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/js/app.js', // Add your stylesheet here ], refresh: true, }), vue({ template: { transformAssetUrls: { base: null, includeAbsolute: false, }, }, }), ], resolve: { alias: { '@components': '/resources/js/Components', '@layouts': '/resources/js/Layouts', '@pages': '/resources/js/Pages' }, }, });ایجاد یک فایل jsconfig.json هم بسیار مهم است تا به IDE شما کمک کند تا alias هایی که در بالا تعریف کرده ایم را شناسایی کند.{ &quotcompilerOptions&quot: { &quotbaseUrl&quot: &quot.&quot, &quotpaths&quot: { &quot@components/*&quot: [&quotresources/js/Components/*&quot], &quot@pages/*&quot: [&quotresources/js/Pages/*&quot], &quot@layouts/*&quot: [&quotresources/js/Layouts/*&quot] } }, &quotexclude&quot: [&quotnode_modules&quot, &quotpublic&quot] }مرحله 6 - ساخت برنامه با Inertiaدر مسیر resources/js/app.js ما نیاز به اجرای برنامه inertia داریم که میتوانید با استفاده از کد زیر این کار را انجام بدهید.import './bootstrap'; // Import your stylesheet here import { createApp, h } from 'vue'; import { createInertiaApp } from '@inertiajs/inertia-vue3'; import { InertiaProgress } from '@inertiajs/progress'; import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'; import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m'; const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Reflect'; createInertiaApp({ title: (title) => `${title} - ${appName}`, resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')), setup({el, app, props, plugin}) { return createApp({render: () => h(app, props)}) .use(plugin) .use(ZiggyVue) .mount(el); }, }).then(() => { InertiaProgress.init({}); })ساخت بخش front-end برنامهاول از همه، ما باید یک مسیر برای صفحه خود ایجاد کنیم. به جای بازگرداندن یک view، اکنون یک درخواست Inertia برمی گردانیم:Route::get('/hello-world', function () { return Inertia::render('HelloWorld', [ 'message' => 'Look mum, I\'m doing Inertia!', ]); });همینطور که مشاهده میکنید ما الان با استفاده از متد Inertia::render()، اطلاعات مربوط به کامپوننت Vue را ارسال میکنیم و برای ارسال پارامتر به کامپوننت هم میتوانید مانند لاراول اطلاعات را ارسال کنید. صفحات کامپوننت ها در پوشه resources/js/Pages قرار دارند، اینجا باید یک کامپوننت Vue جدید به اسم HelloWorld.vue ایجاد کنیم.<template> <div> <h1>Hello World!</h1> <p>{{ message }}</p> </div> </template> export default { props: { message: { type: String, required: true } } } اختیاری - نصب کردن Tailwind CSSدر اینجا ما پروژه Vue خودمون را راه اندازی کرده ایم، حالا وقتشه که قالب پروژه را دیزاین کنیم.مرحله 1 - نصب dependenciesnpm install tailwindcss @tailwindcss/forms @tailwindcss/typography postcss postcss-importautoprefixerاجرا دستور زیر اختیاری میباشد و در صورتی باید اجرا شود که شما بخواهید از Tailwind UI در ظاهر پروژتون استفاده کنید.npm install @headlessui/vue @heroicons/vueمرحله 2 - کانفیگ کردن Tailwind CSSفایل کانفیگ tailwind.config.js را ایجاد کنید، اگر فایل را ایجاد نکنید Tailwind بدون فایل کانفیگ نمیتونه کار کنه./** @type {import('tailwindcss').Config} */ module.exports = { content: [ &quot./app/**/*.blade.php&quot, &quot./resources/**/*.blade.php&quot, &quot./resources/**/*.js&quot, &quot./resources/**/*.vue&quot ], plugins: [ require('@tailwindcss/forms'), require('@tailwindcss/typography'), ] }module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, }مرحله 3 - افزودن Tailwind در فایل stylesheetدر نهایت شما باید کد زیر را در فایل stylesheet جایگذاری کنید.@tailwind base; @tailwind components; @tailwind utilities;حالا شما میتوانید از Tailwind درون پروژه خودتون استفاده کنید. خیلی ممنون از شما که این مقاله را مطالعه کردید، اگر در خصوص در این مقاله هرگونه مشکل/سوالی داشتید حتما در قسمت نظرات سایت با ما در میان بگذراید.منبع: وبسایت میموک