各种ui框架的使用方法

野性酷女 2022-12-23 06:44 321阅读 0赞

### 各种ui的使用方法 ###

*  uview
 *   *  gap间隔槽
     *  图标的用法
 *  ColorUI

# uview #

[使用教程][Link 1]  
1.去插件市场找到导入之后把里面一个文件夹uview的复制到自己的项目中  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70_pic_center]  
2.main.js引入uView库

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

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

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

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

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

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

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

配置easycom规则后，自动按需引入，无需import组件，直接引用即可。

## gap间隔槽 ##

![在这里插入图片描述][20201128091533767.png]

## 图标的用法 ##

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

# ColorUI #

[使用教程][Link 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70 1]  
colorui 用法与uviewui uniui 完全不一样 他是样式的 改变class的

[Link 1]: https://ext.dcloud.net.cn/plugin?id=1593
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/a5fd70d6321444879eda632527d2fa5e.png
[20201128091533767.png]: https://img-blog.csdnimg.cn/20201128091533767.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201128091914994.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw,size_16,color_FFFFFF,t_70
[Link 2]: https://ext.dcloud.net.cn/plugin?id=239
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201130111230927.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw,size_16,color_FFFFFF,t_70