UniBest 项目安装和配置指南

2026-01-25 05:43:47作者：凌朦慧Richard

1. 项目基础介绍和主要编程语言

UniBest 是一个由 uniapp + Vue3 + TypeScript + Vite4 + UnoCss + UniUI 驱动的跨端快速启动模板。它旨在为开发者提供一个开箱即用的 uniapp 开发环境，具有代码提示、自动格式化、统一配置、代码片段等功能。UniBest 主要使用 TypeScript 和 Vue 3 进行开发，同时也涉及到 JavaScript、CSS 等前端技术。

2. 项目使用的关键技术和框架

UniBest 项目使用了以下关键技术和框架：

uniapp：一个基于 Vue.js 的跨平台开发框架，支持一次编写，多端运行（H5、小程序、App）。
Vue 3：Vue.js 的最新版本，提供了更好的性能和更丰富的功能。
TypeScript：一种强类型的 JavaScript 超集，提供了更好的类型检查和开发体验。
Vite 4：一个快速的构建工具，特别适合现代前端开发。
UnoCss：一个轻量级的 CSS 框架，提供了高效的样式解决方案。
UniUI：uniapp 官方提供的 UI 组件库，方便开发者快速构建界面。

3. 项目安装和配置的准备工作和详细安装步骤

准备工作

在开始安装和配置 UniBest 项目之前，请确保你的开发环境满足以下要求：

Node.js：版本 >= 18
pnpm：版本 >= 7.30
Vue：版本 <= 2.1.6
TypeScript：版本 <= 5.5.4

安装步骤

创建项目

首先，使用 pnpm 创建一个新的 UniBest 项目：
```
pnpm create unibest
```
安装依赖

进入项目目录并安装所有依赖：
```
cd unibest
pnpm install
```
运行项目

安装完成后，你可以通过以下命令运行项目：
- H5 平台：
```
pnpm dev:h5
```
  运行后，打开浏览器访问 http://localhost:9000/。
- 微信小程序平台：
```
pnpm dev:mp-weixin
```
  运行后，打开微信开发者工具，导入本地文件夹，选择本项目的 dist/dev/mp-weixin 文件。
- App 平台：
```
pnpm dev:app
```
  运行后，打开 HBuilderX，导入刚刚生成的 dist/dev/app 文件夹，选择运行到模拟器（开发时优先使用），或者运行的安卓/iOS 基座。
发布项目

当你准备好发布项目时，可以使用以下命令进行打包：
- H5 平台：
```
pnpm build:h5
```
  打包后的文件在 dist/build/h5，可以放到 web 服务器（如 nginx）运行。如果最终不是放在根目录，可以在 manifest.config.ts 文件的 h5.router.base 属性进行修改。
- 微信小程序平台：
```
pnpm build:mp-weixin
```
  打包后的文件在 dist/build/mp-weixin，然后通过微信开发者工具导入，并点击右上角的“上传”按钮进行上传。
- App 平台：
```
pnpm build:app
```
  然后打开 HBuilderX，导入刚刚生成的 dist/build/app 文件夹，选择发行 - APP 云打包。