步骤 1: 创建组件文件

通常，一个 Vue 组件被创建为一个单文件组件 (Single File Component)，这意味着它的模板、脚本和样式都包含在一个 .vue​ 文件中。首先，创建一个新的 .vue​ 文件，比如 MyComponent.vue​。

步骤 2: 定义模板

组件的模板定义了 HTML 结构，并可以使用 Vue 的指令进行数据绑定和交互。模板部分位于 <template>​ 标签内。

MyComponent.vue

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="updateMessage">点击我</button>
  </div>
</template>

步骤 3: 添加脚本

在 <script>​ 标签中，你可以定义组件的状态（数据）、方法、生命周期钩子等。这里是组件的逻辑部分。

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  methods: {
    updateMessage() {
      this.message = '你好，Vue 2!';
    }
  }
}
</script>

步骤 4: 添加样式

组件的样式可以在 <style>​ 标签中定义。你可以选择使样式局部有效（默认行为，通过添加 scoped​ 属性）或全局有效。

<style scoped>
h1 {
  color: blue;
}
button {
  background-color: green;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}
</style>

步骤 5: 使用组件

为了在 Vue 应用中使用这个组件，你需要在父组件中导入并注册它。例如，如果你想在 App.vue​ 组件中使用 MyComponent​，可以这样做：

<template>
  <div id="app">
    <my-component></my-component>
  </div>
</template>

<script>
import MyComponent from './components/MyComponent.vue';

export default {
  name: 'App',
  components: {
    MyComponent
  }
}
</script>

‍