UniBest 项目安装和配置指南

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

安装步骤

1. 创建项目

   首先，使用 pnpm 创建一个新的 UniBest 项目：

   pnpm create unibest
   

2. 安装依赖

   进入项目目录并安装所有依赖：

   cd unibest
   pnpm install
   

3. 运行项目

   安装完成后，你可以通过以下命令运行项目：

   • H5 平台：

     pnpm dev:h5
     

     运行后，打开浏览器访问 http://localhost:9000/。

   • 微信小程序平台：

     pnpm dev:mp-weixin
     

     运行后，打开微信开发者工具，导入本地文件夹，选择本项目的 dist/dev/mp-weixin 文件。

   • App 平台：

     pnpm dev:app
     

     运行后，打开 HBuilderX，导入刚刚生成的 dist/dev/app 文件夹，选择运行到模拟器（开发时优先使用），或者运行的安卓/iOS 基座。

4. 发布项目

   当你准备好发布项目时，可以使用以下命令进行打包：

   • 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 云打包。

通过以上步骤，你就可以成功安装和配置 UniBest 项目，并开始进行跨平台开发。