Taro UI多端组件库

1、安装 Taro UI

npm install taro-ui

2、h5编译设置

h5: {

esnextModules: [‘taro-ui’]

}

3、项目中引入

方式一：js入口文件中引入

import ‘taro-ui/dist/style/index.scss’

方式二：css全局入口文件中引入

@import “~taro-ui/dist/style/index.scss”;

4、使用Taro UI

import Taro, { Component, Config } from ‘@tarojs/taro’

import { View } from ‘@tarojs/components’

import { AtButton } from ‘taro-ui’

import ‘./index.scss’

export default class Index extends Component {

config: Config = {

navigationBarTitleText: ‘首页’

}

render () {

return (

<View className=’index’>

<AtButton type=’primary’>按钮文案</AtButton>

</View>

)

}

}

5、运行

# npm script

$ npm run dev:weapp

# 仅限全局安装

$ taro build –type weapp –watch

# npx用户也可以使用

$ npx taro build –type weapp –watch

运行微信小程序工具查看效果，不懂操作的同学，请查看上一章节。

注意事项：

如果出现报错，可以尝试安装taro-ui版本，taro ui2.+版本跟目前的taro3.+版本不兼容，可以尝试使用以下命令

npm install taro-ui@3.0.0-alpha.3

纯手打，喜欢的同学请关注+收藏。