写在前面
掘金的同学们大家好呀,首先自我介绍一下,作者是 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
的支持
安装使用
获取项目
通过模板仓库创建一个你的仓库
或通过 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 反馈给我们。
原文链接:https://juejin.cn/post/7262707042213036091 作者:耗子君QAQ