起步

安装插件 🤔

tob ui 为 HBuidlerx 提供了第一优先级的支持。

所以直接在👉 插件市场open in new window 中 使用 HBuidlerx 导入插件 即可。

引入样式库 🧐

UI 依赖一个样式库，所以要在 App.vue 中进行引入。

这里需要安装 less 插件，具体可见 👉 安装less插件

关于样式库更多说明可见 👉 Design 样式库

<!-- App.vue -->
<style lang="less">
    @import '@/uni_modules/tob-ui/index.less';
</style>

自动注册组件 🥰

由于 tob ui 是满足默认的 easycom 规范open in new window 的。所以完成以上两步后就可以直接在模板中使用组件了。

按钮

<!-- 页面中 -->
<template>
    <view>
        <t-btn>按钮</t-btn>
    </view>
</template>

easycom 配置 😋

当然你可能已经在项目中修改了 easycom 的配置，这将会使得原本默认的 easycom 配置失效进而导致组件的自动注册失效。那么你可以参考下边的配置在 pages.json 中进行配置的补充。

// ....此处省略你的其他 pages 配置
"easycom": {
  "autoscan": true,
  "custom": {
    // ....此处省略你的其他 easycom 配置
    "^t-(.*)": "@/uni_modules/tob-ui/components/t-$1/t-$1.vue"
  }
}

友好代码提示 🤨

在 template 模板中输入 <t- 即可得到组件的提示

同时在使用组件的 props 时也有对应的 props 提示