bardia
6 سال پیش توسط bardia مطرح شد
12 پاسخ

تغییر فایل vue در لاراول

سلام دوستان من یه Sample ساده که vue وlaravel هست رو دانلود کردم
اینم لینکش

https://github.com/fagray/vuejs2-laravel53-starter

اینم فایلroute.js

import VueRouter    from 'vue-router'

//Define route components
const Home = { template: '<div>ddd home</div>' }
const Foo = { template: '<div>ddd Foo</div>' }
const Bar = { template: '<div>Bar</div>' }

// lazy load components
const Room = (resolve) => require(['./components/Room.vue'], resolve)

export default new VueRouter({
    mode: 'history',
    base: __dirname,
      routes: [
        { path: '/', component: Home },
        { path: '/foo', component: Foo },
        { path: '/bar', component: Bar },
        { path: '/rooms', component: Room } // example of route with a seperate component
      ]
});

حال من تغییراتی که میدم مثلن نامشو میخوام عوض کنم توی خروجی همون نام قبلی هست هیچ تغیر نمی کنه
مشکل از کجاست؟
مثلن نام زیر رو میخوام تغییر بدم

<div>home</div>

به صورت زیر

<div>ddd home</div>

اما تغییرات اعمال نمیشه


ثبت پرسش جدید
developer
تخصص : برنامه نویس
@developer 6 سال پیش مطرح شد
0

کامپایل کردید؟
در ضمن اگه سایت spa نمیخواید از vuerouter استفاده نکنید


bardia
تخصص : Golang/Laravel
@mrbardia72 6 سال پیش مطرح شد
0
bardia
تخصص : Golang/Laravel
@mrbardia72 6 سال پیش مطرح شد
0

نمیدونم چرا تغییر میدم داخل div هر template رو چیزی اعمال نمیشه
برای اجراش
باید از فرمامین زیر استفاده کنم؟

run npm dev
or
run npm wath
const Home = { template: '<div>ddd home</div>' }
const Foo = { template: '<div>ddd Foo</div>' }
const Bar = { template: '<div>Bar</div>' }

developer
تخصص : برنامه نویس
@developer 6 سال پیش مطرح شد
0

بله کدهای vue رو باید با laravel mix فشرده کنید و بذارید توی صفحه اصلی بعد ناحیه app رو هم تعیین کنید،
در ضمن اگه پروژه لاراولی هست نیازی به vue router نیست، صرفا کامپوننت رو درست کنید و بعد فشرده و فراخوانی کنید بعد هر جا میخواین بیاریدش اسمش رو فراخوانی کنید، روت ها رو هم با روت خود لاراول بزنید


bardia
تخصص : Golang/Laravel
@mrbardia72 6 سال پیش مطرح شد
0

@alirezasafdari
نمونه کد دارید برام بفرستید
ممنون میشم


developer
تخصص : برنامه نویس
@developer 6 سال پیش مطرح شد
0

نمونه کد از چی؟


bardia
تخصص : Golang/Laravel
@mrbardia72 6 سال پیش مطرح شد
0

@alirezasafdari
همین مواردی که گفتید رو


developer
تخصص : برنامه نویس
@developer 6 سال پیش مطرح شد
0

این صفحه بلید اصلی:

<!doctype html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    {!! SEO::generate() !!}
    @include('front.include.css')
</head>
<body>
@include('front.include.header')
<div id="app">
    @yield('center')
</div>
@include('front.include.footer')
@include('front.include.js')
<script>
    window.Laravel = {};
    window.Laravel.Auth = '{{ Auth::check() }}' == '' ? false : true;
    window.Laravel.csrfToken = '{{ csrf_token() }}'
</script>
@yield('script')
</body>
</html>

این صفحه app.js:

import './bootstrap';
import Like from './components/Like.vue';
import Follow from './components/Follow.vue';

Vue.component('Like', Like);
Vue.component('Follow', Follow);

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

این هم صفحه کامپوننت لایک :

<template>
    <div class="d-flex flex-row justify-content-center">
        <a href="" @click.prevent="likeIt">
            <i class="fa fa-thumbs-o-up pl-2" style="font-size: 20px"></i>
        </a>
        <p style="font-size: 16px">{{likes}}</p>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                likes: 0,
                Laravel : window.Laravel,
            }
        },
        props: [
            'likable_type', 'likable_id', 'user_id',
        ],
        mounted(){
            axios.post('/api/web/getLike',{
                likable_type: this.likable_type,
                likable_id: this.likable_id,
            })
                .then(response => {
                    this.likes = response.data.likes
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        methods: {
            likeIt(){
                if (this.Laravel.Auth) {
                axios.post('/api/web/saveLike', {
                    likable_type: this.likable_type,
                    likable_id: this.likable_id,
                    user_id: this.user_id,
                })
                    .then(response => {
                        if (response.data.data == 'deleted') {
                            this.likes -= 1;
                        } else {
                            this.likes += 1;
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                }else{
                    window.location.href = '/login'
                }
            }
        }
    }
</script>

این هم صفحه لاراول میکس:

const { mix } = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

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

داده ها رو هم با api از سرور میگیرم و تغییرات رو انجام میدم


developer
تخصص : برنامه نویس
@developer 6 سال پیش مطرح شد
0

این هم فراخوانی کامپوننت لایک توی بلیدهای لاراول هست :

<Like likable_type="answer" :likable_id="{{$answer->id}}"
                                              :user_id="{{auth()->user()->id}}"></Like>

bardia
تخصص : Golang/Laravel
@mrbardia72 6 سال پیش مطرح شد
0

@alirezasafdari
حال ابن نحوه فراخوانی روت کجاست
منظورم اینه که ما چندتا کامپونت داشته باشیم نحوه فراخوانیش چطوره
در واقع من دارم یه پنل ادمین طراحی می کنم
میخوام روی هر آپشن کلیک کرده بره توی صفحه دیگه
اینو توی لاراول می خوام


developer
تخصص : برنامه نویس
@developer 6 سال پیش مطرح شد
0

ببینید دو حالته، یکبار شما میخواین کل پنل ادمین spa بشه واسه اون باید از vue router استفاده کنید
ولی یکبار کل پنل ادمین رو با خود بلیدهای لاراول زدید، و میخواین مثلا یک قسمت کوچیک توی یک صفحه مثلا دکمه لایک رو درست کنید اینجا از کامپوننت vue استفاده میکنید و اسم همون کامپوننت رو همون جایی که میخواین استفاده کنید فراخوانی میکنید شبیه همون چیزی که فرستادم توی پیام آخری،
اگه میخواین روی یک آپشن کلیک کنید بره صفحه دیگه، اینجا یا صفحه بعدی لود میشه که باید با روت خود لاراول انجام بدید یا صفحه لود نمیشه و spa هست که با vue router


bardia
تخصص : Golang/Laravel
@mrbardia72 6 سال پیش مطرح شد
0

@alirezasafdari
توی گیت هاپ نمونه ای هست؟


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام