Question

我刚刚在GoDaddy上启动了Vue网站，下面是链接：http://picmymenu.com/ 我只是通过导入一个组件就不断收到警告/错误。这是我的 app.js ：

Vue.component('nav-bar', 'navbar.vue')
Vue.component('todo-item', {
    template: '<li>This is a todo</li>'
})
var app = new Vue({1
    el: '#app',
    data: {
        message: 'Pic-My-Menu!'
    }
});

这就是我得到的：

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
vue.js:597 [Vue warn]: Invalid Component definition: navbar.vue

(found in <Root>)
warn @ vue.js:597
createComponent @ vue.js:4204
_createElement @ vue.js:4414
createElement @ vue.js:4351
vm._c @ vue.js:4483
(anonymous) @ VM4739:3
Vue._render @ vue.js:4535
updateComponent @ vue.js:2788
get @ vue.js:3140
Watcher @ vue.js:3129
mountComponent @ vue.js:2795
Vue.$mount @ vue.js:8527
Vue.$mount @ vue.js:10926
Vue._init @ vue.js:4627
Vue @ vue.js:4716
(anonymous) @ app.js:6
backend.js:1  vue-devtools  Detected Vue v2.5.17

在我的app.js中，我仅出于测试目的定义了一个名为“ todo-item”的组件，它的工作原理很好，但是，在文件中插入相同的代码会出现这种警告/错误。这是我的组件内容“ navbar.vue”：

<template>
    <div>
        <nav>
            <div class="container">
                <a href="#" class="navbar-brand">PiCMyMenu</a>
            </div>
        </nav>
    </div>
</template>

有什么想法吗？谢谢

Answer 1

如果要使用.vue文件，则应使用Vue CLI（建议）或Webpack创建项目，然后将其编译并创建一个包含您可以在GoDaddy上部署的文件的“ dist”文件夹。

浏览器本身无法识别导入命令。

Answer 2

 import navbar from 'navbar.vue';
 Vue.component('nav-bar', navbar)

您正在使用字符串定义组件，但它需要一个对象

[Vue警告]：无效的组件定义

2 个答案: