<p align="center"> <img alt="logo" src="https://uviewui.com/common/logo.png" width="120" height="120" style="margin-bottom: 10px;"> </p> <h3 align="center" style="margin: 30px 0 30px;font-weight: bold;font-size:40px;">uView</h3> <h3 align="center">多平台快速开发的UI框架</h3> ## 说明 uView UI，是uni-app生态优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水。 ## 特性 - 兼容安卓，iOS，微信小程序，H5，QQ小程序，百度小程序，支付宝小程序，头条小程序。 - 60+精选组件，功能丰富，多端兼容，让您快速集成，开箱即用。 - 众多贴心的JS利器，让您飞镖在手，召之即来，百步穿杨。 - 众多的常用页面和布局，让您专注逻辑，事半功倍。 - 详尽的文档支持，现代化的演示效果。 - 按需引入，精简打包体积。 ## 安装 ```bash # npm方式安装，插件市场导入无需执行此命令 npm i uview-ui ``` ## 快速上手 1. `main.js`引入uView库 ```js // main.js import uView from 'uview-ui'; Vue.use(uView); ``` 2. `App.vue`引入基础样式(注意style标签需声明scss属性支持) ```css /* App.vue */ ``` 3. `uni.scss`引入全局scss变量文件 ```css /* uni.scss */ ### 快速上手指南：uView UI uView UI是一个基于Vue的UI组件库，旨在为前端开发者提供一套简洁、高效的UI解决方案。通过配置`pages.json`文件，可以轻松地按需引入所需的组件，而无需进行繁琐的`import`操作。以下是快速上手uView UI的步骤和相关配置说明。 #### 1. 安装与导入 首先，确保你已经安装了Vue CLI和npm（Node Package Manager）。然后，按照以下步骤操作： ```bash # 安装Vue CLI npm install -g @vue/cli # 创建一个新的Vue项目 vue create uview-ui # 进入项目目录 cd uview-ui # 安装uView UI组件库 npm install u-view-ui --save ``` #### 2. 配置easycom规则 在项目的`pages.json`文件中，添加或修改`easycom`规则，以便按需引入组件。这里提供了两种配置方式： ```json { "pages": [ // ... ], "easycom": { // npm安装的方式不需要前面的"@/"，下载安装的方式需要"@/" // npm安装方式 "^u-(.*)": "u-$1.vue", // 下载安装方式 // npm安装方式 "^u-(.*)": "@/u-$1.vue", }, // 此为本身已有的内容 } ``` #### 3. 使用示例 在模板中使用uView UI组件非常简单。例如： ```html ``` 以上是快速上手uView UI的基本步骤和配置说明。通过遵循这些指导，你可以开始享受uView UI带来的便捷和高效。 uView遵循MIT开源协议，意味着您无需支付任何费用，也无需授权，即可将uView应用到您的产品中。 ![uView](https://uviewui.com/common/alipay.png) ![uView](https://uviewui.com/common/wechat.png)