1. 设计组件架构
首先，你需要考虑应用的结构，决定哪些部分应该成为独立的组件。这包括：
2. 设置开发环境
重击npm install -g @vue/cli vue create my-vue-app cd my-vue-app npm install
3. 创建组件
我们来创建一个简单的组件UserInfoCard作为例子：
3.1 创建组件文件
在src/components目录下新建UserInfoCard.vue文件：
<template>
<div class="user-info-card">
<h2>{{ name }}</h2>
<p>Age: {{ age }}</p>
<p>Email: {{ email }}</p>
</div>
</template>
<script>
export default {
name: 'UserInfoCard',
props: {
name: String,
age: Number,
email: String
}
}
</script>
<style scoped>
.user-info-card {
border: 1px solid #ccc;
padding: 10px;
margin: 10px 0;
}
</style>4. 组件注册
4.1 局部注册
如果你只在某个视图中使用这个组件，可以在那个视图的组件里注册：
// In a view component like Home.vue
import UserInfoCard from '@/components/UserInfoCard.vue'
export default {
components: {
UserInfoCard
}
}4.2 全局注册
如果你想在任何地方使用这个组件，可以在main.js里注册：
import Vue from 'vue'
import App from './App.vue'
import UserInfoCard from '@/components/UserInfoCard.vue'
Vue.component('user-info-card', UserInfoCard)
new Vue({
render: h => h(App)
}).$mount('#app')5. 使用组件
在任何Vue组件模板中使用你的UserInfoCard组件：
<template>
<div id="app">
<user-info-card name="John Doe" age="30" email="john@example.com"></user-info-card>
</div>
</template>
// Parent Component
<template>
<div>
<user-info-card :name="userName" :age="userAge" :email="userEmail" @emailClick="handleEmailClick"></user-info-card>
</div>
</template>
<script>
export default {
data() {
return {
userName: 'John Doe',
userAge: 30,
userEmail: 'john@example.com'
}
},
methods: {
handleEmailClick() {
console.log('Email clicked!')
}
}
}
</script>// UserInfoCard.vue
<template>
<div class="user-info-card">
<h2>{{ name }}</h2>
<p>Age: {{ age }}</p>
<p><a @click="$emit('emailClick')">Email: {{ email }}</a></p>
</div>
</template>
<script>
export default {
// ... 这里保持不变
}
</script>7. 组件通信
8. 测试组件
你可以使用Vue Test Utils来测试组件：
// UserInfoCard.spec.js
import { shallowMount } from '@vue/test-utils'
import UserInfoCard from '@/components/UserInfoCard.vue'
describe('UserInfoCard', () => {
it('displays the correct user information', () => {
const wrapper = shallowMount(UserInfoCard, {
propsData: {
name: 'John Doe',
age: 30,
email: 'john@example.com'
}
})
expect(wrapper.find('h2').text()).toBe('John Doe')
expect(wrapper.find('p').text()).toContain('Age: 30')
expect(wrapper.find('a').text()).toContain('Email: john@example.com')
})
})9. 优化和维护
10. 文档化