191 lines
4.7 KiB
Markdown
191 lines
4.7 KiB
Markdown
<div align="center">
|
||
<img alt="logo" width="120" height="120" src="./public/favicon.ico">
|
||
<h1>Mobile + Vue = MobVue</h1>
|
||
</div>
|
||
|
||
[](https://github.com/un-pany/mobvue/releases)
|
||
[](https://github.com/un-pany/mobvue/stargazers)
|
||
[](https://gitee.com/un-pany/mobvue/stargazers)
|
||
|
||
<b><a href="./README.md">English</a> | 中文</b>
|
||
|
||
## 简介
|
||
|
||
MobVue 是一个精心制作的移动端 H5 模板，基于 Vue3、Vite、TypeScript、Vant 等主流技术
|
||
|
||
## 通知
|
||
|
||
> [!NOTE]
|
||
> 为爱发电！所有源码均免费开源，如果对你有帮助，欢迎点个 Star 支持一下！
|
||
|
||
> [!TIP]
|
||
> 正式推出付费服务，如果不想自己动手，但想移除 TS 或其他模块？试试懒人套餐！[点击看看](https://github.com/un-pany/mobvue/issues/2)
|
||
|
||
## 使用
|
||
|
||
<details>
|
||
<summary>推荐环境</summary>
|
||
|
||
<br>
|
||
|
||
- 新版 `Visual Studio Code`
|
||
- 安装 `.vscode/extensions.json` 文件中推荐的插件
|
||
- `node` 20.x 或 22+
|
||
- `pnpm` 9.x 或 10+
|
||
|
||
</details>
|
||
|
||
<details>
|
||
<summary>本地开发</summary>
|
||
|
||
<br>
|
||
|
||
```bash
|
||
# 安装依赖
|
||
pnpm i
|
||
|
||
# 启动服务
|
||
pnpm dev
|
||
```
|
||
|
||
</details>
|
||
|
||
<details>
|
||
<summary>打包构建</summary>
|
||
|
||
<br>
|
||
|
||
```bash
|
||
# 打包构建预发布环境
|
||
pnpm build:staging
|
||
|
||
# 打包构建生产环境
|
||
pnpm build
|
||
```
|
||
|
||
</details>
|
||
|
||
<details>
|
||
<summary>本地预览</summary>
|
||
|
||
<br>
|
||
|
||
```bash
|
||
# 先执行打包构建命令生成 dist 目录后再执行以下预览命令
|
||
pnpm preview
|
||
```
|
||
|
||
</details>
|
||
|
||
<details>
|
||
<summary>代码检查</summary>
|
||
|
||
<br>
|
||
|
||
```bash
|
||
# 代码校验与格式化
|
||
pnpm lint
|
||
|
||
# 单元测试
|
||
pnpm test
|
||
```
|
||
|
||
</details>
|
||
|
||
<details>
|
||
<summary>代码提交规范</summary>
|
||
|
||
<br>
|
||
|
||
`feat` 新功能
|
||
|
||
`fix` 修复错误
|
||
|
||
`perf` 性能优化
|
||
|
||
`refactor` 重构代码
|
||
|
||
`docs` 文档和注释
|
||
|
||
`types` 类型相关
|
||
|
||
`test` 单测相关
|
||
|
||
`ci` 持续集成、工作流
|
||
|
||
`revert` 撤销更改
|
||
|
||
`chore` 琐事（更新依赖、修改配置等）
|
||
|
||
</details>
|
||
|
||
## 链接
|
||
|
||
**在线预览**：[github-pages](https://un-pany.github.io/mobvue)
|
||
|
||
**文档教程**：[链接](https://juejin.cn/column/7472609448201666599)
|
||
|
||
**国内仓库**：[gitee](https://gitee.com/un-pany/mobvue)
|
||
|
||
**交流群**：[查看进群方式](https://github.com/un-pany/mobvue/issues/3)
|
||
|
||
**捐赠**：[请作者喝咖啡](https://github.com/un-pany/mobvue/issues/1)
|
||
|
||
**发行版 & 更新日志**：[releases](https://github.com/un-pany/mobvue/releases)
|
||
|
||
## 特性
|
||
|
||
🔥 最新的 [语法](https://vuejs.org/api/sfc-script-setup.html)、[配置](./vite.config.ts)、[依赖](./package.json)
|
||
|
||
📍 [纯一级路由设计](./src/router/index.ts) - 清晰且缓存友好
|
||
|
||
📱 移动端适配 [px2vw](./postcss.config.ts) - 并且宽屏友好
|
||
|
||
🌐 浏览器适配 [@vitejs/plugin-legacy](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy) + [autoprefixer](https://github.com/postcss/autoprefixer) + [browserslist](https://github.com/browserslist/browserslist) - 兼容多种浏览器和低版本浏览器
|
||
|
||
🧩 [布局系统](./src/layout) - 配置化的
|
||
|
||
🔒 权限控制 [页面级](./src/router/guard.ts)、[按钮级](./src/pages/demo/permission.vue)
|
||
|
||
🌗 主题模式 [Dark Mode](./src/common/assets/styles/variables.css)
|
||
|
||
🫧 [拥抱原子化 CSS](./uno.config.ts)
|
||
|
||
🔧 [组件](https://github.com/unplugin/unplugin-vue-components) 和 [API](https://github.com/unplugin/unplugin-auto-import) 自动按需导入
|
||
|
||
🔎 [Husky](./.husky/pre-commit) + [lint-staged](./package.json) + [ESLint](./eslint.config.js) - 规范代码
|
||
|
||
💪🏻 依然 [TypeScript](./tsconfig.json) - 严格模式且无 `any`
|
||
|
||
👀 更多功能 - [路由缓存](./src/pinia/stores/keep-alive.ts)、[带防御的水印](./src/common/composables/useWatermark.ts)、[灰色模式, 色弱模式](./src/common/composables/useGrayscaleAndColorblind.ts)、[SVG Loader](https://github.com/jpkleemans/vite-svg-loader)、[VConsole](./src/plugins/console.ts)、[白屏加载动画](./public/app-loading.css)、[单元测试](./tests)
|
||
|
||
## 技术栈
|
||
|
||
**Vue3**：采用 Vue3 + script setup 最新的 Vue3 组合式 API
|
||
|
||
**Vant**：轻量、可定制的移动端 Vue 组件库
|
||
|
||
**Pinia**: 传说中的 Vuex5
|
||
|
||
**Vite**：真的很快
|
||
|
||
**Vue Router**：路由路由
|
||
|
||
**TypeScript**：JavaScript 语言的超集
|
||
|
||
**pnpm**：更快速的，节省磁盘空间的包管理工具
|
||
|
||
**ESlint**：代码校验与格式化
|
||
|
||
**Axios**：发送网络请求（已封装好）
|
||
|
||
**UnoCSS**：具有高性能且极具灵活性的即时原子化 CSS 引擎
|
||
|
||
## 项目预览图
|
||
|
||
|
||
|
||
## License
|
||
|
||
[MIT](./LICENSE) License © 2025-PRESENT [pany](https://github.com/pany-ang)
|