xiangshu233 / vue3-vant4-mobile

👋👋👋 基于Vue3.4、Vite5、Vant4、Pinia、Typescript、UnoCSS等主流技术开发,集成 Dark Mode(暗黑)模式和系统主题色,且持久化保存,集成 Mock 数据,包括登录/注册/找回/keep-alive/Axios/useEcharts/IconSvg等其他扩展。你可以在此之上直接开发你的业务代码!

Home Page:https://vvmobile.xiangshu233.cn

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool



license version repo-size languages issues

vue3-vant4-mobile

介绍

👋👋👋 Vue3 Vant4 Mobile 使用了最新的 Vue3.2Vite3Vant4Pinia2TypeScriptWindiCSS 等主流技术开发,集成 Dark Mode(暗黑)模式和系统主题色,并且持久化保存,集成 Mock 数据,顺便写了个 登录/注册/找回密码 页面(包括逻辑),你只需要替换你的 API 即可,顺便写了个包含 NavBarTabBar 的 Layout,顺便集成了 AxiosuseEChartsIconSvg,顺便集成了代码规范检查工具 EslintPrettierStylelint。顺便全页面均可以 <keep-alive>,顺便......好吧没有了。现在,你可以在此之上直接开发你的业务代码!希望你能喜欢。🥳🥳🥳

截图预览

登录页面 主控台页(首页)
消息页(图标页) 我的(我的信息页面)
展开预览暗黑模式下的界面截图。
登录页面(暗黑模式) 主控台页(暗黑模式)
我的页面(暗黑模式) 主题设置页面(暗黑模式)

线上预览

预览链接:https://vvmobile.xiangshu233.cn/

账号:admin,密码:123456

账号:test,密码:123456

或者扫描以下二维码进入手机演示

基础知识

  • Vite - 熟悉 Vite 特性
  • Vue3 - 熟悉 Vue3 基础语法
  • Vant4 - 掌握 vant4 组件基本使用
  • Pinia - 熟悉 Pinia 特性
  • TypeScript - 熟悉 TypeScript 基本语法
  • Vue-Router-Next - 熟悉 Vue-Router基本使用
  • ECharts5 - 熟悉 Echarts 基本使用
  • xicons - 本项目推荐图标库,当然你也可以使用 IconSVg
  • postcss-mobile-forever - 了解手机端 pxviewport 插件的作用
  • Lodash-es - JS高性能工具库
  • WindiCSS - 原子化 CSS,熟悉 WindiCSS 基本使用
  • Mock.js - 了解 Mockjs 基本语法
  • ES6+ - 熟悉 ES6 基本语法

环境准备

本地环境需要安装 pnpm7.xNode.jsGit

  • 必须使用pnpm7.x,否则依赖可能安装不上。
  • Node.js 版本要求12.x以上,且不能为13.x版本,这里推荐 15.x 及以上。

VS Code 配套插件

如果你使用的 IDE 是 VS Code(推荐)的话,可以安装以下工具来提高开发效率及代码格式化

使用

# 获取项目代码
git clone https://github.com/xiangshu233/vue3-vant4-mobile.git

# 安装依赖
cd vue3-vant4-mobile
pnpm install

# 运行
pnpm dev

# 打包
pnpm build

Git 贡献提交规范

  • 参考 vue 规范 (Angular)
    • feat 增加新功能
    • fix 修复问题/BUG
    • style 代码风格相关无影响运行结果的
    • perf 优化/性能提升
    • refactor 重构
    • revert 撤销修改
    • test 测试相关
    • docs 文档/注释
    • chore 依赖更新/脚手架配置修改等
    • workflow 工作流改进
    • ci 持续集成
    • types 类型定义文件更改
    • wip 开发中

浏览器支持

本地开发推荐使用Chrome 80+ 浏览器

支持现代浏览器, 不支持 IE

 Edge IE  Edge Edge Firefox Firefox Chrome Chrome Safari Safari
not support last 2 versions last 2 versions last 2 versions last 2 versions

维护者

@xiangshu233

LICENSE

MIT

About

👋👋👋 基于Vue3.4、Vite5、Vant4、Pinia、Typescript、UnoCSS等主流技术开发,集成 Dark Mode(暗黑)模式和系统主题色,且持久化保存,集成 Mock 数据,包括登录/注册/找回/keep-alive/Axios/useEcharts/IconSvg等其他扩展。你可以在此之上直接开发你的业务代码!

https://vvmobile.xiangshu233.cn

License:MIT License


Languages

Language:TypeScript 58.8%Language:Vue 28.1%Language:JavaScript 5.8%Language:Less 3.5%Language:CSS 1.9%Language:HTML 1.9%