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

梦里梦外; 2021-07-25 22:27 827阅读 0赞

## uview如何配置到uniapp项目中? ##

如果你想了解到更详细的文档，进入 [uview官网][uview] 查看  
1、使用安装包方式  
首先要去官网下载最新的包 下载地址  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzkyNTcz_size_16_color_FFFFFF_t_70_pic_center]

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

接下来我们使用HBuilderX创建一个uniapp的项目  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzkyNTcz_size_16_color_FFFFFF_t_70_pic_center 1]

*  创建完成之后，我们将刚刚下载的包，直接复制到项目的根目录下。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzkyNTcz_size_16_color_FFFFFF_t_70_pic_center 2]

> 因为uview的使用的是scss，所以我们需要使用HBuilderX安装scss的插件。
> 
> 点击工具，插件安装，找到 scss/sass编译 点击右方的安装 对HBuilderX的配置就结束了，接下来要对项目进行设置。（分为4步）  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzkyNTcz_size_16_color_FFFFFF_t_70_pic_center 3]

1.  引入uView主JS库

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

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

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

1.  在引入uView的全局SCSS主题文件

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

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

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

1.  引入uView基础样式

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

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

1.  配置easycom组件模式

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

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

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

到此，我们已经将uview配置好了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzkyNTcz_size_16_color_FFFFFF_t_70_pic_center 8]

作者：小恐龙yaya  
链接：https://www.jianshu.com/p/d2900005b32a  
来源：简书

[uview]: http://uviewui.com/components/downloadSetting.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzkyNTcz_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/f747543de9854543b5786bc8433acbe2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzkyNTcz_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210725/a7d3b15ece5845b78bb0db9b16afaca8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzkyNTcz_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210725/bbb51623ede24162b6b74eb1634c399b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzkyNTcz_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20210725/482685c35df94fc19997569330956a06.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzkyNTcz_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20210725/654173a0ee9b4f849dcd113bde7f8291.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzkyNTcz_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20210725/5b252e1bb568423481d7cc7d1df88740.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzkyNTcz_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20210725/851670bb50d34d94a7928ce893b1104c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzkyNTcz_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20210725/8dc723c5ac8a4ce8920ced585e88db55.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzkyNTcz_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20210725/8d7eeec1da4544dc995748f6de18b761.png