سوال بپرسید

مشکل نصب vue js در laravel

سوال بپرسید

سلام دوستان وقت به خیر

بنده داخل قسمت نصب vue js به مشکل بر خوردم (دوره اموزش لاراول)

داخل قسمت console مرورگر این خطا رو دارم:

[Vue warn]: Unknown custom element: <example-component> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

کد های قسمت app.js :


/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

const app = new Vue({
    el: '#app',
    components:[
        'example-component'
    ]
});

کد های قسمت نشان دادن vue js در فایل create :

<div id="app">
    <example-component></example-component>
</div>


@section('script-vuejs')
    <script src="{{asset('admin/js/app.js')}}"></script>
@endsection


نکته :
//@yield('script-vuejs') در فایل اصلی قرار داده شده

کد های package.json :

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.18",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.5",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.11"
    }
}

کد های webpack.mix :

   mix.js('resources/js/app.js', 'public/admin/js');


   mix.styles(['resources/backend/css/dropzone.min.css'], 'public/admin/dist/css/dropzone.css')
   .scripts(['resources/backend/js/dropzone.min.js'], 'public/admin/dist/js/dropzone.js')

فکر کنم میکس هم به درستی انجام میشه اخه خطایی نشون نمیده !

ممنون میشم راهنمایی کنید.

برچسب ها: