کانفیگ فرانت 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 ) در کنارش اجرا کنید .