🎉🎉🎉 推荐一个基于 Vue3 + Varlet 的移动端 Web 模板

写在前面

掘金的同学们大家好呀，首先自我介绍一下，作者是 Vue3 Material Design 移动端组件库 Varlet 的作者。

Varlet 经历了两年多的开发和维护，现在终于有了一个官方维护的移动端项目模板（一切都源自于作者是个懒狗）。 今天作者在这里诚挚的将此项目分享给大家，同时欢迎对此项目有兴趣的同学，贡献更多的模板和功能，让它越来越成熟。

相关链接

在线预览: varletjs.github.io/varlet-app-...

仓库地址: github.com/varletjs/va...

Varlet 组件库仓库地址: github.com/varletjs/va...

介绍

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 的支持

安装使用

获取项目

通过模板仓库创建一个你的仓库

github.com/varletjs/va...

或通过 git clone 直接克隆仓库

git clone https://github.com/varletjs/varlet-app-template.git

安装依赖

pnpm install

启动开发环境

pnpm dev

构建打包

pnpm build

预览

pnpm preview

代码检查

pnpm lint

TS 类型检查

pnpm type-check

代码格式化

pnpm format

运行单元测试

pnpm test

运行单元测试并生成测试报告

pnpm test:coverage

路由导航

此项目使用 varlet 组件库内置的层级管理器模拟了类似原生 app 的堆栈导航，这使得用户可以得到更接近原生的导航体验，并且不破坏传统路由的导航方式(做 webview 套壳更像真的了）。

请求库

我们是基于 axios 封装了一个渐进式的请求工具 axle。在兼容 axios 的同时，对 axios 的方法进行了简化和归一化，并支持了 Vue3 Composition API。我们希望做到只要会使用 axios，就可以很容易的上手 axle。下面是一些简单的代码片段。更多详情见: github.com/varletjs/ax...

基本调用

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 API

<script 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 反馈给我们。