unibest/README.md
2024-01-23 10:43:43 +08:00

119 lines
5.3 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<p align="center"><img width="100" src="https://vuejs.org/images/logo.png"></p>
<h2 align="center">unibest - 最好用的 uniapp 开发框架</h2>
<h3>github</h3>
<p align="center">
[![star](https://img.shields.io/github/stars/codercup/unibest)](https://github.com/codercup/unibest)
[![forks](https://img.shields.io/github/forks/codercup/unibest)](https://github.com/codercup/unibest)
[![version](https://img.shields.io/github/package-json/v/codercup/unibest/main)](https://github.com/codercup)
[![release](https://img.shields.io/github/v/release/codercup/unibest)](https://github.com/codercup/unibest)
[![license](https://img.shields.io/github/license/elemefe/vue-amap.svg?style=flat-square)](https://gitee.com/codercup/unibest)
</p>
<h3>gitee</h3>
<p align="center">
[![star](https://gitee.com/codercup/unibest/badge/star.svg?theme=dark)](https://giett.com/codercup/unibest)[![fork](https://gitee.com/codercup/unibest/badge/fork.svg?theme=dark)](https://gitee.com/codercup/unibest)
[![license](https://img.shields.io/github/license/elemefe/vue-amap.svg?style=flat-square)](https://gitee.com/codercup/unibest)
</p>
<h3>简介</h3>
<p align="center"><b>unibest 是由 uni-app + Vue3 + Ts + Vite4 + UnoCss + UniUI 驱动的跨端快速启动模板,使用 VS Code 开发,具有代码提示、自动格式化、统一配置、代码片段等功能,另外内置了大量平时开发常用的基本组件,开箱即用,让你编写 UnitAPP 拥有 Best 体验。</b></p>
![](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)
## ✨ 特性
- ⚡️ [Vue 3](https://github.com/vuejs/core), [Vite](https://github.com/vitejs/vite), [pnpm](https://pnpm.io/), [esbuild](https://github.com/evanw/esbuild) - 就是快!
- 📦 [组件自动化加载](./src/components)
- 📑 pinia+适用于多端的持久化方案
- 🎨 [UnoCSS](https://unocss.dev/) - 高性能且极具灵活性的即时原子化 CSS 引擎
- 😃 [UnoCSS Icons](https://unocss.dev/presets/icons), [海量图标-https://icones.js.org/](https://icones.js.org/)
- 🔥 使用 [新的 `<script setup>` 语法](https://github.com/vuejs/rfcs/pull/227)
- 📥 [API 自动加载](https://github.com/antfu/unplugin-auto-import) - 直接使用 Composition API 无需引入
- 🦾 [TypeScript](https://www.typescriptlang.org/) & [ESLint](https://eslint.org/) & [stylelint](https://stylelint.io/) - 保证代码质量
- 🌈 [husky](https://typicode.github.io/husky/) & [lint-staged](https://github.com/lint-staged/lint-staged) + [commitlint](https://commitlint.js.org/) - 保证代码提交质量
- 🗂 ES6 import 顺序自动排序css 属性自动排序,增强编码一致性
- 🌍 使用请求拦截器,封装好您的请求
- 🛡 图片自动压缩再也不用去tinyPng等网站压缩图片了
- 🖥 多环境配置分开,想则怎么配置就怎么配置
## 🗂 业务功能
- [x] 页面下拉刷新(全局+局部)
- [x] 页面上拉加载
- [x] 导航栏返回or去首页
- [x] 导航栏渐变(微信+h5+App)
- [x] 自定义导航栏顶部机型适配
- [x] 微信小程序分享(好友+朋友圈)
- [x] 微信登录
- [x] 非微信登录h5 和 App)
- [x] 微信小程序获取头像昵称+隐私协议
- [x] 微信小程序vconsole调试
- [ ] 微信一键登录(基于手机号)- 需要非个人认证用户
- [ ] 仿BOSS直聘-个人中心
- [ ] 仿华为商城-个人中心
- [ ] 页面悬浮球(floating bubble)
- [ ] 多tab列表功能
- [ ] 瀑布流
- [ ] 头像上传
- [x] 抽奖-九宫格抽奖
- [x] 抽奖-大转盘抽奖
- [ ] 仿网易云音乐APP独立项目
- [ ] 仿网易云音乐APP独立项目
## ⚙️ 环境
- pnpm>=8.12
- node>=18
## 📦 运行
- 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云打包。
![app发行](./screenshots/app-build.png)
## 🎨 `v3` 代码段
`vue` 文件里面输入 `v3` 触发这个代码段。如下图,用户可以在`.vscode/vue3.code-snippets` 里面自行修改。
![v3 snippets](./screenshots/snippets.gif)
## 🌍 License
[MIT](https://opensource.org/license/mit/)
Copyright (c) 2024 菲鸽
## 🤝 给作者加鸡腿
如果对你有帮助,请给作者加鸡腿~
<p align='center'>
<img alt="special sponsor appwrite" src="./screenshots/pay-weixin.png" width="300">
<img alt="special sponsor appwrite" src="./screenshots/pay-ali.png" width="300">
</p>