[保姆级教程]uniapp安装使用uViewUI教程

文章目录

  • [创建 UniApp 项目](#创建 UniApp 项目)
  • [下载uView UI](#下载uView UI)
    • 下载安装方式
      • [步骤 1: 安装 uView UI](#步骤 1: 安装 uView UI)
      • [步骤 2: 查看uView UI是否下载成功](#步骤 2: 查看uView UI是否下载成功)
      • [步骤 3: 引入 uView 主 JS 库](#步骤 3: 引入 uView 主 JS 库)
      • [步骤 4: 引入 uView 的全局 SCSS 主题文件](#步骤 4: 引入 uView 的全局 SCSS 主题文件)
      • [步骤 5: 引入 uView 基础样式](#步骤 5: 引入 uView 基础样式)
      • [步骤 6: 配置 easycom 组件模式](#步骤 6: 配置 easycom 组件模式)
      • 注意事项
    • NPM方式
      • [步骤 1: 安装 uView UI](#步骤 1: 安装 uView UI)
      • [步骤 2: 配置 uView UI](#步骤 2: 配置 uView UI)
  • [使用uView UI组件](#使用uView UI组件)

创建 UniApp 项目

首先,确保你已经安装好了 Node.js 和 HBuilderX(或者使用其他支持 UniApp 的开发环境)。

  1. 安装 HBuilderX :如果你还没有安装 HBuilderX,可以到官网下载并安装:HBuilderX 官网

  2. 创建 UniApp 项目

    • 打开 HBuilderX,选择「新建项目」。
    • 选择「UniApp」,然后点击「下一步」。
    • 输入项目名称和路径,选择模板(比如「默认模板」),然后点击「完成」创建项目。

前情步骤,可查看以下文章
[巨详细]安装HBuilder-X教程

[巨详细]使用HBuilder-X新建uniapp项目教程

下载uView UI

官网地址:uView UI 官网:https://uviewui.com/

下载地址:uView UI下载:https://ext.dcloud.net.cn/plugin?id=1593

uView UI 目前分为下载安装和npm安装两种,各有利弊具体区别看官网

下载安装方式

步骤 1: 安装 uView UI

点击下载地址:uView UI下载:https://ext.dcloud.net.cn/plugin?id=1593

点击下载并导入hbuilder

选择合适的项目,点击确定安装

出现导入成功就是安装成功了。

步骤 2: 查看uView UI是否下载成功

有uni_modules文件夹或者uview-ui文件夹在根目录就是下载成功了。

步骤 3: 引入 uView 主 JS 库

在项目根目录中的 main.js 文件中引入并使用 uView 的 JS 库。

javascript 复制代码
// main.js
import Vue from 'vue';
import uView from 'uview-ui';

Vue.use(uView);

步骤 4: 引入 uView 的全局 SCSS 主题文件

在项目根目录的 uni.scss 文件中引入 uView 的 SCSS 主题文件。

scss 复制代码
/* uni.scss */
@import 'uview-ui/theme.scss';

步骤 5: 引入 uView 基础样式

App.vue 中的 <style> 标签中的首行位置引入 uView 的基础样式,确保给 <style> 标签加入 lang="scss" 属性。

vue 复制代码
<!-- App.vue -->
<style lang="scss">
  /* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
  @import "uview-ui/index.scss";
</style>

步骤 6: 配置 easycom 组件模式

在项目根目录的 pages.json 文件中配置 easycom 组件模式,确保 uView 的组件可以在项目中被正确引用。

json 复制代码
// pages.json
{
  "easycom": {
    "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
  },
  
  // 此为本身已有的内容
  "pages": [
    // ......
  ]
}

注意事项

  • 确保在 main.js 中引入 uView 的操作放在 import Vue from 'vue'; 之后。
  • 需要重启或重新编译项目以使 easycom 的配置生效。
  • 检查 uni.scssApp.vue 中的样式引入语句是否正确,确保路径和文件名与实际 uView 所在位置一致。

通过以上步骤,你已经成功地将 uView UI 集成到了你的 UniApp 项目中,并可以开始使用其提供的丰富组件和样式来构建界面。

NPM方式

安装和使用 uView UI 在 UniApp 中是相对简单的过程,下面我来为你提供一个基本的教程。

步骤 1: 安装 uView UI

接下来,我们需要在 UniApp 项目中安装 uView UI。

  1. 打开终端

    • 在 HBuilderX 中,点击菜单栏的「工具」->「开发者工具」->「终端」,这样就可以打开终端。
  2. 使用 npm 安装 uView UI

    • 在终端中输入以下命令来安装 uView UI:
js 复制代码
     npm install uview-ui
  • 或者使用 yarn 安装:
js 复制代码
     yarn add uview-ui

步骤 2: 配置 uView UI

安装完成 uView UI 后,需要在项目中进行配置。

  • pages.json 文件中,将 uview-ui 的样式文件引入到 globalStyle 字段中,例如:
json 复制代码
     "globalStyle": {
         "navigationBarTextStyle": "black",
         "navigationBarTitleText": "uni-app",
         "navigationBarBackgroundColor": "#F8F8F8",
         "backgroundColor": "#F8F8F8",
         "app-plus": {
             "preload": {
                 "preloadRule": {
                     "path": "pages/index/index.vue",
                     "style": {
                         "loading": true
                     }
                 }
             }
         },
         "usingComponents": {
             "u-loading": "uview-ui/components/u-loading/u-loading"
         }
     }
  • 在需要使用 uView UI 的页面中,例如 index.vue,可以像使用其他组件一样直接使用 uView UI 的组件,例如:
vue 复制代码
     <template>
       <view>
         <u-loading :show="true" :type="'chiaroscuro'" :color="'#007AFF'" :text="'加载中...'"></u-loading>
       </view>
     </template>
     
     <script>
     export default {
       data() {
         return {
           
         }
       }
     }
     </script>
  • 上述代码中,我们使用了 uView UI 的 u-loading 组件来展示一个加载中的提示。

使用uView UI组件

用按钮为案例

复制到文档中

html 复制代码
    <u-button type="primary" text="确定"></u-button>
    <u-button type="primary" :plain="true" text="镂空"></u-button>

项目展示效果:

您好,我是肥晨。

欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。

相关推荐
断墨先生5 小时前
uniapp—android原生插件开发(3Android真机调试)
android·uni-app
guai_guai_guai7 小时前
uniapp
前端·javascript·vue.js·uni-app
阿伟来咯~12 小时前
一些 uniapp相关bug
uni-app·bug
瑶琴AI前端16 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
mosen86816 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
尚梦1 天前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
尚学教辅学习资料1 天前
基于SSM+uniapp的营养食谱系统+LW参考示例
java·uni-app·ssm·菜谱
Bessie2341 天前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
qq22951165022 天前
小程序Android系统 校园二手物品交换平台APP
微信小程序·uni-app
qq22951165022 天前
微信小程序uniapp基于Android的流浪动物管理系统 70c3u
微信小程序·uni-app