错误：未捕获的 ReferenceError：未定义 Vue答案

【问题标题】：Error : Uncaught ReferenceError: Vue is not defined错误：未捕获的 ReferenceError：未定义 Vue
【发布时间】：2020-02-02 15:54:59
【问题描述】：

我正在尝试构建这个简单的应用程序，但我总是收到此错误

Uncaught ReferenceError: Vue is not defined.

<template>
  <v-app>

  <div id="example-1">
  <v-btn v-on:click="counter += 1">Add 1</v-btn>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

  </v-app>
</template>

<script>

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }

})

</script>

【问题讨论】：

你有没有在任何地方导入vue？
vuejs 的 cdn 添加了吗？
错误告诉你出了什么问题。你没有在任何地方定义 Vue。
@evolutionxbox 是的，我在 main.js 文件中导入了 vue：从 'vue' 导入 Vue
你错过了重要的部分——你如何以及在哪里导入 Vue，除非你提供，否则这不是一个可行的问题

标签： javascript vue.js vuejs2 vuetify.js

【解决方案1】：

这种带有“template”和“v-btn”的语法意味着你想使用一个vue文件。如果是这种情况，您必须使用某些东西来解释这些文件（vue-cli）。

【讨论】：

【解决方案2】：

将template 标记替换为div 并至少在</body> 标记之前添加cdn：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div>
  <v-app>
    <div id="example-1">
      <button v-on:click="counter += 1">Add 1</button>
       <p>The button above has been clicked {{ counter }} times.</p>
    </div>
  </v-app>
</div>

<script>

var example = new Vue({
    el: '#example-1',
    data: {
      counter: 0
    }
  })

</script>

我将v-btn 替换为button 只是为了表明它有效。

【讨论】：