158 lines
7.5 KiB
Markdown
158 lines
7.5 KiB
Markdown
<p align="center">
|
||
<a href="https://github.com/codercup/unibest">
|
||
<img width="200" src="./src/static/logo.svg">
|
||
</a>
|
||
</p>
|
||
|
||
<h1 align="center">
|
||
<a href="https://github.com/codercup/unibest" target="_blank">unibest - 最好用的 uniapp 开发模板</a>
|
||
</h1>
|
||
|
||
<div align="center">
|
||
|
||
[](https://github.com/codercup/unibest)
|
||
[](https://github.com/codercup/unibest)
|
||
[](https://gitee.com/codercup/unibest/stargazers)
|
||
[](https://gitee.com/codercup/unibest/members)
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
|
||
<div align="center"><b>unibest 是由 uniapp + Vue3 + Ts + Vite4 + UnoCss + UniUI + VSCode 驱动的跨端快速启动模板，具有代码提示、自动格式化、统一配置、代码片段等功能，内置了许多常用的基本组件和基本功能，开箱即用，让你编写 uniapp 拥有 best 体验。</b></div>
|
||
|
||
|
||
|
||
<p align="center">
|
||
<a href="https://codercup.github.io/unibest/">📱 在线预览(github)</a>
|
||
<span style="margin:0 10px;">|</span>
|
||
<a href="https://codercup.gitee.io/unibest/">📱 在线预览(gitee)</a>
|
||
<span style="margin:0 10px;">|</span>
|
||
<a href="#">📖 阅读文档(github)</a>
|
||
<span style="margin:0 10px;">|</span>
|
||
<a href="#">📖 阅读文档(gitee)</a>
|
||
</p>
|
||
|
||
## ✨ 特性
|
||
|
||
- ⚡️ [Vue 3](https://github.com/vuejs/core), [Vite](https://github.com/vitejs/vite), [pnpm](https://pnpm.io/), [esbuild](https://github.com/evanw/esbuild) - 就是快！
|
||
|
||
- 🔥 最新语法：使用新的 `<script setup>` 语法
|
||
|
||
- 🎨 [UnoCSS](https://unocss.dev/) - 高性能且极具灵活性的即时原子化 CSS 引擎
|
||
|
||
- 🍍 [pinia](https://pinia.vuejs.org/) & [pinia-plugin-persistedstate](https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/) - 全端适配的全局数据管理
|
||
|
||
- 🦾 [TypeScript](https://www.typescriptlang.org/) & [ESLint](https://eslint.org/) & [stylelint](https://stylelint.io/) - 保证代码质量
|
||
|
||
- 😃 [UnoCSS Icons](https://unocss.dev/presets/icons) & [icones](https://icones.js.org/) - 海量图标供你选择
|
||
|
||
- 📦 [组件自动化加载](./src/components) - 可配置化的组件加载方式，轻松加载组件
|
||
|
||
- 📥 [API 自动加载](https://github.com/antfu/unplugin-auto-import) - 直接使用 Composition API 无需引入
|
||
|
||
- 🌈 [husky](https://typicode.github.io/husky/) & [lint-staged](https://github.com/lint-staged/lint-staged) + [commitlint](https://commitlint.js.org/) - 保证代码提交质量
|
||
|
||
- 🎉 `v3` Code Snippets 加快你的页面生成
|
||
|
||
- 🗂 `uni.request` 请求封装 & 请求拦截，一键引入，快捷使用
|
||
|
||
- 💡 ES6 import 顺序自动排序，css 属性自动排序，增强编码一致性
|
||
|
||
- 🖥 多环境配置分开，想则怎么配置就怎么配置
|
||
|
||
## 👍 业务功能
|
||
|
||
- [x] 页面下拉刷新（全局+局部）
|
||
- [x] 页面上拉加载
|
||
- [x] 导航栏返回 or 去首页
|
||
- [x] 导航栏渐变（微信+h5+App)
|
||
- [x] 自定义导航栏顶部机型适配
|
||
- [x] 微信小程序分享（好友+朋友圈）
|
||
- [x] 微信登录
|
||
- [x] 非微信登录（h5 和 App)
|
||
- [x] 微信小程序获取头像昵称+隐私协议
|
||
- [x] 微信小程序 vconsole 调试
|
||
- [ ] 微信一键登录（基于手机号）- 需要非个人认证用户
|
||
- [x] 页面悬浮球(floating bubble)
|
||
- [x] 多 tab 列表功能
|
||
- [x] 瀑布流
|
||
- [ ] 仿`BOSS直聘`个人中心
|
||
- [ ] 仿华为商城个人中心
|
||
- [ ] 仿网易云音乐 APP（独立项目）
|
||
|
||
## 👉 Road Map
|
||
|
||
`Road Map` 如下，期待有心人一起完成。
|
||
|
||
- 1、`unibest` 官方文档编写，类似 `vue` 文档，新开一个项目，文档用 `vitepress` 生成。
|
||
- 2、`hello-unibest` 项目继续完成，还有很多使用功能未加入/未完成，如多语言、微信登录、自定义tabbar等。
|
||
- 3、`unibest` 新增运行时“自动打开微信开发者工具”和打包时可以“自动上传代码到微信开发者平台”，通过编写VSCODE插件完成。
|
||
- 4、发布 `npm` 包 `create-unibest`，用户可以通过 `npm create unibest` 命令生成项目，默认模板与 `unibest` 项目类似，额外可选择项为：
|
||
- 是否使用多语言
|
||
- 是否使用自定义tabbar (非APP项目)
|
||
- 未想好
|
||
- ...
|
||
|
||
## ⚙️ 环境
|
||
|
||
- node>=18
|
||
- pnpm>=7.30
|
||
|
||
## 📦 运行（支持热更新）
|
||
|
||
- web平台： `pnpm dev:h5`, 然后打开 [http://localhost:9000/](http://localhost:9000/)。
|
||
- weixin平台：`pnpm dev:mp-weixin` 然后打开微信开发者工具，导入本地文件夹，选择本项目的`dist/dev/mp-weixin` 文件。
|
||
- APP平台：`pnpm dev:app`, 然后打开 `HBuilderX`，导入刚刚生成的`dist/dev/app` 文件夹，选择运行到模拟器(开发时优先使用)，或者运行的安卓/ios基座。
|
||
|
||
## 🔗 发布
|
||
|
||
- web平台： `pnpm build:h5`，打包后的文件在 `dist/build/h5`，可以放到web服务器，如nginx运行。如果最终不是放在根目录，可以在 `vite.config.ts` 的 `base` 属性进行配置。[vite官网](https://cn.vitejs.dev/config/shared-options.html#base)
|
||
- weixin平台：`pnpm build:h5`, 打包后的文件在 `dist/build/mp-weixin`，然后通过微信开发者工具导入，并点击右上角的“上传”按钮进行上传。
|
||
- APP平台：`pnpm build:app`, 然后打开 `HBuilderX`，导入刚刚生成的`dist/build/app` 文件夹，选择发行 - APP云打包。
|
||
|
||
## 🎨 `v3` 代码段
|
||
|
||
在 `vue` 文件里面输入 `v3` 触发这个代码段。如下图，用户可以在`.vscode/vue3.code-snippets` 里面自行修改。
|
||
|
||
|
||
|
||
## 📂 License
|
||
|
||
[MIT](https://opensource.org/license/mit/)
|
||
|
||
Copyright (c) 2024 菲鸽
|
||
|
||
## 📊 Github Star History
|
||
|
||
[](https://star-history.com/#codercup/unibest&Date)
|
||
|
||
## 💓 捐赠鼓励
|
||
|
||
开源不易，如果 `unibest` 对你有些帮助，可以请作者喝杯奶茶，算是对开源做出的一点点鼓励吧！
|
||
|
||
<p align='center'>
|
||
<img alt="special sponsor appwrite" src="./screenshots/pay-wx-2.png" width="120" style="margin-left:0px;">
|
||
<img alt="special sponsor appwrite" src="./screenshots/pay-wx-5.png" width="120" style="margin-left:2px;">
|
||
<img alt="special sponsor appwrite" src="./screenshots/pay-wx-10.png" width="120" style="margin-left:2px;">
|
||
</p>
|
||
|
||
## 🤝 微信交流群
|
||
|
||
扫码进微信群，微信群7天过期，作者会定期维护，争取读者每次打开都是可用的。
|
||
|
||
<p align='center'>
|
||
<img alt="special sponsor appwrite" src="./screenshots/wx-group.png" width="300" style="margin-left:0px;">
|
||
</p>
|
||
|
||
## 💖 微信公众号
|
||
|
||
欢迎关注公众号“菲鸽爱编程”——坚持原创，用心写文，分享知识，共同成长。里面会不定期分享前端、Nodejs、微信小程序、开源库等方面的优秀文章。
|
||
|
||
<p align='center'>
|
||
<img alt="special sponsor appwrite" src="./screenshots/wx-gzh.png" width="300" style="margin-left:0px;">
|
||
</p>
|