اجرا نشدن vue js در لاراول

سلام

توی پروژه ساخت فروشگاه digistyle هر کاری می کنم فایل vue js اجرا نمیشه

توی صفحه create تمام input ها لود میشه بجز input هایی که توی فایل vue js هست.

فایل create من

@extends('admin.layouts.master')
@section('styles')
    <link rel="stylesheet"  href="{{asset('admin/dist/css/dropzone.css')}}"/>
@endsection
@section('content')
<div class="content" id="app">
    <div class="box box-info">
        <div class="box-header with-border">
            <h3 class="box-title pull-right">ایجاد محصول جدید</h3>
{{--            <div class=" text-left">
                <a class="btn btn-app" href="{{route('categories.create')}}">
                    <i class="fa fa-plus"></i> جدید
                </a>
            </div>--}}

        </div>
        <div class="box-body">
            <div class="row">
                <div class="col-md-6 col-md-offset-3">
                    <form id="myForm" method="post" action="/administrator/products">
                        @csrf
                        <div class="form-group">
                            <label for="title">نام</label>
                            <input type="text" name="title" class="form-control" placeholder="نام محصول را وارد کنید...">
                        </div>
                        <div class="form-group">
                            <label for="slug">نام مستعار</label>
                            <input type="text" name="slug" class="form-control" placeholder="نام مستعار محصول را وارد کنید...">
                        </div>
                        <attribute-component :brands="{{ $brands }}"></attribute-component>
                        <div class="form-group">
                            <label>وضعیت نشر</label>
                            <div>
                                <input type="radio" name="status" value="0" checked> <span class="margin-l-10">منتشر نشده</span>
                                <input type="radio" name="status" value="1"> <span>منتشر شده</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>قیمت</label>
                            <input type="number" name="price" class="form-control" placeholder="قیمت محصول را وارد کنید...">
                        </div>
                        <div class="form-group">
                            <label>قیمت ویژه</label>
                            <input type="number" name="discount_price" class="form-control" placeholder="قیمت ویژه محصول را وارد کنید...">
                        </div>
                        <div class="form-group">
                            <label>توضیحات</label>
                            <textarea id="textareaDescription" type="text" name="description" class="ckeditor form-control" placeholder="توضیحات محصول را وارد کنید..."></textarea>
                        </div>
                        <div class="form-group">
                            <label for="photo">گالری تصاویر</label>
                            <input type="hidden" name="photo_id[]" id="product-photo">
                            <div id="photo" class="dropzone"></div>
                        </div>
                        <div class="form-group">
                            <label>عنوان سئو</label>
                            <input type="text" name="meta_title" class="form-control" placeholder="عنوان سئو را وارد کنید...">
                        </div>
                        <div class="form-group">
                            <label>توضیحات سئو</label>
                            <textarea type="text" name="meta_desc" class="form-control" placeholder="توضیحات سئو را وارد کنید..."></textarea>
                        </div>
                        <div class="form-group">
                            <label>کلمات کلیدی سئو</label>
                            <input type="text" name="meta_keywords" class="form-control" placeholder="کلمات کلیدی سئو را وارد کنید...">
                        </div>
                        <button type="submit" onclick="productGallery()" class="btn btn-success pull-left">ذخیره</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
    @endsection

@section('script-vuejs')
    <script src="{{asset('admin/js/app.js')}}"></script>
@endsection
@section('scripts')
    <script type="text/javascript" src="{{asset('/admin/dist/js/dropzone.js')}}"></script>
    <script type="text/javascript" src="{{asset('/admin/plugins/ckeditor/ckeditor.js')}}"></script>
    <script>
        Dropzone.autoDiscover = false;
        var photosGallery = []
        var drop = new Dropzone('#photo', {
            addRemoveLinks: true,
            url: "{{ route('photos.upload') }}",
            sending: function(file, xhr, formData){
                formData.append("_token","{{csrf_token()}}")
            },
            success: function(file, response){
                photosGallery.push(response.photo_id)
            }
        });
        productGallery = function(){
            document.getElementById('product-photo').value = photosGallery
        }

        CKEDITOR.replace('textareaDescription',{
            customConfig: 'config.js',
            toolbar: 'simple',
            language: 'fa',
            removePlugins: 'cloudservices, easyimage'
        })

    </script>
@endsection

فایل AttributeComponent من

<template>
    <div>
        <div class="form-group">
            <label>دسته بندی</label>
            <select name="categories[]" id="" class="form-control"  multiple="true" v-model="categories_selected" @change="onChange($event, null)">
                <option v-for="category in categories" :value="category.id">{{category.name}}</option>
            </select>
        </div>
        <div class="form-group">
            <label>برند</label>
            <select name="brand" class="form-control">
                <option v-if="!product" v-for="brand in brands" :value="brand.id">{{brand.title}}</option>
                <option v-if="product" v-for="brand in brands"  :selected="product.brand.id === brand.id" :value="brand.id">{{brand.title}}</option>
            </select>
        </div>
        <div v-if="flag">
            <div class="form-group" v-for="(attribute, index) in attributes">
                <label>ویژگی {{attribute.title}}</label>
                <select class="form-control" @change="addAttribute($event, index)">
                    <option>انتخاب کنید...</option>
                    <option v-if="!product" v-for="attributeValue in attribute.attributes_value" :value="attributeValue.id">{{attributeValue.title}}</option>
                    <option v-if="product"  v-for="attributeValue in attribute.attributes_value" :value="attributeValue.id" :selected="product.attribute_values[index] && product.attribute_values[index]['id'] == attributeValue.id">{{attributeValue.title}}</option>
                </select>
            </div>
        </div>
        <input type="hidden" name="attributes[]" :value="computedAttribute">
    </div>
</template>

<script>
    export default {
        data() {
            return {
                categories: [],
                categories_selected: [],
                flag: false,
                attributes:[],
                selectedAttribute: [],
                computedAttribute: []
            }
        },
        props: ['brands', 'product'],
        mounted() {
            axios.get('/api/categories').then(res =>{
                this.getAllChildren(res.data.categories, 0)
            }).catch(err=>{
                console.log (err)
            })
            if(this.product){
                console.log(this.product)
                for(var i=0; i<this.product.categories.length; i++){
                    this.categories_selected.push(this.product.categories[i].id)
                }
                for(var i=0; i<this.product.attribute_values.length; i++){
                    this.selectedAttribute.push({
                        'index': i,
                        'value': this.product.attribute_values[i].id
                    })
                    this.computedAttribute.push(this.product.attribute_values[i].id)
                }
                const load = 'ok'
                this.onChange(null, load);
            }
        },
        methods: {
            getAllChildren: function(currentValue, level){
                for(var i=0; i< currentValue.length; i++){
                    var current = currentValue[i];
                    this.categories.push({
                        id: current.id,
                        name: Array(level + 1).join("----") + " " + current.name
                    })
                    if(current.children_recursive && current.children_recursive.length > 0){
                        this.getAllChildren(current.children_recursive, level + 1)
                    }
                }
            },
            onChange: function(event, load){
                this.flag = false;
                axios.post('/api/categories/attribute', this.categories_selected).then(res =>{
                    if(this.product && load == null){
                        this.computedAttribute = []
                        this.selectedAttribute = []
                    }
                    this.attributes = res.data.attributes
                    this.flag = true
                }).catch(err => {
                    console.log(err)
                    this.flag = false
                })

            },
            addAttribute: function(event, index){
                for(var i=0; i<this.selectedAttribute.length; i++){
                    var current = this.selectedAttribute[i];
                    if(current.index == index){
                        this.selectedAttribute.splice(i, 1)
                    }
                }
                this.selectedAttribute.push({
                    'index': index,
                    'value': event.target.value
                })
                this.computedAttribute = []
                for(var i=0; i<this.selectedAttribute.length; i++){
                    this.computedAttribute.push(this.selectedAttribute[i].value)
                }
            },
        }
    }
</script>

همچنین خطاهای کنسول مرورگر من

app.js:14252 CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token
(anonymous) @ app.js:14252
app.js:37427 [Vue warn]: Cannot find element: #app
warn @ app.js:37427
dashboard.js:35 Uncaught ReferenceError: moment is not defined
    at HTMLDocument.<anonymous> (dashboard.js:35)
    at i (jQuery-2.2.0.min.js:2)
    at Object.fireWith [as resolveWith] (jQuery-2.2.0.min.js:2)
    at Function.ready (jQuery-2.2.0.min.js:2)
    at HTMLDocument.J (jQuery-2.2.0.min.js:2)
app.js:45848 Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
app.js:45857 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
DevTools failed to parse SourceMap: http://shop.test/admin/js/bootstrap.js.map
DevTools failed to parse SourceMap: http://shop.test/admin/dist/css/dropzone.min.css.map

روی صفحه create  اینسپکت (inspect) کردم و اینطوری نمایش میده بقیه input ها نمایش درست دارند

<attribute-component :brands="[{&quot;id&quot;:7,&quot;title&quot;:&quot;\u0646\u0627\u06cc\u06a9&quot;,&quot;description&quot;:&quot;\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u0628\u0631\u0646\u062f \u0646\u0627\u06cc\u06a9&quot;,&quot;photo_id&quot;:14,&quot;created_at&quot;:&quot;2020-03-24 13:11:29&quot;,&quot;updated_at&quot;:&quot;2020-03-24 13:11:29&quot;},{&quot;id&quot;:8,&quot;title&quot;:&quot;\u0648\u0631\u0633\u0627\u0686\u0647&quot;,&quot;description&quot;:&quot;\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u0628\u0631\u0646\u062f \u0648\u0631\u0633\u0627\u0686\u0647&quot;,&quot;photo_id&quot;:15,&quot;created_at&quot;:&quot;2020-03-24 13:12:05&quot;,&quot;updated_at&quot;:&quot;2020-03-24 13:12:05&quot;},{&quot;id&quot;:9,&quot;title&quot;:&quot;\u0622\u062f\u06cc\u062f\u0627\u0633&quot;,&quot;description&quot;:&quot;\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u0628\u0631\u0646\u062f \u0622\u062f\u06cc\u062f\u0627\u0633&quot;,&quot;photo_id&quot;:16,&quot;created_at&quot;:&quot;2020-03-24 13:12:57&quot;,&quot;updated_at&quot;:&quot;2020-03-24 13:12:57&quot;}]"></attribute-component>

همچنین ورژن vue من

"vue": "^2.5.17",
"vue-template-compiler": "^2.6.11"

کلا وقتی دستور npm un watch را میزنم خطا بهم نمیده ولی  دیگه نمیتونم دستور وارد cmd کنم انگار داره کاری میکنه !!!!!!!!!!!!!!

سلام

دلیل اینکه vuejs در لاراول کار نمی کند دو مورد می باشد:

۱) فریم ورک ویو جی اس روی لاراول نصب نشده است که مراحل آن به صورت زیر می باشد:

ابتدا دستور زیر را برای نصب laravel ui در CMD وارد کنید:

composer require laravel/ui

سپس دستور زیر را زده تا vuejs در ui موردنظر نصب شود:

php artisan ui vue

در نهایت با دستور زیر npm یا بسته های وابسته به vuejs را نصب کنید:

npm install

اگر چنانچه قبلا این مراحل را رفته اید حال باید به گزینه ۲ بپردازید.

۲) آی دی app را روی صفحه html خود تعریف نکرده اید:

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

app.js:37427 [Vue warn]: Cannot find element: #app

برای تعیین ویو جی اس در یک تگ مشخص کافیست از دستور زیر استفاده کنید:

<div id='app'></div>