Vue Contact是一個基于Vue.js開發的聯系人管理應用程序。它可以幫助你有效地管理你的聯系人，并提供跨平臺的訪問。該應用程序使用了許多Vue.js的核心概念和特性，如組件化、單向數據流等。

下面是Vue Contact應用程序的主要代碼：

<template>
<div class="contact-manager">
<h1 v-text="appName"></h1>
<contact-form :contact="selectedContact" v-on:submit="onSubmit"></contact-form>
<contact-list :contacts="contacts" v-on:select="onSelect"></contact-list>
</div>
</template>
<script>
import ContactForm from "./ContactForm.vue";
import ContactList from "./ContactList.vue";
import { mapState, mapMutations } from "vuex";
export default {
name: "ContactManager",
components: {
ContactForm,
ContactList
},
computed: {
...mapState({
contacts: state =>state.contacts,
selectedContact: state =>state.selectedContact,
appName: state =>state.appName
})
},
methods: {
...mapMutations({
onSelect: "SET_SELECTED_CONTACT",
onSubmit: "ADD_CONTACT"
})
}
};
</script>
<style>
.contact-manager {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 960px;
margin: 0 auto;
padding: 2em;
}
h1 {
font-size: 3em;
margin-bottom: 1em;
}
</style>

該應用程序通過Vuex狀態管理庫來管理聯系人的數據。它包含兩個主要組件：ContactForm和ContactList。通過v-on:submit和v-on:select指令分別將這兩個組件與應用程序的方法和狀態進行關聯。

總的來說，Vue Contact是一個簡單而功能強大的聯系人管理應用程序，展示了Vue.js的許多核心概念和技術，包括組件化、單向數據流、狀態管理等。如果您正在尋找一個基于Vue.js的實用應用程序示例，那么Vue Contact會是一個不錯的選擇。