پیام مولوی - برنامه نویس وب



vue.js چیست ؟

 

در این مقاله میخواهیم ببینیم vue چی هست و چطور با لاراول مچ میشه و کار میکنه و اصلا چرا باید در کنار Laravel از Vue.js استفاده کنیم ؟‌

اگر از نسخه های جدید لاراول استفاده کرده باشید مطمئنا دیدید که در بسته ی لاراول فریمورک Vue.js و چیزهایی مثل Bootstrap و jQuery بصورت bundle درون لاراول قرار گرفته است .

همچنین اگر به مستندات لاراول نگاهی بکنید میبینید که در مستندات لاراول درباره ی کامپوننت های ویو گفته شده است پس به نظرتون این به این معنی نیست که لاراول ، فریمورک Vue.js را دوس داره ؟

 

پیش نیاز های این مقاله ی آموزشی درباره ی vue.js و laravel

  • دانش پایه ای درباره ی زبان PHP و فریمورک Laravel
  • دانش پایه ای درباره ی زبان JavaScript
  • پی اچ پی نصب شده روی ماشین شما ( لپتاپ یا کامپیوتر یا هر چیز دیگه )
  • باید composer  را نصب کرده باشید

 

قبل از شروع به مطالعه ی این مقاله دوست دارم یک منبع آموزشی عالی را برای این مقاله معرفی کنم که من لاراول و ویو جی اس در کنار هم را با آن دوره فرا گرفتم .

این دوره فارسی است و بسیار عالی تمام مباحث Vue.js را آموزش میدهد و همچنین یک بخش پروژه محور برای ساختن سایت تک صفحه ای یا SPA با لاراول دارد .

پیشنهاد میکنم حتما تهیه کنید

دوره ی اموزش پروژه محور Vue.js و Laravel برای ساخت سایت تک صفحه ای یا SPA

دوره ی آموزشی پروژه محور دفترچه تلفن با Vue.js و Laravel

Vue.js چیست ؟

 

بطور خلاصه << Vue.js یک فریمورک پیش رونده برای ، برای ساختن فرانت اند وب سایت ها میباشد >>‌

Vue در هسته اصلی آن فقط روی لایه نمای یک برنامه متمرکز شده است ، بنابراین ادغام با سیستم عامل های دیگر یا برنامه های موجود بسیار آسان است. همچنین می توانید به تنهایی از Vue استفاده کنید تا برنامه های تک صفحه ای پیشرفته بسازید.

 

Vue چگونه کار می کند؟

 

اگر قبل از دوره چارچوبهای جلویی JavaScript برای وب برنامه نویسی کرده اید ، می فهمید که مشکلات و ناکارآمدی های قابل توجهی وجود دارد که از تلاش برای به روزرسانی Model Object Model (DOM) ناشی می شود.

برای به روزرسانی DOM به طور مستقیم به این معنی است که باید صفحه را بگیرید ، بخش کوچکی از آن را تغییر دهید ، سپس کل DOM را بارگیری مجدد کنید تا این تغییرات موثر واقع شوند. اگر بگویید که شما در حال تماشای یک ویدیوی YouTube هستید و نظر جدیدی وجود دارد ، کل صفحه بارگیری مجدد می شود و فیلم شما مجدداً شروع می شود.

Vue سعی می کند با استفاده از DOM مجازی برای مدیریت نمایی که کاربر می بیند ، این چالش ها را حل کند. Vue اساساً نسخه ای از DOM را ایجاد می کند و آن را ذخیره می کند. وقتی تغییری در هر قسمت از DOM ایجاد شد ، فقط آن بخش از DOM را بدون بارگذاری مجدد DOM به روز می کنید. این بدان معنی است که نظرات بدون اینکه حتی متوجه آن شوید ، به روز می شوند.

Vue اجزای نمای واکنش پذیر و سازگار را فراهم می کند. Vue به رویدادها پاسخ می دهد و فوراً تغییراتی را در DOM ایجاد می کند. اجزای سازنده آن می توانند در ترکیب های مختلف انتخاب شوند و مونتاژ شوند تا بتوانند هر چه نیاز ایجاد شود را برآورده سازند. برای همه چیز می توانید اجزای سازنده داشته باشید و در هر صورت از آنها استفاده مجدد کنید.

 

چرا باید از Vue با Laravel استفاده کنید

 

این یک سؤال است که برای پاسخ به آن باید وقت خود را صرف کنید. این مهم است که بفهمید Vue چه پیشنهادی دارد و این برای کار شما چه معنایی دارد.

ما قصد داریم چند دلیل برای استفاده شما از Vue با Laravel را کشف کنیم.

 

همه چیز در فرانت اند اتفاق می افتد

 

برنامه های کاربردی در اینترنت امروز محور رویداد هستند. آنها ساخته شده اند تا اطمینان حاصل شود که کاربران در صورت استفاده از برنامه نصب شده بر روی رایانه خود ، یک تجربه یکپارچه را دوست دارند.

همه چیز اکنون در قسمت جلویی اتفاق می افتد و کاربران هرگز مجبور نیستند بار دیگر صفحه را بارگذاری مجدد کنند (با تشکر از شما جاوا اسکریپت).

 

اجزای واکنش پذیر یک برنامه محور رویداد عالی را ایجاد می کنند

 

Vue به شما امکان می دهد تا یک برنامه کاربردی در مقیاس کامل بسازید که به صورت رویداد محور باشد و کلیه فعالیت ها را به صورت کامل در جبهه انجام دهد. همچنین اجزای سازنده ای را ارائه می دهد که می توانند مورد استفاده قرار گیرند. با توجه به اینکه با لاراول به خوبی زوج می شود ، فقط لازم است چند بار سفر کنید تا داده های برنامه Laravel خود را درخواست کرده و UI را با تعویض قطعات بدون بارگذاری مجدد صفحه تغییر دهید.

شما می توانید با استفاده از ظاهر Vue بدون درز باعث تغییر UI شوید که به نوبه خود تجربه شگفت انگیزی را به کاربران شما می دهد. این می تواند به سادگی ساخت متن در صفحه شما قابل ویرایش یا تعویض یک مؤلفه کامل باشد تا بتوانید ویدئویی را که توسط کاربر بدون بارگذاری مجدد صفحه بارگیری شده است بارگیری کنید.

با توجه به سرعت و کارایی Vue ، این اتفاق خیلی سریع و هموار اتفاق می افتد بدون این که از منابع رایانه خود استفاده کنید.

 

ساخت فرانت اند پیچیده بهینه

 

اگر به ساخت برنامه ای با بخش هایی که باید به روزرسانی مکرر کنید فکر می کنید ، چاره ای جز این ندارید که جلوی اول را به طور کامل روی JavaScript اجرا کنید.

چالشی که در مورد وانیل جاوا اسکریپت یا jQuery یا سایر کتابخانه های JavaScript که دارای DOM مجازی نیستند ، این است که شما به سرعت مشکلات مربوط به عملکرد را با فرکانس افزایش به روزرسانی مواجه می کنید یا حجم داده ها برای ردیابی تغییرات تغییر می کند. تغییرات در DOM به تدریج لحظه به لحظه متوقف می شوند و شما شروع به تجربه وقفه های قابل توجه عملکرد می کنید.

وقتی برنامه خود را با مؤلفه های Vue تنظیم می کنید ، وابستگی های هر مؤلفه به طور خودکار در طول ارائه آن ردیابی می شود ، بنابراین سیستم دقیقاً می داند که هنگام تغییر داده ها ، کدام مؤلفه در واقع باید به روز شود. این باعث می شود که تمام به روزرسانی های DOM از حداقل منابع استفاده کنند و در نتیجه بازده کلی برنامه را بهبود ببخشند.

Vue همچنین با مدیران ایالتی مانند Flux ، Redux و Vuex سازگار است که در مدیریت جریان داده ها در برنامه های پیچیده عالی هستند. استفاده Vue از یک مدل اتصال داده به صورت یک طرفه همچنین مدیریت دولت را در برنامه های پیچیده آسانتر می کند.

 

Single Page Application یا سایت های تک صفحه ای

 

من می خواهم یک نظر شخصی را به اشتراک بگذارم - برنامه های Single Page بزرگترین اتفاقی است که در دهه گذشته در اینترنت رخ داده است. برنامه های کاربردی را برای مخاطبان گسترده تری از کاربران باز می کند تا پیش از این.

هنگامی که فکر می کنید بسیاری از کاربران اینترنت در خارج از برخی از مناطق آمریکایی و اروپا با مشکلاتی روبرو هستند ، می توانید از نقش برنامه های یک صفحه ای برای ارائه یک تجربه وب غنی به آنها قدردانی کنید.

کل دارایی برنامه شما یک بار بارگذاری می شود (و بیشتر آن در حافظه پنهان ذخیره می شود) ، تمام آنچه که درخواست شما هنگام تعامل کاربر با آن انجام می دهد داده های درخواستی است که به طور معمول برای انجام باند پهنای کم نیاز دارد.

 

با قابلیت یادگیری و استفاده آسان

ورود به Vue آسان است. این گزینه های بسیار کمی را برای شما به عنوان توسعه دهنده فراهم می کند و تعداد زیادی از آنها دور است. احساس می کنید وقتی از Vue استفاده می کنید JavaScript را می نویسید و می توانید یک برنامه ساده با JavaScript ساده تهیه کنید و در Vue معتبر است.

نکته مهم دیگر در مورد Vue این است که HTML معتبر شما نیز یک الگوی معتبر Vue است. می توانید بسته به نیاز برنامه خود ، آن را با جاوا اسکریپت پردازش کنید. شما همچنین می توانید با استفاده از یک ظاهر طراحی شده محدود ، اعمال تغییرات سبک در یک جزء واحد در پرواز را بدون تغییر در اجزای دیگر اعمال کنید.

اگر با جاوا اسکریپت آشنا هستید ، می توانید تنها با گذشت یک روز از خواندن اسناد ، یک برنامه غیر مهم را با Vue بسازید.

 

استفاده اولیه Vue با Laravel

Vue به زیبایی با Laravel ادغام می شود. می توانید مؤلفه های Vue ایجاد کنید و مانند آنها از برچسب های HTML معمولی در پرونده تیغ خود استفاده کنید. می توانید از خروجی تولید شده هنگام ارائه فایل تیغه ، به اجزاء منتقل کنید.

برای امتحان کردن آن ، نصب جدید Laravel را با استفاده از نصاب Laravel ایجاد کنید:

 $ laravel new vueapp 

اگر نصب کننده Laravel ندارید ، دستور زیر را برای به دست آوردن آن اجرا کنید:

$ cd vueapp

کتابخانه های Vue و سایر JavaScript را نصب کنید:

   $ npm install

 

برنامه را برای بارگذاری مجدد هنگام تغییر در دارایی js خود تنظیم کنید:

$ npm run watch

 

اگر دوست دارید تغییرات خود را در هنگام ایجاد تغییرات مشاهده کنید ، به خصوص که در حال یادگیری هستید ، پس حتما باید تماشای برنامه ها را تماشا کنید.

 

اکنون یک نمونه پایانه دیگر را باز کنید و سرور برنامه Laravel را شروع کنید:

    $ php artisan serve

 

ایجاد اولین کامپوننت های Vue.js

ساخت یک مؤلفه Vue آسان است. اگر پرونده منابع / units / js / app.js را باز کنید ، می بینید که Vue قبلاً وارد شده است و یک نمونه Vue نمونه ایجاد شده است.

شما می توانید اجزای Vue را از بسیاری جهات ایجاد کنید. برای این راهنما ، ما قصد داریم هر یک از مؤلفه ها را در یک پرونده جداگانه در فهرست منابع / دارایی / دارایی / js / مؤلفه ها ایجاد کنیم تا همه چیز مرتب نماند. همه پرونده های قالب Vue به پسوند .vue ختم می شوند ، بنابراین هر کسی را که درست ایجاد می کنید نام ببرید.

اکنون ، یک پرونده جدید Welcome.vue را درون فهرست مؤلفه ها ایجاد کنید و موارد زیر را به آن اضافه کنید:

    <template>
        <div class="flex-center position-ref full-height">
            <div class="content">
                <div class="title m-b-md">
                    Welcome to Vue.js on Laravel
                </div>
                <div class="links">
                    <a href="https://laravel.com/docs">View Laravel Docs</a>
                    <a href="https://vuejs.org/v2/guide/">View Vue Docs</a>
                    <a href="https://laracasts.com">Watch Videos</a>
                </div>
            </div>
        </div>
    </template>
    <script>
        export default {}
    </script>
    <style scoped>
        html, body {
            background-color: #fff;
            color: #636b6f;
            font-family: 'Raleway', sans-serif;
            font-weight: 100;
            height: 100vh;
            margin: 0;
        }

        .full-height {
            height: 100vh;
        }

        .flex-center {
            align-items: center;
            display: flex;
            justify-content: center;
        }

        .position-ref {
            position: relative;
        }

        .top-right {
            position: absolute;
            right: 10px;
            top: 18px;
        }

        .content {
            text-align: center;
        }

        .title {
            font-size: 84px;
        }

        .links > a {
            color: #636b6f;
            padding: 0 25px;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: .1rem;
            text-decoration: none;
            text-transform: uppercase;
        }

        .m-b-md {
            margin-bottom: 30px;
        }
    </style>

 

<template> برای صفحه ای که می خواهیم الگوی HTML را نگه می دارد. اگر HTML خود را در برچسب قالب محصور نکنیم ، باید با پیوند دادن به یک فایل خارجی یا اختصاص دادن کل محتوای قالب به عنوان متغیر به Vue ، قالب را مشخص کنیم.

اگر پرونده خارجی به نام MyTemplate.vue داریم ، باید کتابخانه های بیشتری در زمینه جاوا اسکریپت بدست آوریم تا به ما در تجزیه و استفاده از الگوی خارجی کمک کند. این دلیل کافی برای استفاده از الگوهای خارجی نیست.

اگر به محتویات محصور شده از برچسب <template> دقت کنید ، می بینید که این فقط نشانه گذاری HTML ساده است. مهمترین بخش این است که این الگوی معتبر Vue نیز هست. برای شروع نیازی به یادگیری ترفندهای جدید نیست.

بخش صفحه اسکریپت را در صفحه داریم که در آن کل منطق کنترل صفحه را تعریف می کنیم. برای استفاده از الگوهای Vue نیازی به تعریف یا اعلام چیزی نداریم ، بنابراین آن را خالی می گذاریم.
قسمت آخر بخش سبک است. ما یک پارامتر به آن اضافه کردیم - scoped که به Vue گفت "این سبک ها را به تنهایی به این مؤلفه اعمال کنید. آن را در دسترس برای هر مؤلفه دیگر قرار ندهید. "

این بدان معنی است که تغییراتی که در سبک های موجود ایجاد کرده ایم و سبک های جدیدی که اضافه کرده ایم خارج از این کامپوننت قابل مشاهده نخواهد بود.

 

استفاده از کامپوننت های Vue.js در blade فریمورک Laravel

ما اولین مؤلفه Vue را ساخته ایم (می دانم که خیلی راحت است). برای استفاده از آن در پرونده Welcome.blade.php ، باید Vue را آگاه کنیم که وجود دارد و نامی را به آن داده ایم که Vue با آن برچسب می زند.

پرونده منابع / units / js / app.js را باز کنید و آن را به شرح زیر ویرایش کنید:

 require('./bootstrap');

    window.Vue = require('vue');

    Vue.component('welcome', require('./components/Welcome.vue'));

    const app = new Vue({
        el: '#app'
    });

 

در مرحله بعد ، از قسمت Vue در پرونده منابع / views / Welcome.blade.php خود استفاده کنید:

[.]
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <meta name="csrf-token" content="{{ csrf_token() }}">

            <title>Laravel</title>

    [.]
        <body>
            <div id="app">
                <welcome></welcome>
            </div>
            <script type="text/javascript" src="js/app.js"></script>
        </body>
    [.]

 

مطمئن شوید که فایل را مطابق با آن ویرایش کرده و برچسب اسکریپت را در آن گنجانید تا اجزای Vue شما در صفحه قابل مشاهده باشد

اگر برنامه خود را برای مشاهده تغییرات در دارایی های js خود تنظیم کرده اید ، باید ببینید که قبلاً کل برنامه را ساخته است و در XXXms با موفقیت کامپایل می شود.
اکنون برای دیدن برنامه خود از http: // localhost: 8000 در مرورگر خود بازدید کنید.

 

لاراول با ویو جی اس - laravel با vue.js

پاس  دادن داده ها در component ها

بگذارید فرض کنیم می خواهیم جزئیات برنامه نویس برنامه را بیرون بیاوریم ، و نمی توانیم آن را بدانیم زیرا فقط برنامه می تواند آن جزئیات را ارائه دهد. ما به راحتی می توانیم جزئیات را به کامپوننت منتقل کنیم و در صورت ارائه آن را به نمایش بگذاریم.

در مرحله بعد ، ما یک عنوان را به مؤلفه منتقل خواهیم کرد و خواهیم دید که چگونه به نظر می رسد. پرونده تیغه استقبال واقع در منابع / بازدیدها / Welcome.blade.php را باز کنید و موارد زیر را اضافه کنید:

    [.]
    <div id="app">
       <welcome :title="'This cool app'"></welcome>
    </div>
    [.]

 

ما فقط اتصال داده ها به مؤلفه را با اتصال داده به متغیری که در آن جزء به عنوان یک ویژگی دریافت می کنیم (prop).

سپس پرونده Welcome.vue واقع در منابع / دارایی ها / js / parts / Welcome.vue را باز کنید و موارد زیر را به آن اضافه کنید:

<template>
                [.]
                <div class="title m-b-md">
                    {{title}}
                </div>

                [.]
    </template>

    <script>
        export default {
            props : ['title']
        }
    </script>

 

از کد بالا می بینید که Welcome to Vue.js را در لاراول با with {عنوان} replaced جایگزین کردیم. این روش برای خروجی محتوای متغیر در الگوی Vue شماست ، دقیقاً مانند الگوی تیغه لاراول.

در بخش اسکریپت ، ما با استفاده از غرفه های پیشنهادی: [[عنوان]] را دریافت کردیم.

آموزش لاراول با ویو جی اس - آموزش laravel با vue.js

بعد ، عنوان را از سرور برنامه خود عبور خواهیم کرد. پرونده مسیر / web.php را باز کنید و به شرح زیر ویرایش کنید:

 [.]
    Route::get('/', function () {
        return view('welcome',
            [
                'title' => "An even cooler way to do the title"
            ]
        );
    });

 

سپس پرونده Welcome.blade.php را به شرح زیر ویرایش کنید:

    [.]
    <div id="app">
       <welcome :title="'{{$title}}'"></welcome>
    </div>
    [.]

 

ما فقط عنوان محتوا را از سرور خارج می کنیم و مستقیماً به کامپوننت منتقل می کنیم.'

آموزش لاراول و ویو جی اس - آموزش Laravel  و Vue.js

در مرحله بعد ، ما یک صفحه دوم به برنامه خود اضافه می کنیم و یک جزء دوم را می سازیم. یک منبع پرونده جدید / دارایی / js / کامپوننت / Page.vue ایجاد کنید و موارد زیر را به آن اضافه کنید:

    <template>
        <div class="flex-center position-ref full-height">
            <div class="content">
                <div class="title m-b-md">
                    {{title}}
                </div>

                <div class="links">
                    <span class="subtitle">Name : {{author.name}}</span><br/>
                    <span class="subtitle">Role : {{author.role}}</span><br/>
                    <span class="subtitle">Code : {{author.code}}</span><br/>
                </div>
            </div>
        </div>
    </template>

    <script>
        export default {
            props : ['title', 'author']
        }
    </script>
    <style scoped>
        html, body {
            background-color: #fff;
            color: #939b9f;
            font-family: 'Raleway', sans-serif;
            font-weight: 100;
            height: 100vh;
            margin: 0;
        }
        .title {
            font-size: 60px;
        }
        .subtitle {
            font-size: 20px;
        }
        .full-height {
            height: 100vh;
        }

        .flex-center {
            align-items: center;
            display: flex;
            justify-content: center;
        }
        .position-ref {
            position: relative;
        }

        .top-right {
            position: absolute;
            right: 10px;
            top: 18px;
        }
        .content {
            text-align: center;
        }
        .m-b-md {
            margin-bottom: 30px;
        }
    </style>

 

مانند صفحه اول ، ما یک props دوم دریافت کردیم که یک موضوع json است که حاوی اطلاعات نویسنده است. ما صفحه را با اطلاعات نویسنده ارائه داده ایم

به ما اجازه دهید Vue را از مؤلفه جدیدی که تازه ایجاد کردیم آگاه کنیم. پرونده منابع / دارایی / js / app.js را باز کنید و موارد زیر را اضافه کنید:

  [.]

    Vue.component('welcome', require('./components/Welcome.vue'));
    Vue.component('page', require('./components/Page.vue'));

    [.]

 

اکنون یک فایل جدید / منابع / views / page.blade.php ایجاد کنید و موارد زیر را به آن اضافه کنید:

 <!doctype html>
    <html lang="{{ app()->getLocale() }}">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <meta name="csrf-token" content="{{ csrf_token() }}">

            <title>Page</title>

            <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
        </head>
        <body>
            <div id="app">
                <page :title="'{{$title}}'" :author="{{$author}}"></page>
            </div>
            <script type="text/javascript" src="js/app.js"></script>
        </body>
    </html>

 

در آخر مسیرها / web.php را باز کنید و مسیری را برای بارگیری صفحه در انتهای پرونده اضافه کنید:

  [.]

    Route::get('/page', function () {
        return view('page',
            [
                'title' => "Page 2 - A little about the Author",
                'author' => json_encode([
                        "name" => "Fisayo Afolayan",
                        "role" => "Software Enginner",
                        "code" => "Always keeping it clean"
                ])
            ]
        );
    });

 

برای مشاهده مسیر جدید ما ، به http://127.0.0.1:8000/page در مرورگر خود مراجعه کنید.

آموزش لاراول با ویو جی اس - آموزش laravel با vue.js

ساخت کل فرانت اند با Vue

روتر Vue ابزاری Vue برای ساخت ناوبری در برنامه frontend است. این امر به شما امکان می دهد مانند SPA مانند برنامه معمولی ، از SPA حرکت کنید. برای نصب روتر vue ، دستور زیر را در ترمینال خود اجرا کنید:

 $ npm install vue-router $ npm install vue-router

 

از فرآیند تماشایی که قبلاً با استفاده از ctrl + c شروع کرده ایم ، خارج شوید. بعد از نصب روتر vue ، ما دوباره شروع به مشاهده تغییرات خواهیم کرد.

 

تنظیم مسیرها vue و laravel

اکنون که روتر vue نصب شده است ، باید مسیرهای برنامه را تعریف کنیم. این راهنمائی برای جابجایی بین مؤلفه هایی است که ما ساخته ایم.

منابع / فایلهای جدید / دارایی / js / vueapp.js جدید فایل ایجاد کنید و آن را به شرح زیر ویرایش کنید:

 import Vue from 'vue'
    import VueRouter from 'vue-router'

    Vue.use(VueRouter)

    import App from './components/App'
    import Welcome from './components/Welcome'
    import Page from './components/Page'

    const router = new VueRouter({
        mode: 'history',
        routes: [
            {
                path: '/home',
                name: 'welcome',
                component: Welcome,
                props: { title: "This is the SPA home" }
            },
            {
                path: '/spa-page',
                name: 'page',
                component: Page,
                props: { 
                    title: "This is the SPA Second Page",
                    author : {
                        name : "Fisayo Afolayan",
                        role : "Software Engineer",
                        code : "Always keep it clean"
                    }
                }
            },    
        ],
    })
    const app = new Vue({
        el: '#app',
        components: { App },
        router,
    });

 

این چه جادوگری بود؟

شما قبلاً با آنچه واردات در JavaScript انجام می دهد و چگونگی انجام آن آشنا هستید. در کد بالا ، همه آنچه را که می خواهیم برای SPA استفاده کنیم ، وارد کرده ایم.

Vue.use (VueRouter) - گفتن vue برای استفاده از بسته روتر ، بنابراین می تواند به کلیه قابلیت های روتر دسترسی پیدا کند و مسیری را که ما در مورد ایجاد آن هستیم تفسیر کند.

const router = VueRouter جدید - مسیری را که برنامه ما در آن قرار دارد تعریف می کند. از طریق برنامه ، تعریف مسیر تغییر نخواهد کرد ، بنابراین ما باید آنها را ثابت کنیم.

mode - این روشی است که ما می خواهیم روتر از آن برای مدیریت ناوبری برنامه استفاده کند. حالت پیش فرض حالت هش است که از هش URL برای شبیه سازی یک URL کامل استفاده می کند تا هنگام تغییر URL بارگیری مجدد صفحه بارگیری نشود. حالت دیگر حالت تاریخ است که از API history.pushState برای دستیابی به پیمایش URL بدون بارگذاری مجدد صفحه استفاده می کند.

مسیرها - مسیری که دوست داریم برنامه ما داشته باشد.
مسیر - آدرس اینترنتی برای دسترسی به این مسیر
name - نامی که ما می خواهیم این مسیر را ارائه دهیم (مفید در هنگام پیمایش درون مؤلفه)
جزء - مؤلفه ای که می خواهیم هنگام بازدید از این مسیر بارگیری شود.
غرفه ها - ما به عنوان سوار آنها به اجزاء منتقل می شویم

قسمت آخر برنامه Vue را ایجاد می کند و مؤلفه اصلی را که روتر از آن به عنوان نقطه ورود استفاده می کند ، تعریف می کند. در مورد ما ، ما از جزء برنامه به عنوان مؤلفه اصلی استفاده کردیم.

  container  والد را تنظیم کنید

ما نیاز به ایجاد مؤلفه برنامه در فهرست / منابع / دارایی ها / js / parts داریم. موارد زیر را به آن اضافه کنید:

<template>
        <div>
                <nav class="navbar navbar-expand-md navbar-light navbar-laravel">
                <div class="container">
                    <ul class="navbar-nav">
                        <router-link :to="{ name: 'welcome' }" class="nav-link">Home</router-link>
                        <router-link :to="{ name: 'page' }" class="nav-link" >Spa-Page</router-link>
                    </ul>
                </div>
            </nav>
            <main>
                <router-view></router-view>
            </main>
        </div>
    </template>
    <script>
        export default {}
    </script>

 

Vue از <router-view> به عنوان خروجی برای هر مؤلفه ای که به عنوان URL آن بازدید می کنیم استفاده می کند. <router-link> مسئول پیمایش بین مؤلفه ها است. اگر توجه کنید ، ما اسمی را که مسیرها را به آن اختصاص داده ایم را برای انتساب مسیر اختصاص می دهیم.

 

اجزای ما را نصب کنید

قبل از استفاده از SPA باید چند کار انجام دهیم. ابتدا باید فایل vueapp.js را برای ساخت تنظیم کنیم. ما همچنین باید فایل تیغه ای را که SPA از آن استفاده می کند ، تعریف کند. در آخر ، ما باید مسیری را تعریف کنیم که ما را قادر به دستیابی به SPA کند.

برای تنظیم ساخت vueapp.js ، پرونده webpack.mix.js را به شرح زیر ویرایش کنید:

  [.]

    mix.js('resources/assets/js/app.js', 'public/js')
       .js('resources/assets/js/vueapp.js', 'public/js')
       .sass('resources/assets/sass/app.scss', 'public/css');

اکنون پرونده vueapp.blade.php را درون فهرست منابع / بازدیدها ایجاد کنید. آن را به شرح زیر ویرایش کنید:

<!doctype html>
    <html lang="{{ app()->getLocale() }}">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <meta name="csrf-token" content="{{ csrf_token() }}">

            <title>Outlet for SPA</title>

            <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
            <link rel="stylesheet" type="text/css" href="css/app.css">
        </head>
        <body>
            <div id="app">
                <app></app>
            </div>
            <script type="text/javascript" src="js/vueapp.js"></script>
        </body>
    </html>

 

سپس مسیر را در فایل مسیر / web.php تعریف کنید به شرح زیر:

 [.]
    Route::get('/{any}', function(){
            return view('vueapp');
    })->where('any', '.*');

 

اکنون با اجرای دستور زیر برنامه را بسازید:

   $ npm run prod

 

از برنامه در http://127.0.0.1:8000/home دیدن کنید

 

vue.js با laravel - نصب vue.js در laravel

 

نتیجه گیری

در این راهنما بررسی کرده ایم که Vue.js چه کاری می تواند انجام دهد و چگونه می تواند با Laravel کار کند. ما دلایلی را مورد بررسی قرار داد که شما باید استفاده از Vue با Laravel را در نظر بگیرید. ما همچنین چگونگی استفاده از Vue با Laravel را بررسی کردیم ، از جمله ساختن یک برنامه تک صفحه ای که بر روی Laravel اجرا می شود.

در کل وجود دارد که می توانید با Vue و Laravel بسازید. در این مقاله فقط سطح خراشیده شده است تا ایده ای راجع به آنچه می توان به دست آورد ارائه دهد. Vue بسیار آسان برای استفاده است و به خوبی با Laravel کار می کند. شما باید مستندات را بخوانید تا از اتفاقات جالبی که می توانید با آن بسازید یاد بگیرید.

کد منبع برنامه در این مقاله در GitHub موجود است.

 

 

 


آخرین ارسال ها

آخرین جستجو ها