unocss + vite + varlet 搭建移动端

简介: 第二个特点是实现移动端物理键的控制,换句话说是这里实现了监听物理按钮的返回来做一点你想要的事情。

unocss 是什么,不清楚的可以看这边 重新构想原子化 CSS,


整体的架构


1.vue3 + setup + ts, vw + rem等来搭建的移动端项目

2.tslint, prettier来控制代码的格式

3.simple-git-hook来控制代码提交的规范

4.deploy.sh 来实现自动部署

5.unocss 及其生态来实现css和icon图标的按需加载,不需要使用js就能引入图标

6.记录滚动条位置,监听物理键返回,路由动画等都是hooks的形式存在


项目效果图


代码地址https://github.com/cll123456/template-varlet-v3-ts

演示环境: https://cll123456.github.io/template-varlet-v3-ts

在断断续续的几天中,把项目实现了,做的效果还是让自己满意的。从开发体验来说是真的香,一直从js, css, icon图标等都遵从按需加载的原理。


外围效果


f3e3fbf948c22405c2b9eef91a2abedf.gif


标配的移动端项目,移动端的适配也是做好了,vm + rem的形式来的。上中下的布局,黑暗模式等


第一个页面


24ea4ff185a73d5f11e0b55e73a22705.gif


进入时候的动画是渐变,进入详情是右边切入动画,离开详情是左边切入的动画,看起来还挺好看的。🎈🎈🎈


第二个页面


第二个特点是实现移动端物理键的控制,换句话说是这里实现了监听物理按钮的返回来做一点你想要的事情。


第三个页面


由于varlet提供了无限滚动的组件,如果无限滚动的数据太多,那么dom数量达到一定的量级就会卡顿,所以我在此基础上加上了虚拟dom的形式来节约性能。注意看,每一个列表的高度可是不固定的哦!


第五个页面


4391ff754df71f2c96be9d14299445e5.gif


在移动端上面,经常会有需要返回到滚动条指定的位置,也就是说记录滚动条的位置,这里也是实现了哦


🎈🎈彩蛋


想要这一系列文章吗?那就请督促我更新吧!😄😄😄让我看到大家的热情,请评论转发告诉我,最后能不能给个小星星呢😁

相关文章
|
3月前
|
JavaScript 前端开发 安全
【Vue3 + Vite】6个非常强大的后台管理项目!开源且免费!
【Vue3 + Vite】6个非常强大的后台管理项目!开源且免费!
|
5月前
|
小程序 JavaScript 开发者
微信小程序构建npm
微信小程序构建npm
314 4
|
6月前
|
资源调度 JavaScript 前端开发
Vite:下一代前端构建工具的快速上手
Vite 是由 Vue.js 的作者尤雨溪开发的下一代前端构建工具,它以其快速的冷启动、按需编译和热更新能力而受到广泛关注。Vite 通过利用浏览器原生的 ES 模块导入功能,提供了几乎即时的开发环境启动速度和高度优化的开发体验。
99 2
|
6月前
|
缓存 数据可视化 小程序
uniapp项目中使用vue3开发多端项目实践
uniapp项目中使用vue3开发多端项目实践
166 0
|
6月前
|
搜索推荐 IDE API
HBuilderX与Vue3:开启Uniapp开发的新纪元
HBuilderX与Vue3:开启Uniapp开发的新纪元
140 0
|
小程序 开发者
最新版微信小程序中使用vant框架的操作流程
最新版微信小程序中使用vant框架的操作流程
228 0
最新版微信小程序中使用vant框架的操作流程
|
JSON 小程序 开发工具
微信小程序Vant组件配置及使用
微信小程序Vant组件配置及使用
224 1
微信小程序Vant组件配置及使用
|
小程序 开发者 Windows
微信小程序安装vant组件库
微信小程序安装vant组件库
202 0
|
运维 前端开发 JavaScript
移动端项目(第十九课)Vite+Vant组件环境配置
移动端项目(第十九课)Vite+Vant组件环境配置
185 0