uniapp UI库 uView UI的使用

刺骨的言语ヽ痛彻心扉 2022-09-03 03:29 503阅读 0赞

### uniapp UI库 uView UI的使用 ###

*   *  一、新建\`uniapp\`项目
     *   *  二、安装下载\`uViewUI\`组件库
         *   *   *  方式一：\[插件市场官网\](https://ext.dcloud.net.cn/plugin?id=1593)直接下载
                 *  方式二、利用npm下载
     *  三、修改相关配置
     *  四、使用组件
     *   *   *   *  修改\`index.vue\`文件示例：
                 *  结果展示：
                 *  下拉框展示
                 *  日历展示

--------------------

## 一、新建`uniapp`项目 ##

笔者用的Hbuilder app开发版  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70]

### 二、安装下载`uViewUI`组件库 ###

> ##### 方式一：[插件市场官网][Link 1]直接下载 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 1]  
`官网下载`解压到项目文件根目录

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 2]

> ##### 方式二、利用npm下载 #####

`bash`：

npm i uview-ui

## 三、修改相关配置 ##

1.  `main.js`引入uView库

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 3]

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 4]

1.  `uni.scss`引入全局scss变量文件

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 5]

1.  `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": [
    		// ......
    	]
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 6]

## 四、使用组件 ##

由于使用了easycom配置所以使用的时候不需要`import`组件，十分的方便直接拿来用就可以了,组件手册参考[uViewUI官网][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>

##### 结果展示： #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 7]

##### 下拉框展示 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 8]

##### 日历展示 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 9]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70]: /images/20220829/a2eb4884c70b48249606ebf44590cb5a.png
[Link 1]: https://ext.dcloud.net.cn/plugin?id=1593
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 1]: /images/20220829/cc21cf0830f94020b4e734a56a5ea9a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 2]: /images/20220829/8bff865480394440bb14aa2cb24ade27.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 3]: /images/20220829/30a7759207fc47b3beab4314cea9b42f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 4]: /images/20220829/8170b4e9233c46a4af5fbbd40d3dab74.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 5]: /images/20220829/4f9cbd6f719346deba4a3b88880f5eb4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 6]: /images/20220829/07fc4b03335d4b7db7b5405aa2c2230b.png
[uViewUI]: https://www.uviewui.com/components/intro.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 7]: /images/20220829/bfbe33701656482686b82f230c199da5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 8]: /images/20220829/9fa432717819425cbff257275f94da61.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 9]: /images/20220829/2c864900636b4667a131b9b1f5bf62e2.png