احمد نادری | توسعه دهنده فول استک

کانفیگ فرانت vuejs بر روی پروژه لاراولی

لاراول یک فریم ورک بک اند هست و vue.js یک فریم ورک فرانت اند که در کنار همدیگه همه چیز رو میسازند!

ابتدا باید در نظر داشته باشید که npm و node js روی سیستمتون آخرین ورژن های پایدار رو داشته باشه .

در اوبونتو و در صورت نیاز با دستورهای زیر قبلیارو حذف کنید و از قسمت Ubuntu Software ورژن جدید node رو نصب کنید .

sudo apt-get purge nodejs npm

در ویندوز و مک هم به سایت nodejs برید و آخرین ورژن هارو دریافت و نصب کنید.

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

composer require laravel/ui

توجه:: اگر قصد استفاده از کتابخانه Inertia رو دارید بهتره به جای اجرای مراحل بعد این مطلب رو مطالعه و اجرا کنید چون ممکنه بعدا در اجرای پروژه با ورژن های مختلف تداخل پیش بیاد.

php artisan ui vue
npm install && npm run dev

احتمالا در این مرحله با خطایی مواجه میشید که مربوط به نصب vue-loader هست . این ابزار به شما در توسعه کمکتون میکنه. برای نصبش میتونید در داخل ترمینال پروژه کد زیر رو وارد کنید :

npm install vue-loader@^15.9.7 --save-dev --legacy-peer-deps

بعد وارد پوشه resources\views بشید و فایل welcome رو به شکل زیر تغییر بدید .

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Laravel Vue</title>
    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>
    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <div id="app">
        <main class="py-3">
            <h3>Laravel Vue</h3>
            <router-view></router-view>
        </main>
    </div>
</body>
</html>

خب حالا داخل پوشه resources/js/components یک فایل جدید به اسم app.vue بسازید و محتوای اونو مثلا به شکر زیر قرار بدید :

<template>
    <div>
        {{message}}
    </div>
</template>
<script>
export default {
    data() {
        return {
            message: 'Hello World'
        }
    }
};
</script>

خب حالا پکیج مربوط به روت vue js رو نصب کنید

npm install vue-router --save

حالا داخل پوشه خب حالا داخل پوشه resources/js یک پوشه جدید به اسم routes بسیازید و داخل اون هم یک فایل به home.js که محتوای اون رو به شکل زیر قرار بدید :

const home = () =>import ( '../components/app.vue')

export default [
    {
        path: '/home',
        component: home,
        name: 'home',
    },
]

حالا تو مسیر resources/js یک فایل به اسم routes.js ایجاد کنید و محتوای اونو به شکل زیر قرار بدید :

import Vue from 'vue'
import VueRouter from 'vue-router'
import home from './routes/home';

Vue.use(VueRouter);
export default new VueRouter({
    mode: 'history',
    scrollBehavior: (to, from, savedPosition) => ({ y: 0 }), 
    routes: [
        ...home,
    ],
});

حالا به فایل resources/js/app.js برید و چند خط آخرشو به شکل زیر تغییر بدید :

...
...
...
// router
import router from './routes.js';
window.router = router;
window.Fire = new Vue();

const app = new Vue({
    el: '#app',
    router,
}).$mount('#app');

حالا کافیه به فایل web.php روتینگ لاراول برید و کد اونو به شکل زیر تغییر بدید :

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

حالا با اجرای وب سرور( php artisan serve )میتوانید پروژه خودتون رو ببینید ! همچنین بهتره برای دیدن تغییرات لحظه ای (npm run dev && npm run watch ) در کنارش اجرا کنید .

6 نوامبر 2021

درباره من

دسته بندی مطالب