您现在的位置：首页＞行业资讯

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
纯手打，喜欢的同学请关注+收藏。