一个基于 Vue3 + Varlet + TypeScript 的移动端 Web 模板

 
 

大厂技术  高级前端  Node进阶

点击上方 程序员成长指北,关注公众号
回复1,加入高级Node交流群

写在前面

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

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

0fa93fa40b721b1656f4136b1b519517.png
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 模板,基于 Vue3VarletViteTypescript 开发。

协议

本项目基于 MIT 协议,也就是免费~,随便怎么用。

特性

  • ⚡️   基于 Vue3VarletViteTypescript 开发

  • 📦   内置组件库和第三方库的自动引入和按需引入

  • 🗂   内置与原生应用类似的堆栈路由导航

  • 🗂   内置基于文件目录结构的约定式路由

  • 🌍   内置应用级国际化

  • 📦   内置请求库封装,拥抱 composition api

  • 📦   内置主题定制

  • 📦   内置移动端调试工具

  • 📦   内置 pinia 进行状态管理

  • 📦   内置 mockjs 进行数据 mock

  • 📦   内置 vitest 进行单元测试

  • 📦   内置 eslintcommitlintlint-stagedprettier 等代码检查/格式化工具

  • 💪   由 varletjs 官方维护,第一方提供对 varlet 的支持

安装使用

获取项目
通过模板仓库创建一个你的仓库

https://github.com/varletjs/varlet-app-template/generate

或通过 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 套壳更像真的了)。

8bf5f8d8340fbbfb52e451745bd9a683.jpeg
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 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 反馈给我们。

Node 社群

 
 

我组建了一个氛围特别好的 Node.js 社群,里面有很多 Node.js小伙伴,如果你对Node.js学习感兴趣的话(后续有计划也可以),我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。

d497285d6a711d1e84174bfd12f6c387.png

“分享、点赞、在看” 支持一下
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值