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

写在前面

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

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

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

相关链接

在线预览: varletjs.github.io/varlet-app-…
仓库地址: github.com/varletjs/va…
Varlet 组件库仓库地址: github.com/varletjs/va…

介绍

varlet-app-template 是一个开箱即用的轻量化移动端 Web 模板,基于 Vue3VarletViteTypescript 开发。

协议

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

特性

  • ⚡️   基于 Vue3VarletViteTypescript 开发
  • 📦   内置组件库和第三方库的自动引入和按需引入
  • 🗂   内置与原生应用类似的堆栈路由导航
  • 🗂   内置基于文件目录结构的约定式路由
  • 🌍   内置应用级国际化
  • 📦   内置请求库封装,拥抱 composition api
  • 📦   内置主题定制
  • 📦   内置移动端调试工具
  • 📦   内置 pinia 进行状态管理
  • 📦   内置 mockjs 进行数据 mock
  • 📦   内置 vitest 进行单元测试
  • 📦   内置 eslintcommitlintlint-stagedprettier 等代码检查/格式化工具
  • 💪   由 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 套壳更像真的了)。

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

请求库

我们是基于 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

(0)
上一篇 2023年8月3日 上午10:32
下一篇 2023年8月3日 上午10:44

相关推荐

发表回复

登录后才能评论