Vue3 项目实战 — Vue3记账本项目（前端Vue3，后端node.js）

以下是一个简化的Vue3记账本项目的前端部分代码示例。这里我们只展示了一小部分核心功能，包括组件的定义和一些样式。

<template>
  <div class="app">
    <div class="container">
      <h1>记账本</h1>
      <TransactionForm @add-transaction="addTransaction"/>
      <TransactionList :transactions="transactions" @remove-transaction="removeTransaction"/>
    </div>
  </div>
</template>
 
<script>
import TransactionForm from './components/TransactionForm.vue';
import TransactionList from './components/TransactionList.vue';
 
export default {
  name: 'App',
  components: {
    TransactionForm,
    TransactionList
  },
  data() {
    return {
      transactions: []
    };
  },
  methods: {
    addTransaction(transaction) {
      this.transactions.push(transaction);
    },
    removeTransaction(id) {
      this.transactions = this.transactions.filter(transaction => transaction.id !== id);
    }
  }
};
</script>
 
<style>
.app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
}
 
.container {
  margin: 0 auto;
  max-width: 600px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>

在这个示例中，我们定义了一个Vue组件App，它包括了TransactionForm和TransactionList两个子组件。App组件维护了一个transactions数组，这个数组通过props传递给TransactionList，同时定义了addTransaction和removeTransaction方法来处理添加和删除记录的逻辑。

这个简化的代码展示了如何在Vue3项目中组织和使用组件，以及如何通过方法处理状态变化。实际项目中，你还需要实现与后端服务的通信，这通常通过使用Axios等HTTP客户端库来完成。