uniapp 使用UI组件库 (小白)

   最近在研究Uniapp,看了两个UI组件库,下面记下如何使用
                                   方法比较无脑,勿喷

文章目录

    • ThorUI组件库
      • 1. 导入插件
        • 1.1 把除pages以外的文件夹复制到自己的目录
        • 1.2 APP.vue文件
        • 1.3 main.js
        • 1.4 pages.json
      • 2.使用示例
        • 2.1 先浏览组件库中的内容,选择到自己想用的东西
    • ColorUI组件库

ThorUI组件库

官网:
https://www.thorui.cn/
组件使用详细介绍:
http://www.donarui.com/guide.html

导入自己的项目:

1. 导入插件

ThorUI组件库在Uniapp插件市场地址:
https://ext.dcloud.net.cn/plugin?id=556#
uniapp 使用UI组件库 (小白)_第1张图片
uniapp 使用UI组件库 (小白)_第2张图片
uniapp 使用UI组件库 (小白)_第3张图片
uniapp 使用UI组件库 (小白)_第4张图片

1.1 把除pages以外的文件夹复制到自己的目录

uniapp 使用UI组件库 (小白)_第5张图片

1.2 APP.vue文件

引入CSSuniapp 使用UI组件库 (小白)_第6张图片

1.3 main.js

先复制它main.js的所有内容,覆盖自己的main.js。至于里面内容是什么,之后用到在了解配置。
涉及到的一些知识:
使用Vue.prototype在vue中注册和使用全局变量:
https://www.cnblogs.com/cowboybusy/p/11507352.html

1.4 pages.json

无需改变什么,下面一些globalStyle变量根据需要配置
uniapp 使用UI组件库 (小白)_第7张图片

2.使用示例

2.1 先浏览组件库中的内容,选择到自己想用的东西

运行组件库的index上去找
uniapp 使用UI组件库 (小白)_第8张图片
比如想用一个button
uniapp 使用UI组件库 (小白)_第9张图片
进入它所在的页面中看如何定义使用

定义
uniapp 使用UI组件库 (小白)_第10张图片
导入组件
uniapp 使用UI组件库 (小白)_第11张图片
导入样式
uniapp 使用UI组件库 (小白)_第12张图片
运行效果
uniapp 使用UI组件库 (小白)_第13张图片

ColorUI组件库

如何导入,插件市场写得很清楚
https://ext.dcloud.net.cn/plugin?id=239

民间开发者写的参考使用帮助文档
https://blog.csdn.net/miao_yf/article/details/102971767#%E4%BD%BF%E7%94%A8UniApp%E5%BC%80%E5%8F%91

你可能感兴趣的:(uniapp学习)