uView Pro

主题

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

快速起步 ​

13:16

本文档将帮助你快速上手 uView Pro Starter 项目。

前置要求 ​

在开始之前，请确保你的环境中已安装：

工具版本说明
Node.js16+JavaScript 运行时
pnpm9+包管理工具（推荐）
VS Code最新版代码编辑器（可选）
HBuilderX3.8+uniapp 开发工具（可选）

项目初始化 ​

1. 获取项目 ​

方式一：直接克隆（推荐）

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

方式二：下载 ZIP

从 GitHub Releases 下载最新版本

方式三：使用 create-uni 脚手架创建

bash
pnpm create uni <项目名称> -t uview-pro-starter

2. 安装依赖 ​

bash
# 使用 pnpm（推荐）
pnpm install

# 或使用 npm
npm install

# 或使用 yarn
yarn install

提示： 为了确保所有依赖版本一致，建议使用 pnpm 并配合 pnpm-lock.yaml 文件

开发调试 ​

H5 开发 ​

bash
pnpm run dev:h5

浏览器会自动打开 http://localhost:5173，支持热模块更新（HMR）。

微信小程序开发 ​

bash
pnpm run dev:mp-weixin

打开微信开发者工具，导入项目的 dist/dev/mp-weixin 目录。

App 开发 ​

bash
pnpm run dev:app

使用 HBuilderX 打开项目进行 App 开发。

生产构建 ​

H5 生产构建 ​

bash
pnpm run build:h5

输出目录：dist/build/h5

微信小程序生产构建 ​

bash
pnpm run build:mp-weixin

输出目录：dist/build/mp-weixin

App 生产构建 ​

bash
pnpm run build:app

项目配置调整 ​

修改应用名称和描述 ​

编辑 src/manifest.json：

json
{
  "name": "你的应用名称",
  "description": "你的应用描述",
  "versionName": "1.0.0"
}

修改页面配置 ​

编辑 src/pages.json 配置路由和全局样式：

json
{
  "pages": [
    { "path": "pages/home/home" },
    { "path": "pages/about/about" }
  ],
  "globalStyle": {
    "navigationBarTitleText": "uView Pro"
  }
}

修改应用主题 ​

编辑 src/theme.json 配置亮色和深色主题的颜色：

json
{
  "light": {
    "bgColor": "#fcfcfc",
    "navBgColor": "#ff6b00",
    "tabSelectedColor": "#ff6b00"
  },
  "dark": {
    "bgColor": "#181818",
    "navBgColor": "#ff6b00"
  }
}

IDE 推荐配置 ​

VS Code ​

安装以下扩展以获得最佳开发体验：

  1. Volar - Vue3 语言支持
  2. uniapp Snippets - uniapp 代码片段
  3. Prettier - 代码格式化
  4. TypeScript Vue Plugin (Volar) - TypeScript 支持

推荐的 .vscode/settings.json 配置：

json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

HBuilderX ​

  1. 打开项目文件夹
  2. 配置 Node 环境路径
  3. 启用 Typescript 支持

常见问题 ​

安装依赖时出现错误 ​

bash
# 清除缓存后重新安装
pnpm install --force

开发时页面不更新 ​

确保：

  1. 没有多个开发服务器同时运行
  2. 浏览器缓存已清除
  3. 文件保存正确

构建后体积过大 ​

可以尝试：

  1. 移除不需要的页面和组件
  2. 清理未使用的依赖
  3. 优化静态资源

如何删除不需要的功能？ ​

该项目设计为可定制化的，你可以根据需要删除：

  • 删除国际化：删除 src/locale 目录和 main.ts 中的相关配置
  • 删除 Pinia：删除 src/stores 目录和 main.ts 中的 app.use(store)
  • 删除某个页面：直接删除 src/pages 中的页面文件并更新 pages.json

下一步 ​

现在你已经成功初始化了项目，可以开始开发了：

获取帮助 ​

如果遇到问题，可以：

  1. 查看 常见问题
  2. 在 GitHub Issues 提交问题
  3. 查阅 uniapp 官方文档