推荐一个基于 Vue3 + Varlet 的移动端 Web 模板 写在前面掘金的同学们大家好呀，首先自我介绍一下，作者是 Vue3 Material Design 移动端组件库 Varlet 的作者。 Varlet 经历了两年多的开发和维护，现在终于有了一个官方维护的移动端项目模板（一切都源自于作者是个懒狗）。今天作者在这里诚挚的将此项目分享给大家，同时欢迎对此项目有兴趣的同学，贡献更多的模板和功能，让它越来越成熟。 image.png相关链接在线预览: https://varletjs.github.io/varlet-app-template 仓库地址: https://github.com/varletjs/varlet-app-template Varlet 组件库仓库地址: https://github.com/varletjs/varlet 介绍varlet-app-template 是一个开箱即用的轻量化移动端 Web 模板，基于 Vue3、 Varlet、 Vite、Typescript 开发。 协议本项目基于 MIT 协议，也就是免费～，随便怎么用。 特性?? 基于 Vue3、 Varlet、 Vite、Typescript 开发?? 内置组件库和第三方库的自动引入和按需引入?? 内置与原生应用类似的堆栈路由导航?? 内置基于文件目录结构的约定式路由?? 内置应用级国际化?? 内置请求库封装，拥抱 composition api?? 内置主题定制?? 内置移动端调试工具?? 内置 pinia 进行状态管理?? 内置 mockjs 进行数据 mock?? 内置 vitest 进行单元测试?? 内置 eslint、commitlint、lint-staged、prettier 等代码检查/格式化工具?? 由 varletjs 官方维护，第一方提供对 varlet 的支持安装使用获取项目通过模板仓库创建一个你的仓库https://github.com/varletjs/varlet-app-template/generate 或通过 git clone 直接克隆仓库gitclonehttps://github.com/varletjs/varlet-app-template.git 安装依赖pnpminstall 启动开发环境pnpmdev 构建打包pnpmbuild 预览pnpmpreview 代码检查pnpmlint TS 类型检查pnpmtype-check 代码格式化pnpmformat 运行单元测试pnpmtest 运行单元测试并生成测试报告pnpmtest:coverage 路由导航此项目使用 varlet 组件库内置的层级管理器模拟了类似原生 app 的堆栈导航，这使得用户可以得到更接近原生的导航体验，并且不破坏传统路由的导航方式(做 webview 套壳更像真的了）。 1.gif请求库我们是基于 axios 封装了一个渐进式的请求工具 axle。在兼容 axios 的同时，对 axios 的方法进行了简化和归一化，并支持了 Vue3 Composition API。我们希望做到只要会使用 axios，就可以很容易的上手 axle。下面是一些简单的代码片段。更多详情见: https://github.com/varletjs/axle 基本调用import { createAxle } from '@varlet/axle' const axle = createAxle(/** 配置与 axios 一致 **/) axle.get('/url', { current: 1, pageSize: 10 }, { headers: {} }) axle.post('/url', { name: 'Axle' }, { headers: {} }) axle.postMultipart('/url', { name: 'foo', file: new File() }) Vue3 Composition APIscript setup import { createAxle } from '@varlet/axle' import { createUseAxle } from '@varlet/axle/use' const axle = createAxle(/** @see 配置与 axios 一致 **/) const useAxle = createUseAxle() const [ users, getUsers, { loading, error, uploadProgress, downloadProgress, abort } ] = useAxle({ data: [], runner: axle.get, url: '/api/user', params: { current: 1, pageSize: 10 }, immediate: true, retry: 3 }) /script template span返回数据: {{ users }}/span span加载状态: {{ loading }}/span span异常信息: {{ error }}/span span上传进度: {{ uploadProgress }}/span span下载进度: {{ downloadProgress }}/span button @click="getUsers"发送请求/button button @click="abort"中断请求/button /template 我们不希望强制的去改变用户的一些开发习惯，如果您不喜欢 axle，将其替换成您更偏好的请求方案也很容易。我们只在主页使用了 axle 去请求 mock 的数据，这有利于您更方便的迁移。 结尾感谢同学们能看到这，我们会尽力将 varlet 的生态做的更好，同学们的支持和鼓励是我们的全部动力～。发布这篇文章的时候项目刚刚开源，如果在使用的时候发现任何问题，欢迎在 issue 反馈给我们。 阅读原文