uView Pro

主题

微信扫描二维码，关注我
赞助位
成为赞助商

快速启动项目 ​

13:16

介绍 ​

uView Pro Starter 是一个基于 uView Pro UI 组件库的快速启动项目。该项目为开发者提供了一套完整的项目骨架和最佳实践，帮助开发者快速构建跨平台应用。

项目特性 ​

  • 📱 跨平台支持 - 支持 App、H5、微信小程序、支付宝小程序等多端
  • 🎨 丰富的 UI 组件 - 集成 uView Pro 组件库，提供 80+ 高质量组件
  • 🌍 多语言国际化 - 内置 vue-i18n，支持中英文切换
  • 🎭 多主题支持 - 支持亮色/深色主题，轻松实现换肤功能
  • 📊 状态管理 - 集成 Pinia 状态管理库，含数据持久化
  • 🔐 HTTP 请求 - 集成 uView Pro 的 HTTP 模块，支持请求/响应拦截
  • 📝 完整的项目配置 - Pages.json、Manifest.json 等配置文件已预配置
  • 🎯 最佳实践 - 展示项目结构组织、模块化开发等最佳实践

项目结构 ​

uview-pro-starter/src/
├── pages/              # 页面目录（主要开发目录）
│   ├── home/          # 首页模块
│   └── about/         # 关于模块
├── components/        # 组件目录
├── stores/            # Pinia 状态管理
│   ├── counter.ts     # 计数器 store
│   └── user.ts        # 用户 store
├── locale/            # 国际化配置
│   └── lang/
│       ├── en-US.json    # 英文语言包
│       └── zh-CN.json  # 简体中文语言包
├── common/            # 公共配置和工具
│   ├── http.interceptor.ts  # HTTP 拦截器
│   ├── uview-pro.theme.ts   # 主题配置
│   └── constant.ts    # 常量定义
├── static/            # 静态资源
├── pages.json         # 路由配置
├── manifest.json      # 应用配置
├── theme.json         # 应用主题色配置
├── App.vue            # 根组件
└── main.ts            # 入口文件

核心技术栈 ​

技术描述版本
uniapp跨平台开发框架4.87
VueJavaScript 框架3.4.21
TypeScript类型检查语言^5.9.3
uView ProUI 组件库latest
Pinia状态管理库2.2.4
pinia-plugin-persistedstatePinia 数据持久化3.2.1
vue-i18n国际化解决方案9.1.9
unocss原子化 CSS 引擎66.0.0
sassCSS 预处理器1.64.2
vite构建工具5.2.8

快速开始 ​

1. 克隆项目 ​

bash
git clone https://github.com/anyup/uView-Pro-Starter.git
cd uView-Pro-Starter

2. 安装依赖 ​

bash
pnpm install

3. 开发模式 ​

bash
# 运行到 H5
pnpm run dev:h5

# 运行到微信小程序
pnpm run dev:mp-weixin

# 运行到 App
pnpm run dev:app

4. 构建生产 ​

bash
# 构建 H5
pnpm run build:h5

# 构建微信小程序
pnpm run build:mp-weixin

包含的功能示例 ​

  • ✨ HTTP 网络请求 - 展示如何使用 HTTP 模块请求数据
  • 🔄 状态管理 - Pinia store 的使用示例
  • 🎨 组件使用 - uView Pro 各类组件的使用方式
  • 🌐 国际化 - 多语言切换的实现
  • 🎭 主题切换 - 亮色/深色主题的切换
  • 📱 自定义导航 - 自定义 Tabbar 导航栏

下一步 ​

常见问题 ​

项目是否可以删除不需要的功能？ ​

是的！这是一个快速启动项目，你可以根据实际需求自由删除不需要的功能：

  • 不需要多语言？删除 locale 目录即可
  • 不需要 Pinia？移除 stores 目录和相关配置
  • 不需要某个页面？直接删除对应的页面文件

项目是否支持暗黑模式？ ​

是的！项目内置了暗黑模式支持，可以在主题配置文件中配置亮色和深色主题的颜色值。

如何集成我的后端 API？ ​

在 src/common/http.interceptor.ts 中修改 baseUrl，然后在 HTTP 请求中使用相对路径即可。

许可证 ​

MIT

相关资源 ​