Vue3项目上手学习（从0到1写一款WebApp）

惯例先贴项目地址：WinWang/vue3-wanandroid: Vue3+vant4+axios+pinia+ts+vite项目（Wan-Android） (github.com)

其他一些学习练手的项目

Flutter版本开眼App链接(getx+retrofit+dio+jsonserialize+自定义控件demo)：https://github.com/WinWang/open_eye

React版本的开眼App链接(React18+React-Vant+Mobx+axios)：https://github.com/WinWang/react-oepn-eye

Vue2版本WanAndroid项目链接(Vue2+vuex+vant+axios)：https://github.com/WinWang/Vue-WanAndroid

项目整体基于Vue3+Typescript+Pinia+Vant+Vite开发，具体包含功能如下所示：

1、vue3整合vue-router4的使用已经路由监听在项目中的运用（例如：跳转目标页面是否需要登陆的判断等）
2、vue3中keepAlive在项目中的运用以及router嵌套keepAlive的处理方式
3、vue3中项目针对移动端屏幕适配
4、axios中整合TypeScript针对请求的范型封装（例如：单个接口是否需要登陆判断，通过请求结果码判断是否需要异常响应，请求接口是否需要loading弹窗等等；通过HttpConfig配置）
5、pinia和plugin-pinia-persist插件在项目中的运用（类似vuex的使用，记录用户登陆状态以及用户信息等）
6、ref配合provide以及inject结合使用场景
7、结合hooks和Component封装页面网络请求状态展示（加载中、加载成功、加载失败页面、空页面、网络错误页面）
8、解决tab页面keepAlive路由导致页面滚动位置异常情况（pinia记录滚动高度+路由监听）
9、页面添加骨架屏状态封装集成（homePage.vue已替换）

更多项目内容请下载项目查看