vue3-vant4-mobile

`，顺便......好吧没有了。现在，你可以在此之上直接开发你的业务代码！希望你能喜欢。🥳🥳🥳 ## 截图预览

展开预览暗黑模式下的界面截图。

## 线上预览 预览链接：_[https://vvmobile.xiangshu233.cn/](https://vvmobile.xiangshu233.cn/)_ 账号：admin，密码：123456 账号：test，密码：123456 或者扫描以下二维码进入手机演示

## 基础知识 - [Vite](https://cn.vitejs.dev/) - 熟悉 `Vite` 特性 - [Vue3](https://v3.vuejs.org/) - 熟悉 `Vue3` 基础语法 - [Vant4](https://youzan.github.io/vant/v4/#/zh-CN) - 掌握 `vant4` 组件基本使用 - [Pinia](https://pinia.vuejs.org/) - 熟悉 `Pinia` 特性 - [TypeScript](https://www.typescriptlang.org/) - 熟悉 `TypeScript` 基本语法 - [Vue-Router-Next](https://router.vuejs.org/) - 熟悉 `Vue-Router`基本使用 - [ECharts5](https://echarts.apache.org/handbook/zh/get-started/) - 熟悉 `Echarts` 基本使用 - [xicons](https://www.xicons.org/#/) - 本项目推荐图标库，当然你也可以使用 `IconSVg` - [postcss-mobile-forever](https://github.com/wswmsword/postcss-mobile-forever) - 了解手机端 `px` 转 `viewport` 插件的作用 - [Lodash-es](https://www.lodashjs.com/) - `JS`高性能工具库 - [UnoCSS](https://unocss.dev/) - 原子化 `CSS`，熟悉 `UnoCSS` 基本使用 - [Mock.js](https://github.com/nuysoft/Mock) - 了解 `Mockjs` 基本语法 - [ES6+](http://es6.ruanyifeng.com/) - 熟悉 `ES6` 基本语法 ## 环境准备 本地环境需要安装 [pnpm7.x](https://www.pnpm.cn/)、[Node.js](http://nodejs.org/) 和 [Git](https://git-scm.com/) - 必须使用[pnpm7.x](https://www.pnpm.cn/)，否则依赖可能安装不上。 - [Node.js](http://nodejs.org/) 版本要求`12.x`以上，且不能为`13.x`版本，这里推荐 `15.x` 及以上。 ## VS Code 配套插件 如果你使用的 IDE 是 [VS Code](https://code.visualstudio.com/)（推荐）的话，可以安装以下工具来提高开发效率及代码格式化 - [UnoCSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=antfu.unocss) - UnoCSS 提示插件 - [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) - Vue 开发必备 - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - 脚本代码检查 - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - 代码格式化 - [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) - CSS 格式化 - [DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv) - `.env` 文件 高亮 - [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) - 更好的错误定位 ## 使用 ```bash # 获取项目代码 git clone https://github.com/xiangshu233/vue3-vant4-mobile.git # 安装依赖 cd vue3-vant4-mobile pnpm install # 运行 pnpm dev # 打包 pnpm build ``` ## Git 提交规范 ### 提交规范 参考 [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) 规范 ([Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular)) - `feat` 增加新功能 - `fix` 修复问题/BUG - `style` 代码风格相关无影响运行结果的 - `perf` 优化/性能提升 - `refactor` 重构 - `revert` 撤销修改 - `test` 测试相关 - `docs` 文档/注释 - `chore` 依赖更新/脚手架配置修改等 - `workflow` 工作流改进 - `ci` 持续集成 - `types` 类型定义文件更改 - `wip` 开发中 ### 提交校验 代码首次拉下来 `pnpm install` 后 需要执行以下命令来更新 `git hooks` ```shell # Update ./git/hooks npx simple-git-hooks ``` 本项目提交规范校验使用 [simple-git-hooks](https://github.com/toplenboren/simple-git-hooks) 作为 git hooks，使用 [cz-git](https://github.com/Zhengqbbb/cz-git) 作为 commitlint commitizen。 代码要想使用 commitlint 规范提交需要在更改的文件 `git add` 后，控制台执行 `cz` 命令开启 cz-git CLI 若想直接执行 `git commit` 需要满足上面提交规范才能通过校验，否则无法提交 simple-git-hooks 和 husky 都是用于管理 Git 钩子（Git hooks）的工具，但它们有一些区别： 1. simple-git-hooks: - 简介: simple-git-hooks 是一个轻量级的工具，用于管理和运行Git钩子。 - 特点: - 提供了简单的配置方式来定义和运行 Gi 钩子。 - 适合于小型项目或对 Git 钩子需求不复杂的项目。 - 相对较少的功能和配置选项。 - 使用场景: 适用于简单的项目或对 Git 钩子管理需求不高的情况。 2. husky: - 简介: husky 是一个功能强大的工具，用于管理 Git 钩子，并且在项目中被广泛使用。 - 特点: - 提供了丰富的配置选项和灵活性，可以精细地控制 Git 钩子的行为。 - 支持在不同的 Git 钩子事件上运行自定义脚本。 - 可以与其他工具（如linters、测试框架等）集成，实现更复杂的工作流。 - 使用场景: 适用于需要灵活配置和管理 Git 钩子的项目，尤其是大型或复杂的项目。 ```json // 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 | [](http://godban.github.io/browsers-support-badges/) IE | [](http://godban.github.io/browsers-support-badges/) Edge | [](http://godban.github.io/browsers-support-badges/) Firefox | [](http://godban.github.io/browsers-support-badges/) Chrome | [](http://godban.github.io/browsers-support-badges/) Safari | | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | | not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions | ## 维护者 [@xiangshu233](https://github.com/xiangshu233) ## LICENSE [MIT](https://en.wikipedia.org/wiki/MIT_License)