Vite+Vue3+Vuex+TS+Less实现的记账本实例

项目简介
在这个实例中，我们将构建一个简单的记账本应用，用户可以添加、删除和查看他们的支出记录。我们将使用Vite作为构建工具，Vue3作为前端框架，Vuex作为状态管理工具，TypeScript作为强类型脚本语言，以及Less作为CSS预处理器。
步骤一：创建Vite项目
首先，我们需要安装Node.js和npm（Node.js的包管理器）。然后，通过npm初始化一个新的Vite项目：

npx create-vite my-vue3-app

这将创建一个新的目录my-vue3-app，并在其中初始化一个新的Vite项目。
步骤二：安装Vue3和TypeScript
进入项目目录，并安装Vue3和TypeScript：

cd my-vue3-app
npm install vue@next @vue/composition-api tslib

这里我们安装了Vue的next版本（即Vue3）以及@vue/composition-api和tslib。@vue/composition-api是Vue3中推荐的状态管理方式，tslib是TypeScript的库文件。
步骤三：安装Vuex
接下来，我们需要安装Vuex，用于状态管理：

npm install vuex

步骤四：安装Less
然后，我们需要安装Less，用于CSS预处理：

npm install less less-loader

步骤五：创建组件和页面
在Vite项目中，我们可以使用Vue3的Composition API来创建组件和页面。首先，在src/components目录下创建三个组件：AddExpense.vue、ExpenseList.vue和ExpenseItem.vue。这些组件分别用于添加支出记录、显示支出记录列表和显示单个支出记录。然后，在src/pages目录下创建两个页面：Home.vue和ExpenseForm.vue。这两个页面分别用于显示主页和添加支出记录的表单。
步骤六：配置Vuex
在src/store目录下创建Vuex store。这里我们将使用Vuex的Composition API来配置store。首先，安装vuex-composition-api-deko：

npm install vuex-composition-api-deko

然后，在src/store/index.ts文件中导入并配置store：

nimport { createStore } from 'vuex'
import { useStore } from 'vuex-composition-api-deko'
import App from '../App.vue'
import Expense from '../components/ExpenseItem.vue'
import { ref, reactive } from 'vue'
import * as mutations from './mutations'
import * as actions from './actions'