uniapp UI库 uView UI的使用

---

一、新建uniapp项目

笔者用的Hbuilder app开发版

二、安装下载uViewUI组件库

方式一：插件市场官网直接下载

官网下载解压到项目文件根目录

方式二、利用npm下载

bash：

npm i uview-ui

三、修改相关配置

1. main.js引入uView库

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

2. App.vue引入基础样式(注意style标签需声明scss属性支持)

/* App.vue */
<style lang="scss">
@import "uview-ui/index.scss";
</style>

3. uni.scss引入全局scss变量文件

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

4. pages.json配置easycom规则(按需引入)

// pages.json
{
	"easycom": {
		// npm安装的方式不需要前面的"@/"，下载安装的方式需要"@/"
		// npm安装方式
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
		// 下载安装方式
		// "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
	},
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

四、使用组件

由于使用了easycom配置所以使用的时候不需要import组件，十分的方便直接拿来用就可以了,组件手册参考uViewUI官网，下面写个案例。

修改index.vue文件示例：

一个下拉框、一个步骤条、一个日历

<template>
	<view class="">
		<u-dropdown>
			<u-dropdown-item v-model="value1" title="距离" :options="options1"></u-dropdown-item>
			<u-dropdown-item v-model="value2" title="温度" :options="options2"></u-dropdown-item>
			</u-dropdown>
			<u-steps :list="numList" :current="1"></u-steps>
			<u-calendar v-model="show" :mode="mode"></u-calendar>
			<u-button @click="show = true">打开</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				mode: 'date',
				value1: 1,
				value2: 2,
				options1: [{
						label: '默认排序',
						value: 1,
					},
					{
						label: '距离优先',
						value: 2,
					},
					{
						label: '价格优先',
						value: 3,
					}
				],
				options2: [{
						label: '去冰',
						value: 1,
					},
					{
						label: '加冰',
						value: 2,
					},
				],
				numList: [{
								name: '下单'
							}, {
								name: '出库'
							}, {
								name: '运输'
							}, {
								name: '签收'
							}, 
				],
			}
		},
	}
</script>

结果展示：

下拉框展示

日历展示

总结：uView UI使用十分的方便、且美观可以提高效率，友友们快用起来吧