如何在uniapp中使用uviewUI-适合uniapp的ui组件_uview-ui

前文说了uniapp能用哪些前端框架，今天来推荐uview。其最新版为2.0.36。最近一次更新日期：2023-03-27。

uView是uni-app生态专用的UI框架，uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码， 可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台(引言自uni-app网)。但目前除微信小程序，其它小程序平台的兼容可能存在一些问题，后续会针对这方面持续优化。

使用步骤：

1、如果使用的是npm方式

先安装依赖包

# 安装 uView  如果是Npm的安装
$ npm install uview-ui

# 如果没有安装sass
npm i sass -D

# 安装sass-loader，注意需要版本10，否则可能会导致vue与sass的兼容问题而报错
npm i sass-loader@10 -D
1
2
3
4
5
6
7
8

在main.js中引入

# 在 main.js 中引入 uView
import uView from 'uview-ui';
Vue.use(uView);
1
2
3

其他步骤请参考3、通用步骤

2、如果是用Hbuilder X导入

如果uniapp是在HbuilderX中开发

a、先打开uview的插件地址：https://ext.dcloud.net.cn/plugin?id=1593

b、点击右侧下载插件并导入HbuilderX按钮

c、导入后，在弹出的对话框中选择要导入的项目，这样就会在该项目中自动生成一个uni_modules文件夹。

其他步骤请参考3、通用步骤。

3、通用步骤

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

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

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

b、引入uView基础样式

<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "uview-ui/index.scss";
</style>
1
2
3
4

4、使用

在pages下的任一页面中使用，具体组件请参考uview官网：

https://www.uviewui.com/

<template>
  <view>
    <uni-button type="primary" @click="handleClick">点击按钮</uni-button>
    <uni-dialog v-model="showDialog" title="提示" content="Hello, uView!"></uni-dialog>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showDialog: false
    };
  },
  methods: {
    handleClick() {
      this.showDialog = true;
    }
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

效果：

5、可以适配微信小程序

uview本质上适合移动端，所以它是可以直接运行在微信小程序端的。

如果你在web前端开发、面试、前端学习路线有困难可以加我V：imqdcnn。免费答疑，行业深潜多年的技术牛人帮你解决bug。

祝你能成为一名优秀的WEB前端开发工程师！