Taro的UI框架_taro-ui

Taro UI

https://taro-ui.aotu.io/#/docs/introduction

安装taroui

$ npm install taro-ui
1

手动引入教程

第一步在package.json文件中
dependencies里面写入


"taro-ui": "^3.0.0-alpha"
1
2
3
4
5

然后其他的引入按照官网教程写就可以
PS 不要根据官网的额外配置源码模板这边来写 会报错 会报你找不到的错误

官网教程

PS这个教程是匹配最新版本的taro 如果你不是最新版本的taro 最好看
手动引入教程

P.S.因为要支持自定义主题功能，需要将样式从组件中抽离出来，在微信小程序中依赖 globalClass 功能，所以需要微信基础库版本在 v2.2.3 以上。
如果是手动引入这一步就不要写了 PS 上方有讲到原因
配置需要额外编译的源码模块
由于引用 node_modules 的模块，默认不会编译，所以需要额外给 H5 配置 esnextModules，在 taro 项目的 config/index.js 中新增如下配置项：

h5: {
  esnextModules: ['taro-ui']
}
1
2
3

4. 使用 Taro UI
   引入所需组件
   在代码中 import 需要的组件并按照文档说明使用

// page.js 这个是你要在哪个页面使用你就引入这个页面就行

import { AtButton } from 'taro-ui'
1

// 除了引入所需的组件，还需要手动引入组件样式
// app.js

import 'taro-ui/dist/style/index.scss' // 全局引入一次即可
1

然后就可以在页面进行查看撒