vue.js - 全局注册组件为何显示Vue is not defined？

问题描述

问 题

在做一个组件demo的时候尝试不使用头部引用src="js/vue.min.js"，于是用node.js+npm+webstorm启动项目，
代码如下：

<template>

<div id="app">
    <h1>This is a test file</h1>
    <span>{{ msg }}</span>
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
</div>

</template>

<script>

//注册
Vue.component( 'simple-counter', {
    template: '<button v-on:click="counter += 1">{{ counter }}</button>',
    data () {
        return {
            counter: 0
        }
    }
})

//创建实例
new Vue({
    el: '#app',
    data () {
        return {
            msg: 'Hello, commander!'
        }
    }
})

</script>
然后浏览器就会报错：

如果用另一种方式就没有问题

App.vue:

<template>

<div id="app">
    <h1>This is a test file</h1>
    <span>{{ msg }}</span>
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
</div>

</template>

<script>

//引入
import simple_counter from './component/simple-counter.vue';
//注册
export default {
    data () {
        return {
            msg: 'Hello commander!'
        }
    },
    components: {
         'simple-counter': simple_counter
    }
}

</script>

simple-counter.vue:

<template>

<div id="app">
    <button v-on:click="counter += 1">{{ counter }}</button>
</div>

</template>

<script type="text/javascript">

export default {
    data () {
        return {
            counter: 0
        }
    }
}

</script>

能够成功跑出来

附上main.js:

import Vue from 'vue'

import App from './App.vue'

new Vue({
el: '#app',
render: h => h(App)
})

烦请各位大大指导一番

更新：

看到有朋友说加入import Vue from 'vue'语句，自己也尝试过，页面确实不会报错了，但却什么内容都没有了：

不知道这又是怎么回事呢？

解决方案

全局注册
1.在mian.js中注册，该文件已经导入了Vue（import Vue from 'vue'）
2.其他文件需要手动加入：import Vue from 'vue'

如果我没猜错的话，你是在.vue（单文件组件）中加入的new Vue(),这样将会有俩个Vue实例，导致意外发生，建议你将全局组件、插件等都写到main.js中，挂载到一个Vue实例上，而.vue（单文件组件）采用 export default {} 的写法

这篇关于vue.js - 全局注册组件为何显示Vue is not defined？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！