Question

我的Vue组件没有显示，我看不到哪里出错了，我希望另一双眼睛可以指出我哪里出错了。我正在运行npm run watch，并且已经清除了缓存。

我的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');

/**
 * 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'
});

我的SupplierCodeSelection.vue

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

我的composer.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
}

和我的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": "^2.0",
        "lodash": "^4.17.4",
        "popper.js": "^1.12",
        "vue": "^2.5.7",
        "vuedraggable": "^2.16.0"
    }
}

Answer 1

您的代码是正确的，但是似乎您忘记了在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），这将增加热代码重载。

Answer 2

通过添加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>

Answer 3

你好））可能为时已晚，但对其他人可能有用））。所以我通过和平的鳕鱼渲染解决了这种问题：h => h（Main）。在新的Vue（{}）;

中添加了它

Answer 4

只需添加.default：

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

Vue组件未在Laravel中显示

4 个答案: