Vue 구성 요소가 레이블로 표시되지 않음

Vue 구성 요소가 레이블로 표시되지 않음

vue 컴포넌트가 표시되지 않아 어디가 잘못되었는지 알 수 없습니다.다른 시선이 어디에 오류가 발생했는지 알 수 있기를 바랍니다.npm run watch를 실행하고 있으며 캐시를 클리어했습니다.

내 앱.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');

/**
 * 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.
 */

Vue.component('table-draggable', require('./components/TableDraggable.vue'));
Vue.component('category-index', require('./components/CategoryIndex.vue'));
Vue.component('active-checkbox', require('./components/ActiveCheckbox.vue'));
Vue.component('supplier-code-selection', require('./components/SupplierCodeSelection.vue'));

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

My Supplier Code Selection.표시하다

     <template>
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-8">
                        <div class="card">
                            <div class="card-header">Supplier Code Selection Component</div>

                            <div class="card-body">
                                I'm an example component.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </template>

        <script>
            export default {
                mounted() {
                    console.log('Component mounted.')
                }
            }
        </script>

vue가 보여주기로 되어 있는 내 페이지

<div id="app">
    <supplier-code-selection></supplier-code-selection>
</div>

콘솔에서도 이 에러가 발생한다.

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

나의 작곡가.json

{
    "name": "laravel/laravel",
    "description": "The Laravel Framework.",
    "keywords": ["framework", "laravel"],
    "license": "MIT",
    "type": "project",
    "require": {
        "php": "^7.1.3",
        "fideloper/proxy": "^4.0",
        "laravel/framework": "5.6.*",
        "laravel/tinker": "^1.0",
        "laravelcollective/html": "^5.4.0"
    },
    "require-dev": {
        "filp/whoops": "^2.0",
        "fzaninotto/faker": "^1.4",
        "mockery/mockery": "^1.0",
        "nunomaduro/collision": "^2.0",
        "phpunit/phpunit": "^7.0"
    },
    "autoload": {
        "classmap": [
            "database/seeds",
            "database/factories"
        ],
        "psr-4": {
            "App\\": "app/"
        },
        "files": [
            "app/Support/helpers.php"
        ]
    },
    "autoload-dev": {
        "psr-4": {
            "Tests\\": "tests/"
        }
    },
    "extra": {
        "laravel": {
            "dont-discover": [
            ]
        }
    },
    "scripts": {
        "post-root-package-install": [
            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
        ],
        "post-create-project-cmd": [
            "@php artisan key:generate"
        ],
        "post-autoload-dump": [
            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover"
        ]
    },
    "config": {
        "preferred-install": "dist",
        "sort-packages": true,
        "optimize-autoloader": true
    },
    "minimum-stability": "dev",
    "prefer-stable": true
}

그리고 내 소포.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": "^2.0",
        "lodash": "^4.17.4",
        "popper.js": "^1.12",
        "vue": "^2.5.7",
        "vuedraggable": "^2.16.0"
    }
}

코드는 맞는데 HTML에 css/js 파일을 로드하는 것을 잊어버린 것 같습니다.

이 항목을 에 추가합니다.<head>:

<link rel="stylesheet" href="{{ mix('css/app.css') }}" />
<script defer src="{{ mix('js/app.js') }}"></script>

---

또, 다음의 것을 사용하는 것을 추천합니다.npm run hot(또는yarn hot핫 코드 새로고침이 추가됩니다.

를 추가하여 다음 코드를 시도합니다.default속성:

Vue.component('category-index', require('./components/CategoryIndex.vue').default);

또는 다음을 시도해 보십시오.

 ....
 import SupplierCodeSelection from './components/SupplierCodeSelection.vue'

  const app = new Vue({
       el: '#app',
       components:{'supplier-code-selection':SupplierCodeSelection } 
    });

그리고.

     <script>
        export default {
          name:'supplier-code-selection',
            mounted() {
                console.log('Component mounted.')
            }
        }
    </script>

간단하게 추가.default:

 Vue.component('supplier-code-selection', require('./components/SupplierCodeSelection.vue').default);

(hello) 너무 늦었지만 다른 사람에게 유용하게 쓰일 수 있습니다.)그래서 저는 이런 문제를 cod render의 평화로 해결했습니다: h = > h (메인)새 Vue({})에 추가;

언급URL : https://stackoverflow.com/questions/55685360/vue-component-not-showing-up-in-laravel