# Vue3-wanAndroid

**Repository Path**: Mr_Zhl/Vue3-wanAndroid

## Basic Information

- **Project Name**: Vue3-wanAndroid
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-01-15
- **Last Updated**: 2024-01-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 + TypeScript + Pinia + Vant + Vite (WanAndroid项目)

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

## 其他一些学习练手的项目

**鸿蒙Harmony版本**的开眼App链接(ArkTs+ArkUI+API9)：https://github.com/WinWang/HarmoneyOpenEye

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

**Flutter版本**的音乐播放App链接(getx+retrofit+dio)：https://github.com/WinWang/music_listener <br>

**ReactNative版本**的开眼App链接(ReactNative-0.72)：https://github.com/WinWang/RNOpenEye <br>

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

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

**Android组件化项目**ReadingGallery链接(jetpack+kotlin+koin+couroutine)：https://github.com/WinWang/ReadingGallery <br>

**Android组件化项目初始化工具**ApplicationInit链接(gradle-plugin+注解APT+ASM)：https://github.com/WinWang/ApplicationInit <br>

## 应用截图图片 <br/>

<div style="display: flex; flex-direction: row">
<img src="https://s2.loli.net/2023/04/12/J3xp1bEDslWLu8c.png" width="30%">
<img src="https://s2.loli.net/2023/04/12/7OFd2nzrMioVSew.png" width="30%">
<img src="https://s2.loli.net/2023/04/12/mw5jpG3uCWKM7IP.png" width="30%">
</div>
<br/>

<div style="display: flex; flex-direction: row">
<img src="https://s2.loli.net/2023/04/12/aVH7Z4vYCr3iATg.png" width="30%">
<img src="https://s2.loli.net/2023/04/12/rI6gOPwBenyRtNV.png" width="30%">
<img src="https://s2.loli.net/2023/04/12/vpTXQaAVESs2KY7.png" width="30%">
</div>
<br/>

<div style="display: flex; flex-direction: row">
<img src="https://s2.loli.net/2023/04/12/hUYnG3BPxiSMWd6.png" width="30%">
<img src="https://s2.loli.net/2023/04/12/CfSrgLeT9MUqNjv.png" width="30%">
<img src="https://s2.loli.net/2023/04/12/Oj3JxmVv5N6HCiE.png" width="30%">
</div>
<br/>

<div style="display: flex; flex-direction: row">
<img src="https://s2.loli.net/2023/04/12/hdADNVEr8ZQocqb.png" width="30%">
<img src="https://s2.loli.net/2023/04/12/Zde5KQR7a1CcmzN.png" width="30%">
</div>
<br/>



## github图片 <br/>
<div style="display: flex; flex-direction: row">
<img src="https://github.com/WinWang/vue3-wanandroid/blob/master/screenShot/9.png" width="33%">
<img src="https://github.com/WinWang/vue3-wanandroid/blob/master/screenShot/10.png" width="33%">
</div>

<br/>

<div style="display: flex; flex-direction: row">
<img src="https://github.com/WinWang/vue3-wanandroid/blob/master/screenShot/1.png" width="33%">
<img src="https://github.com/WinWang/vue3-wanandroid/blob/master/screenShot/2.png" width="33%">
</div>

<br/>

<div style="display: flex; flex-direction: row">
<img src="https://github.com/WinWang/vue3-wanandroid/blob/master/screenShot/3.png" width="33%">
<img src="https://github.com/WinWang/vue3-wanandroid/blob/master/screenShot/4.png" width="33%">
</div>

<br/>

<div style="display: flex; flex-direction: row">
<img src="https://github.com/WinWang/vue3-wanandroid/blob/master/screenShot/5.png" width="33%">
<img src="https://github.com/WinWang/vue3-wanandroid/blob/master/screenShot/6.png" width="33%">
</div>

<br/>

<div style="display: flex; flex-direction: row">
<img src="https://github.com/WinWang/vue3-wanandroid/blob/master/screenShot/7.png" width="33%">
<img src="https://github.com/WinWang/vue3-wanandroid/blob/master/screenShot/8.png" width="33%">
</div>

<br/>

<div style="display: flex; flex-direction: row">
<img src="https://github.com/WinWang/vue3-wanandroid/blob/master/screenShot/11.png" width="33%">
</div>