UV-UI 安装与配置完全指南

UV-UI 是一个全面兼容 Vue3 和 Vue2 的全栈前端框架，特别设计用于快速构建跨平台的应用。它基于 Uni-App 和 uView2.x 进行开发，确保了一次编码即可部署至多种环境的能力，包括但不限于 Android、iOS、Web（H5）、以及各种小程序平台。

项目基础介绍及主要编程语言

UV-UI 的创建旨在避免与原uView框架的命名冲突，并解决了nvue环境中部分以"u-"开头的组件无法使用的问题。此框架遵循 MIT 开源协议，免费且开源，非常适合追求高效开发的团队和个人。

主要编程语言和技术栈:

• 核心: Vue.js (Vue 3 & Vue 2)
• 框架: Uni-App, uView2.x
• 支持: 支持JavaScript ES6及以上版本

关键技术和框架

• uni-app: 提供了跨端开发的基础，让代码能够在多个前端平台运行
• uView2.x: 作为基础框架的扩展，提供了丰富的组件和便捷的功能
• Vue3特性支持: 在Vue3环境下利用Composition API增强组件的灵活性
• 适配多端: 自动处理不同平台间的差异，简化开发过程
• 内置工具库: 包含强大工具函数和请求封装，提升开发效率

项目安装和配置步骤

准备工作

1. 安装HBuilderX: 你需要最新版本的HBuilderX，这是一个专为Uni-App设计的集成开发环境
2. Node.js环境: 确保你的机器上已经安装了Node.js（建议版本不低于12.0）
3. Git客户端: 如果从GitCode克隆项目，需要安装 Git

安装步骤

方法一：通过HBuilderX导入插件

1. 克隆项目: 打开终端，克隆项目到本地仓库

   git clone https://gitcode.com/gh_mirrors/uv/uv-ui.git
   

2. 导入HBuilderX: 打开HBuilderX，选择"文件" > "打开项目"，找到刚刚克隆的uv-ui目录，点击确定

3. 运行项目: 若提示缺少依赖或需初始化，根据提示执行npm命令，例如 npm install 或 yarn，完成后重新启动HBuilderX项目

方法二：手动复制uni-modules

1. 如上述步骤克隆项目后，定位到uv-ui中的uni_modules目录
2. 将uni_modules整个目录复制到你的现有Uni-App项目中的相同位置
3. 在项目中使用前，执行必要的依赖安装

方法三：通过npm安装

1. 在你的项目根目录下，添加UV-UI作为依赖

   npm install @climblee/uv-ui --save
   

   或者如果你使用Yarn：

   yarn add @climblee/uv-ui
   

2. 配置easycom规则，允许自动引入UV-UI组件。在项目的manifest.json中添加如下配置（如果已有，则只需添加相应的规则）：

   "easycom": {
     "^uv-": "./uni_modules/uv-ui/components/"
   }
   

配置和注意事项

• 扩展配置: 若要使用UV-UI的内置方法和变量，需要按照文档提供的扩展配置指引设置
• 环境准备: HBuilderX在导入新组件或更改配置后，建议重新运行项目确保所有变更生效
• 预览与测试: 使用HBuilderX内置的模拟器或直接编译到目标平台进行测试

使用方法

组件导入 uni_modules 后，直接在项目中使用，无需通过import引入组件

<template>
    <uv-icon name="baidu" size="30" color="#909399"></uv-icon>
</template>

扩展功能

UV-UI 内置了强大的工具函数、请求封装等，可以根据自身需求进行扩展配置

注意：只有扩展配置后才能在自己的项目页面中使用组件库内置方法和变量等

组件列表

UV-UI 提供了丰富的组件库，包括：

• 基础组件: uv-button, uv-text, uv-icon, uv-image 等
• 表单组件: uv-form, uv-input, uv-textarea, uv-checkbox, uv-radio 等
• 数据展示: uv-list, uv-grid, uv-waterfall, uv-skeleton 等
• 导航组件: uv-tabbar, uv-navbar, uv-tabs, uv-steps 等
• 反馈组件: uv-toast, uv-modal, uv-popup, uv-notify 等
• 其他组件: uv-qrcode, uv-countdown, uv-avatar, uv-backtop 等

版权信息

UV-UI遵循MIT开源协议，意味着您无需支付任何费用，也无需授权，即可将UV-UI应用到您的产品中

这样，你就完成了UV-UI的安装和基本配置，接下来可以直接在Vue组件中开始使用UV-UI的丰富组件库了