uni-app UI框架之uview-ui使用教程

uviewUI

多平台快速开发的UI框架


uni-app2018年初发布以来,一直蓬勃发展,一派欣欣向荣,社区也是人声鼎沸,众望所归。
因此,uView应运而生,uView的目标是成为uni-app生态最优秀的UI框架。

  • 接下来将介绍uview如何配置到uniapp项目中

如果你想了解到更详细的文档,进入uview官网查看

接下来将为你带来几种方式的图文教程

使用安装包(这里就不讲解npm方式安装了)

首先要去官网下载最新的包 下载地址

image

官网提供了三种包

  • 第一种方式只有uview源码,这是uview的核心。
  • 第二种方式类似于一个uview项目的脚手架,这是个空项目,但它已经帮我们配置好uview了,所以如果你是一个新的uniapp项目,可以选择下载这个。
  • 方式三是整个uView演示项目,里面有uView核心,组件演示,模板等。此项目运行用于查看UI演示效果,复制模板案例,通过里面的示例,可以快速掌握某一个组件的用法。(可以下载一个,体验uview项目的所有组件与模版)

因为我们是教大家怎么配置一个uview,所以我们下载第一个包。

接下来我们使用HBuilderX创建一个uniapp的项目

image

创建完成之后,我们将刚刚下载的包,直接复制到项目的根目录下。

image

因为uview的使用的是scss,所以我们需要使用HBuilderX安装scss的插件。

点击工具,插件安装,找到 scss/sass编译 点击右方的安装

image

对HBuilderX的配置就结束了,接下来要对项目进行设置。(分为4步)

一、引入uView主JS库

在项目根目录中的main.js中,引入并使用uView的JS库, 注意这两行要放在import Vue之后。

// main.js
import uView from "uview-ui";
Vue.use(uView);

image

二、在引入uView的全局SCSS主题文件

在项目根目录的uni.scss中引入此文件。

/* uni.scss */
@import 'uview-ui/theme.scss';

image

三、引入uView基础样式

App.vue中首行的位置引入,注意给style标签加入lang="scss"属性



image

四、配置easycom组件模式

此配置需要在项目根目录的pages.json中进行。

uni-app为了调试性能的原因,修改easycom规则不会实时生效,配置完后,您需要重启HX或者重新编译项目才能正常使用uView的功能。

// pages.json
{
    "easycom": {
        "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
    },

    // 此为本身已有的内容
    "pages": [
        // ......
    ]
}

image

到此处,我们已经将uview配置好了,接下来写个示例验证一下

使用表格组件来演示一下

image

没有任何问题,至此,我们已经成功配置完uview啦!

你可能感兴趣的:(uni-app UI框架之uview-ui使用教程)