卡比记账项目——搭建前端项目和开发环境

导图

开发环境搭建

本次的项目选择使用Docker+VSCode

我的是MacOS的系统所以需要下载一个 Docker Desktop，下载完成后在里面添加上网易的下载源实现加速。

在VSCode中下载与Docker产生联系的插件——Dev Containers

引入模版代码，reopen in container就可以实现在预设好的开发环境里进行开发了。

搭建前端框架

前端的技术栈我们选择Vite + Vue3 + TSX + VueRouter + Pinia

1. 运行 cd ~/repos
2. 运行 nvm use system 确保node版本正确
3. 创建项目 pnpm create vite@2.9.0 mangosteen-fe-1 -- --template vue-ts
4. 运行pnpm run dev 可以实现本地预览

5. 引入Vue-router

6. 在vite.config.ts中引入TSX 至此本记账项目的搭建完成。