ow
This commit is contained in:
owenchen committed
1 parent
6a8258ac4b
commit
a7b25d49c4
29 files changed
+1960
-649
No files matched your search
+61
-246
@@ -1,272 +1,87 @@
|
||||
<!-- 语言切换按钮 -->
|
||||
<p align="right" style="margin-top: 10px;">
|
||||
<a href="README.en.md" style="padding: 6px 16px; background: #2979ff; color: #fff; border-radius: 6px; text-decoration: none; font-weight: bold;">English</a>
|
||||
<span style="padding: 6px 16px; background: #ededed; color: #333; border-radius: 6px; margin-left: 8px; font-weight: bold;">中文</span>
|
||||
</p>
|
||||
# 有家相册（uni-app 跨端前端）
|
||||
|
||||
<p align="center">
|
||||
<img alt="logo" src="https://ik.imagekit.io/anyup/uview-pro/common/logo-new.png" width="120" height="120" style="margin-bottom: 10px;">
|
||||
</p>
|
||||
<h3 align="center" style="margin: 30px 0 30px;font-weight: bold;font-size:40px;">uView Pro</h3>
|
||||
<h3 align="center">uni-app Vue3 多平台快速开发的 UI 框架</h3>
|
||||
家庭相册、家族树与文档共享的 uni-app 前端：一套源码出 H5、微信小程序、App 三端。
|
||||
业务后端是 CloudBuilder（.NET），本仓库的前身是旧管理端 WebVue 的迁移工程。
|
||||
|
||||
<div align="center">
|
||||
## 技术栈
|
||||
|
||||
[](https://gitee.com/anyup/uView-Pro)
|
||||
[](https://gitee.com/anyup/uView-Pro)
|
||||
[](https://github.com/anyup/uView-Pro)
|
||||
[](https://github.com/anyup/uView-Pro)
|
||||
[](https://github.com/anyup/uView-Pro/issues)
|
||||
[](https://www.npmjs.com/package/uview-pro)
|
||||
[](https://uviewpro.cn)
|
||||
[](https://nodejs.org/)
|
||||
[](https://pnpm.io/)
|
||||
[](https://en.wikipedia.org/wiki/MIT_License)
|
||||
Vue 3 + TypeScript + Vite + uni-app + uview-pro + Pinia + vue-i18n。
|
||||
**包管理器统一使用 npm**（脚手架附带的 pnpm 配置已移除，请勿提交 `pnpm-lock.yaml`）。
|
||||
|
||||
</div>
|
||||
## 环境要求
|
||||
|
||||
## 说明
|
||||
- Node >= 18
|
||||
- npm >= 9
|
||||
|
||||
`uView UI`，是 [uni-app](https://uniapp.dcloud.io/) 生态优秀的 UI 框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水。
|
||||
|
||||
`uView Pro`，是全面支持 Vue3.0、TypeScript 的 uni-app 生态框架，uView Pro 的基线版本是基于 uView 1.8.8 修改，使用 TypeScript 完全重构，目前已全面支持 uni-app Vue3.0。
|
||||
|
||||
## [组件库文档：https://uviewpro.cn](https://uviewpro.cn)
|
||||
|
||||
## [快速启动模板：https://starter.uviewpro.cn](https://starter.uviewpro.cn)
|
||||
|
||||
## 特性
|
||||
|
||||
- 兼容安卓，iOS，微信小程序，H5，QQ 小程序，百度小程序，支付宝小程序，头条小程序
|
||||
- 70+精选组件，功能丰富，多端兼容，让您快速集成，开箱即用
|
||||
- 众多贴心的 JS 利器，让您飞镖在手，召之即来，百步穿杨
|
||||
- 众多的常用页面和布局，让您专注逻辑，事半功倍
|
||||
- 详尽的文档支持，现代化的演示效果
|
||||
- 按需引入，精简打包体积
|
||||
|
||||
## 鸿蒙预览
|
||||
|
||||
🎉🎉 uView Pro 鸿蒙端应用已正式上线华为鸿蒙应用市场，为您提供完整的业务场景演示平台，包含组件库、模板示例、场景案例等，支持一键复制下载，帮助开发者快速上手并体验组件的实际应用价值！
|
||||
|
||||
> 系统要求：仅支持 HarmonyOS 5.0 及以上版本设备
|
||||
|
||||
<table>
|
||||
<tr align="center">
|
||||
<td><img src="https://ik.imagekit.io/anyup/images/social/qr_harmony.png" width="180" height="180" ></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center"><strong>鸿蒙应用</strong><br>（浏览器扫码）</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
## 手机预览
|
||||
|
||||
您可以通过**微信**或**手机浏览器**扫描以下二维码，查看最佳的演示效果。
|
||||
|
||||
<table class="table">
|
||||
<tr>
|
||||
<td><img src="https://ik.imagekit.io/anyup/images/social/qr_uview_pro_wx.jpg" width="150" height="150" ></td>
|
||||
<td><img src="https://ik.imagekit.io/anyup/images/social/qr_uview_pro_alipay.png" width="150" height="150" ></td>
|
||||
<td><img src="https://ik.imagekit.io/anyup/images/social/qr_uview_pro_h5.png" width="150" height="150" ></td>
|
||||
<td><img src="https://ik.imagekit.io/anyup/images/social/qr_uview_pro_android.png" width="150" height="150" ></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center"><strong>微信小程序</strong><br>（微信扫码）</td>
|
||||
<td align="center"><strong>支付宝小程序</strong><br>（支付宝扫码）</td>
|
||||
<td align="center"><strong>H5</strong><br>（浏览器扫码）</td>
|
||||
<td align="center"><strong>Android</strong><br>（浏览器扫码）</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
运行示例工程，请[下载源码](https://github.com/anyup/uview-pro)后，在项目根目录执行以下命令：
|
||||
## 快速开始
|
||||
|
||||
```bash
|
||||
pnpm install
|
||||
pnpm dev
|
||||
npm install
|
||||
|
||||
npm run dev # H5，默认连本机后端
|
||||
npm run dev:mp-weixin # 微信小程序：产物在 dist/build/mp-weixin，用微信开发者工具导入该目录
|
||||
npm run dev:app # App：产物在 dist/dev/app，再用 HBuilderX 打包运行
|
||||
```
|
||||
|
||||
更多运行和构建命令参考：[pnpm 运行指南](README-pnpm.md)
|
||||
发布构建与检查：
|
||||
|
||||
## 链接
|
||||
| 命令 | 作用 |
|
||||
| --- | --- |
|
||||
| `npm run build` | H5 发布构建 |
|
||||
| `npm run build:mp-weixin` | 微信小程序发布构建 |
|
||||
| `npm run build:app` | App 发布构建 |
|
||||
| `npm run type-check` | vue-tsc 全量类型检查 |
|
||||
| `npm run lint` / `npm run lint:fix` | ESLint 检查 / 自动修复 |
|
||||
|
||||
- [Github](https://github.com/anyup/uview-pro)
|
||||
- [Gitee](https://gitee.com/anyup/uview-pro)
|
||||
- [官方文档](https://uviewpro.cn)
|
||||
- [更新日志](https://github.com/anyup/uView-Pro/blob/master/src/uni_modules/uview-pro/changelog.md)
|
||||
## 后端地址（.env 分层）
|
||||
|
||||
## 交流反馈
|
||||
换环境只改项目根的 `.env` / `.env.development` / `.env.production`，不要在代码里写死地址：
|
||||
|
||||
`uView Pro` 微信交流群： [点击进入](https://uviewpro.cn/zh/resource/about.html)
|
||||
| 变量 | 生效场景 | 缺省回落值 |
|
||||
| --- | --- | --- |
|
||||
| `VITE_WEB_API_ROOT` | 发布构建 | `https://uat.youjiala.com` |
|
||||
| `VITE_WEB_API_ROOT_DEV` | 开发构建（H5） | `http://localhost:5235` |
|
||||
| `VITE_WEB_API_ROOT_DEV_APP` | 开发构建（App 真机/模拟器） | `https://uat.youjiala.com` |
|
||||
|
||||
`uView Pro` QQ 交流群： [点击进入](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=98nSVDldWEbDdq4lxiP4aL7uATfMSlI6&authKey=G2yQJ5MQiKzMldaxBsIfKt17NuJuUw8Fr6zdKLggc6NZXgw4BVbqkU2U3EE994yd&noverify=0&group_code=811732166)
|
||||
变量缺失时由 `src/policy/custom/webSitePolicy.ts` 的常量兜底，删掉 `.env` 也能构建出可用产物。
|
||||
取值口径、新增变量的步骤与三端差异见 [src/md/environment.md](src/md/environment.md)。
|
||||
|
||||
<table class="table">
|
||||
<tr>
|
||||
<td><img src="https://ik.imagekit.io/anyup/images/social/weixin-chat-cl.png" width="250" height="345" ></td>
|
||||
<td><img src="https://ik.imagekit.io/anyup/images/social/qq-chat.png" width="250" height="345" ></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center"><strong>微信群</strong><br></td>
|
||||
<td align="center"><strong>QQ群</strong><br></td>
|
||||
</tr>
|
||||
</table>
|
||||
## 目录速览
|
||||
|
||||
## 关于 PR
|
||||
|
||||
我们非常乐意接受各位的优质 PR，但在此之前我希望您了解 `uView Pro` 是一个需要兼容多个平台的（小程序、h5、iOS App、Android App）包括 nvue 页面、vue 页面。
|
||||
|
||||
所以希望在您修复 bug 并提交之前尽可能的去这些平台测试一下兼容性。最好能携带测试截图以方便审核。非常感谢！
|
||||
|
||||
## 安装配置
|
||||
|
||||
`uView Pro` 支持 `npm` 和 `uni_modules` 两种主流安装方式，配置方式高度一致。无论采用哪种方式，均可通过 `easycom` 实现组件自动引入，极大提升开发效率。以下为统一的配置说明：
|
||||
|
||||
### 1. 安装 uView Pro
|
||||
|
||||
- npm 安装：
|
||||
|
||||
```bash
|
||||
npm install uview-pro
|
||||
# 或
|
||||
yarn add uview-pro
|
||||
# 或
|
||||
pnpm add uview-pro
|
||||
```
|
||||
src/
|
||||
├── api/ service/ 后端接口封装（service/* 由代码生成器维护）
|
||||
├── common/ 请求拦截器、全局错误边界、样式与常量
|
||||
├── pages/ 页面：login / dashboard / error(page401,403,404)
|
||||
├── permission/ 权限内核与页面权限表
|
||||
├── policy/custom/ 站点配置（.env 的 fallback）
|
||||
├── router/ 路径别名、导航拦截器
|
||||
├── stores/ Pinia
|
||||
├── md/ 工程文档（下表）
|
||||
└── manifest.json 三端应用身份（appid / bundleName）
|
||||
```
|
||||
|
||||
- uni_modules 安装：
|
||||
## 改代码前先读的文档
|
||||
|
||||
通过 HBuilderX 插件市场或手动下载，将 uView Pro 放入 `uni_modules` 目录。
|
||||
| 文档 | 讲什么 |
|
||||
| --- | --- |
|
||||
| [src/md/environment.md](src/md/environment.md) | .env 分层、mode 映射、三端读取差异 |
|
||||
| [src/md/error-handling.md](src/md/error-handling.md) | 全局错误边界与「已提示过就不再打扰」的口径 |
|
||||
| [src/md/permission.md](src/md/permission.md) | 权限模型、页面权限表、菜单可见性 |
|
||||
| [src/md/page-routing.md](src/md/page-routing.md) | 路由别名、导航拦截、错误页跳转链 |
|
||||
|
||||
[插件市场：https://ext.dcloud.net.cn/plugin?id=24633](https://ext.dcloud.net.cn/plugin?id=24633)
|
||||
代码风格由 ESLint 约束，但 IDE 里同时生效的 Prettier 与它存在少量对撞规则（箭头括号、运算符换行位置）；
|
||||
冲突写法已在文档里给了规避方式，遇到 `--fix` 反复回退请改写构造而不是硬碰。
|
||||
|
||||
### 2. 引入 uView Pro 主库
|
||||
## 待替换的应用身份
|
||||
|
||||
在 `main.ts` 中引入并注册 uView Pro：
|
||||
`src/manifest.json` 与 `harmony-configs/build-profile.json5` 里的脚手架身份已清成占位，正式发布前需逐项替换：
|
||||
|
||||
```js
|
||||
// npm 方式
|
||||
import uViewPro from 'uview-pro'
|
||||
import { createSSRApp } from 'vue'
|
||||
// uni_modules 方式
|
||||
// import uViewPro from "@/uni_modules/uview-pro";
|
||||
- DCloud `appid`：当前为占位 `__UNI__YJL0001`，需在 HBuilderX 登录自有账号后重新领取
|
||||
- 微信小程序 `appid`：故意留空（构建时回落为 `touristappid`，只能本地预览），发布前换成自有 AppID
|
||||
- 鸿蒙 `bundleName`：当前 `com.youjiala.app`，需与华为侧注册的包名一致
|
||||
- 鸿蒙签名材料路径：`harmony-configs/build-profile.json5` 里指向 `./signing/youjiala.*`，需放入自有证书
|
||||
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App)
|
||||
app.use(uViewPro)
|
||||
return {
|
||||
app
|
||||
}
|
||||
}
|
||||
```
|
||||
## 许可
|
||||
|
||||
### 3. 引入全局样式
|
||||
|
||||
在 `uni.scss` 中引入主题样式：
|
||||
|
||||
```scss
|
||||
/* npm 方式 */
|
||||
@import 'uview-pro/theme.scss';
|
||||
/* uni_modules 方式 */
|
||||
/* @import "@/uni_modules/uview-pro/theme.scss"; */
|
||||
```
|
||||
|
||||
在 `App.vue` 首行引入基础样式：
|
||||
|
||||
```scss
|
||||
<style lang="scss">
|
||||
/* npm 方式 */
|
||||
@import "uview-pro/index.scss";
|
||||
/* uni_modules 方式 */
|
||||
/* @import "@/uni_modules/uview-pro/index.scss"; */
|
||||
</style>
|
||||
```
|
||||
|
||||
### 4. 配置 easycom 自动引入组件
|
||||
|
||||
在 `pages.json` 中配置 `easycom` 规则，实现组件自动引入：
|
||||
|
||||
```json
|
||||
{
|
||||
"easycom": {
|
||||
"autoscan": true,
|
||||
"custom": {
|
||||
// npm 方式
|
||||
"^u-(.*)": "uview-pro/components/u-$1/u-$1.vue"
|
||||
// uni_modules 方式
|
||||
// "^u-(.*)": "@/uni_modules/uview-pro/components/u-$1/u-$1.vue"
|
||||
}
|
||||
},
|
||||
"pages": []
|
||||
}
|
||||
```
|
||||
|
||||
**温馨提示**
|
||||
|
||||
- 1.修改 `easycom` 规则后需重启 HX 或重新编译项目。
|
||||
- 2.请确保 `pages.json` 中只有一个 easycom 字段，否则请自行合并多个规则。
|
||||
- 3.一定要放在 `custom` 内，否则无效。
|
||||
|
||||
### 5. Volar 类型提示支持
|
||||
|
||||
如需在 `CLI` 项目中获得 `Volar` 的全局类型提示，请在 `tsconfig.json` 中添加：
|
||||
|
||||
```json
|
||||
{
|
||||
"compilerOptions": {
|
||||
// npm 方式
|
||||
"types": ["uview-pro/types"]
|
||||
// uni_modules 方式
|
||||
// "types": ["@/uni_modules/uview-pro/types"]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
> HBuilderX 项目暂不支持 `tsconfig.json` 的 `types` 配置，`CLI` 项目推荐配置以获得最佳 `TS` 体验。
|
||||
|
||||
### 6. 组件使用
|
||||
|
||||
配置完成后，无需 `import` 和 `components` 注册，可直接在 `SFC` 中使用 `uView Pro` 组件：
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<u-button type="primary">
|
||||
按钮
|
||||
</u-button>
|
||||
</template>
|
||||
```
|
||||
|
||||
请通过[快速上手](https://uviewpro.cn/zh/components/quickstart.html)了解更详细的内容
|
||||
|
||||
## 捐赠 uView Pro
|
||||
|
||||
`uView Pro` 文档内容和框架源码基于 `uView UI` 二次开发，因此全部开源免费，如果您认为 `uView Pro` 帮到了您的开发工作，您可以捐赠 `uView Pro` 的研发工作，捐赠无门槛，哪怕是一杯可乐也好(相信这比打赏主播更有意义)。
|
||||
|
||||
<table class="table">
|
||||
<tr>
|
||||
<td><img src="https://ik.imagekit.io/anyup/images/social/wechat-pay.png" width="250" height="345" ></td>
|
||||
<td><img src="https://ik.imagekit.io/anyup/images/social/ali-pay.png" width="250" height="345" ></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center"><strong>微信</strong><br></td>
|
||||
<td align="center"><strong>支付宝</strong><br></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
## 贡献者
|
||||
|
||||
<a href="https://github.com/anyup/uView-Pro/graphs/contributors">
|
||||
<img alt="Contributors" src="https://contrib.rocks/image?repo=anyup/uView-Pro" />
|
||||
</a>
|
||||
|
||||
## 版权信息
|
||||
|
||||
`uView Pro` 遵循[MIT](https://en.wikipedia.org/wiki/MIT_License)开源协议，意味着您无需支付任何费用，也无需授权，即可将 `uView Pro` 应用到您的产品中。
|
||||
|
||||
## 鸣谢
|
||||
|
||||
再次感谢 `uView UI` 开发团队，以及所有为 `uView UI` 的贡献者，以及所有为 `uView Pro` 的贡献者。
|
||||
|
||||
- [Github](https://github.com/anyup/uview-pro)
|
||||
- [Gitee](https://gitee.com/anyup/uview-pro)
|
||||
- [uView UI 1.0](https://github.com/umicro/uView)
|
||||
- [uView UI 2.0](https://github.com/umicro/uView2.0)
|
||||
界面组件库 uview-pro 与其脚手架遵循 MIT（见 `LICENSE`）；业务代码版权归本项目所有。
|
||||
Reference in new issue
Block a user