Vue文件如何代替传统的HTML文件

<template>
  <!-- HTML模板 -->
</template>

<script>
// JavaScript逻辑
export default {
  name: 'ComponentName',
  data() {
    return {
      // 数据属性
    };
  },
  methods: {
    // 方法
  },
  // 其他选项...
};
</script>

<style scoped>
/* CSS样式 */
</style>

<!-- Button.vue -->
<template>
  <button @click="onClick">{{ text }}</button>
</template>

<script>
export default {
  name: 'Button',
  props: {
    text: {
      type: String,
      default: 'Click Me'
    }
  },
  methods: {
    onClick() {
      console.log('Button clicked!');
    }
  }
};
</script>

<style scoped>
button {
  padding: 10px 20px;
  font-size: 16px;
  color: white;
  background-color: #4CAF50;
  border: none;
  cursor: pointer;
}
</style>

<!-- DynamicComponent.vue -->
<template>
  <div id="app">
    <component :is="currentComponent"></component>
    <button @click="changeComponent">Change Component</button>
  </div>
</template>

<script>
import CompA from './CompA.vue';
import CompB from './CompB.vue';

export default {
  name: 'DynamicComponent',
  data() {
    return {
      currentComponent: 'CompA'
    };
  },
  methods: {
    changeComponent() {
      this.currentComponent = this.currentComponent === 'CompA' ? 'CompB' : 'CompA';
    }
  },
  components: {
    CompA,
    CompB
  }
};
</script>

<!-- SlotExample.vue -->
<template>
  <div class="slot-example">
    <slot>Default content</slot>
  </div>
</template>

<script>
export default {
  name: 'SlotExample'
};
</script>

<style scoped>
.slot-example {
  border: 1px solid #ccc;
  padding: 10px;
}
</style>

<template>
  <div id="app">
    <slot-example>
      <h1>Custom content</h1>
    </slot-example>
  </div>
</template>

<script>
import SlotExample from './SlotExample.vue';

export default {
  components: {
    SlotExample
  }
};
</script>

<style lang="scss" scoped>
@import '~variables'; // 引入变量文件

.button {
  background-color: $primary;
  &:hover {
    background-color: darken($primary, 10%);
  }
}
</style>

// main.js
import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

const messages = {
  en: {
    message: {
      hello: 'Hello World!'
    }
  },
  zh: {
    message: {
      hello: '你好世界！'
    }
  }
};

const i18n = new VueI18n({
  locale: 'en', // 设置默认语言
  messages // 设置区域信息
});

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app');