步骤 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>

‍