项目配置

• create vite@latest my-vue-app --template vue
• npm install -D tailwindcss postcss autoprefixer -f
• npx tailwindcss init
• npx nuxi module add icon
• npm i -D @pinia-plugin-persistedstate/nuxt -f
• npm i pinia -f
• 使用npm run dev启动项目

项目结构

• app.vue (启动文件，主要的应用程序入口)
• layouts/ (布局文件夹，用于存放不同页面布局)
  • MainLayout.vue (主页布局文件)
• pages/ (页面文件夹，用于存放各个页面)
  • index.vue (首页，先是用户登录注册)
  • homePage (系统主页面)
    • index.vue
• plugins/ (插件文件夹，用于存放依赖或者第三方插件)
  • axios.js (axios拦截器配置文件)
• stores/ (接口文件夹，用于进行前后端对接)
  • elderly.js (老人信息管理前后端对接)
  • event.js (事件信息管理前后端对接)
  • staff.js (工作人员信息管理前后端对接)
  • volunteer.js (义工信息管理前后端对接)
  • page.js (页面切换函数实现)
• components/ (组件文件夹，用于存放可复用的组件)
  • TopNav.vue (顶部导航栏组件)
  • SideNav.vue (侧边导航栏组件)
  • Footer.vue (页脚组件)
  • HomePage.vue (首页组件，显示不同页面的内容)
  • LoginForm.vue (登录表单组件)
  • RegisterForm.vue (注册表单组件)
  • Event.vue (实践信息管理页面)
  • ElderlyManagement.vue (老人信息管理页面)
  • StaffManagement.vue (工作人员信息管理页面)
  • VolunteerManagement.vue (义工信息管理页面)
  • Settings.vue (系统设置)
  • Face (人脸识别页面)
  • Emotion (情绪识别页面)
  • FallOver (摔倒检测页面)
• public/ (模型文件夹)
  • models (情绪识别模型)