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