代码拉取完成，页面将自动刷新
👋👋👋 Vue3 Vant4 Mobile 使用了最新的 Vue3.4、Vite5、Vant4、Pinia、TypeScript、UnoCSS 等主流技术开发，集成 Dark Mode（暗黑）模式和系统主题色，并且持久化保存，集成 Mock 数据，顺便写了登录/注册/找回密码 页面（包括逻辑），只需替换你的 API 即可，另外页面均可以 <keep-alive>，随便写了个包含 NavBar、TabBar 的 Layout，集成了 Axios、useECharts、IconSvg。
项目使用了 antfu 大佬的 antfu/eslint-config 作为代码规范检查工具，摆脱繁琐无聊的 Eslint 配置，配合 cz-git、 lint-staged、simple-git-hooks可对暂存区代码提交校验，代码风格不合格可打断提交，保证多人协作开发时上游 Git 库的干净。
现在你可以在此之上直接开发你的业务代码！希望你能喜欢！
|
|
|
|
|
|
|
|
预览链接：https://vvmobile.xiangshu233.cn/
账号：admin，密码：123456
账号：test，密码：123456
或者扫描以下二维码进入手机演示
Vite 特性Vue3 基础语法vant4 组件基本使用Pinia 特性TypeScript 基本语法Vue-Router基本使用Echarts 基本使用IconSvgpx 转 viewport 插件的作用JS高性能工具库CSS，熟悉 UnoCSS 基本使用Mockjs 基本语法ES6 基本语法项目使用 unocss 的 icon 预设 作为系统 Icon
请遵循以下约定使用图标
<prefix><collection>-<icon><prefix><collection>:<icon><!-- A basic anchor icon from Phosphor icons -->
<div class="i-ph-anchor-simple-thin" />
<!-- An orange alarm from Material Design Icons -->
<div class="i:mdi:alarm" />
点击这里获取所有可用的图标，找到想要的图标后点击复制 icon name 到 class 里即可
[!WARNING] 记得加
i-xxx前缀，从 icones 复制的 icon name 是没有i-前缀的
20.x以上，这里推荐 ^20.9.0 || >=21.7.1如果你使用的 IDE 是 VS Code（推荐）的话，可以安装以下工具来提高开发效率及代码格式化
.env 文件 高亮将以下设置添加到您的 .vscode/settings.json 中：
{
// Enable the ESlint flat config support
"eslint.experimental.useFlatConfig": true,
// Disable the default formatter, use eslint instead
"prettier.enable": false,
"editor.formatOnSave": false,
// Auto fix
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit",
"source.organizeImports": "never"
},
// Silent the stylistic rules in you IDE, but still auto fix them
"eslint.rules.customizations": [
{ "rule": "style/*", "severity": "off" },
{ "rule": "format/*", "severity": "off" },
{ "rule": "*-indent", "severity": "off" },
{ "rule": "*-spacing", "severity": "off" },
{ "rule": "*-spaces", "severity": "off" },
{ "rule": "*-order", "severity": "off" },
{ "rule": "*-dangle", "severity": "off" },
{ "rule": "*-newline", "severity": "off" },
{ "rule": "*quotes", "severity": "off" },
{ "rule": "*semi", "severity": "off" }
],
// Enable eslint for all supported languages
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue",
"html",
"markdown",
"json",
"jsonc",
"yaml",
"toml"
]
}
# 获取项目代码
git clone https://github.com/xiangshu233/vue3-vant4-mobile.git
# 安装依赖
cd vue3-vant4-mobile
pnpm install
# 运行
pnpm dev
# 打包
pnpm build
feat 增加新功能fix 修复问题/BUGstyle 代码风格相关无影响运行结果的perf 优化/性能提升refactor 重构revert 撤销修改test 测试相关docs 文档/注释chore 依赖更新/脚手架配置修改等workflow 工作流改进ci 持续集成types 类型定义文件更改wip 开发中[!TIP] 关于前端工程化 配置构建代码检查工作流 不了解的可以看下面这两篇文章了解下
[!IMPORTANT] 首次 clone 代码
pnpm install后 需要执行以下命令来更新git hooks# Update ./git/hooks npx simple-git-hooks
本项目提交规范校验使用 simple-git-hooks 作为 git hooks，使用 cz-git 作为 commitlint commitizen。
[!IMPORTANT]
# Global install commitizen CLI npm install -g commitizen先全局安装
commitizen，之后更改的代码若想要使用 Commitlint 规范提交需要将文件（放入暂存区）git add后，控制台执行cz命令开启 cz-git CLI 。若想直接执行git commit需要满足上面提交规范才能通过校验，否则将会被 Git Hook 打断提交
simple-git-hooks 和 husky 都是用于管理 Git 钩子（Git hooks）的工具，但它们有一些区别：
simple-git-hooks:
- 简介: simple-git-hooks 是一个轻量级的工具，用于管理和运行Git钩子。
- 特点:
- 提供了简单的配置方式来定义和运行 Gi 钩子。
- 适合于小型项目或对 Git 钩子需求不复杂的项目。
- 相对较少的功能和配置选项。
- 使用场景: 适用于简单的项目或对 Git 钩子管理需求不高的情况。
husky:
- 简介: husky 是一个功能强大的工具，用于管理 Git 钩子，并且在项目中被广泛使用。
- 特点:
- 提供了丰富的配置选项和灵活性，可以精细地控制 Git 钩子的行为。
- 支持在不同的 Git 钩子事件上运行自定义脚本。
- 可以与其他工具（如linters、测试框架等）集成，实现更复杂的工作流。
- 使用场景: 适用于需要灵活配置和管理 Git 钩子的项目，尤其是大型或复杂的项目。
// package.json
{
"simple-git-hooks": {
// 对暂存区执行 eslint --fix
"pre-commit": "pnpm lint-staged",
// 对提交信息进行校验
"commit-msg": "npx --no-install commitlint --edit $1"
},
"lint-staged": {
"*": "eslint --fix"
}
}
本地开发推荐使用Chrome 80+ 浏览器
支持现代浏览器, 不支持 IE
| IE |
Edge |
Firefox |
Chrome |
Safari |
|---|---|---|---|---|
| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手