Vue未定义错误求助：HTML转Vue组件后关联App.vue失败

核心问题分析 #

• 版本混用：原HTML用Vue 3语法（Vue.createApp），但App.vue里用了Vue 2的new Vue初始化方式，同时Form.vue错误地在组件内部创建Vue实例，导致全局Vue对象未正确识别。
• 组件结构错误：单文件组件（.vue）不需要手动创建Vue实例，应将数据、方法封装在组件的export default中。
• 未启用组件渲染：App.vue里的<Form />被注释，组件根本没挂载到页面。
• Vue 3兼容性问题：Vue 3已移除过滤器语法（| currency），需改为直接调用方法。

修正后的代码 #

1. Form.vue

<template>
  <div>
    <form v-cloak>
      <h1>Facilities</h1>

      <ul>
        <li 
          v-for="facility in facilities" 
          :key="facility.name"
          @click="toggleActive(facility)" 
          :class="{ 'active': facility.active}"
        >
          {{ facility.name }} 
          <span>{{ formatCurrency(facility.price) }}</span>
        </li>
      </ul>

      <div class="total">
        Total: <span>{{ formatCurrency(total()) }}</span>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      facilities: [
        { name: 'Ballroom', price: 5000, active: true },
        { name: 'Backyard', price: 400, active: false },
        { name: 'Wellness Area', price: 250, active: false },
        { name: 'Restaurant', price: 220, active: false }
      ]
    }
  },
  methods: {
    toggleActive(s) {
      s.active = !s.active;
    },
    total() {
      let total = 0;
      this.facilities.forEach(s => {
        if (s.active) total += s.price;
      });
      return total;
    },
    formatCurrency(value) {
      return `$${value.toFixed(2)}`;
    }
  }
};
</script>

<style scoped>
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Shadows+Into+Light);

[v-cloak] {
  display: none;
}

form{
  background-color: #8931EF;
  border-radius: 2px;
  box-shadow: 0 1px 1px #ccc;
  width: 400px;
  padding: 35px 60px;
  margin: 50px auto;
}

form h1{
  color:#fff;
  font-size:64px;
  font-family:'Cookie', cursive;
  font-weight: normal;
  line-height:1;
  text-shadow:0 3px 0 rgba(0,0,0,0.1);
}

form ul{
  list-style:none;
  color:#fff;
  font-size:20px;
  font-weight:bold;
  text-align: left;
  margin:20px 0 15px;
}

form ul li{
  padding:20px 30px;
  background-color:#a5949a;
  margin-bottom:8px;
  box-shadow:0 1px 1px rgba(0,0,0,0.1);
  cursor:pointer;
}

form ul li span{
  float:right;
}

form ul li.active{
  background-color:#87E911;
}

div.total{
  border-top:1px solid rgba(255,255,255,0.5);
  padding:15px 30px;
  font-size:20px;
  font-weight:bold;
  text-align: left;
  color:#fff;
}

div.total span{
  float:right;
}
</style>

2. App.vue

<script setup>
import Form from './components/Form.vue'
</script>

<template>
  <main>
    <Form />
  </main>
</template>

<style>
@import './assets/base.css';

#app {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  font-weight: normal;
}

@media (hover: hover) {
  a:hover {
    background-color: hsla(160, 100%, 37%, 0.2);
  }
}

@media (min-width: 1024px) {
  body {
    display: flex;
    place-items: center;
  }

  #app {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 2rem;
  }
}
</style>

关键修改说明 #

• 移除Form.vue中多余的Vue.createApp初始化代码，将数据和方法整合到组件的export default中。
• 把Vue 2的过滤器语法| currency替换为Vue 3支持的方法调用formatCurrency(xxx)。
• 给v-for循环添加:key属性（Vue强制要求）。
• 启用App.vue中被注释的<Form />组件，移除冲突的Vue 2初始化代码，统一使用Vue 3的<script setup>语法。
• 给Form.vue的style添加scoped，避免样式污染全局。

内容的提问来源于stack exchange，提问作者AmberH