首个多端 UI 组件库 - Taro UI 发布
前言
Taro一步一步的在布生态。今日早读文章由@凹凸实验室投稿分享。
正文从这开始~~
Taro 是由凹凸实验室倾力打造的多端开发解决方案，旨在让一套代码在多端运行。Taro 1.0 版本发布后，也开始支持引用第三方的小程序组件库，如 iView、vant-weapp、echarts-for-weixin，然而目前市场仍然缺少一套由 Taro 编写而成的多端 UI 组件库。为了进一步丰富 Taro 的开发生态，让开发者有更好的开发体验和更快的开发速度，凹凸实验室自主设计了一套 UI 组件库，经过两个多月的精雕细琢，终于跟随 Taro 1.0 版本正式发布。
Taro UI
Taro UI 是一款由凹凸实验室打造、基于 Taro 编写的多端 UI 组件库。除了高颜值，Taro UI 最大的亮点就是支持多端运行。Taro UI 借助 Taro 支持多端运行的特点，只需解决不同平台 CSS 的表现差异问题，就可以在微信小程序/ H5 / ReactNative 等多端适配运行。
Github：https://github.com/NervJS/taro-ui
文档：https://taro-ui.aotu.io/
第一版组件共有六个模块、三十三个组件，未来还将继续丰富组件，增加一些常用业务组件。
特性
简单易用：支持 npm 安装，自动处理 npm 资源之间的依赖关系
框架支持：基于 Taro 开发组件，与 Taro 无缝衔接
多端适配：一套组件可以在微信小程序/ H5 / ReactNative 等多端适配运行
样式美观：小明哥(AT-UI 设计者、主程)亲自设计，细节把关，符合现代扁平化设计审美
组件丰富：提供丰富的基础组件，覆盖大部分使用场景，满足各种功能需求
按需引用：可按需使用独立的组件，不必引入所有文件，可最小化注入到项目中
多套主题：内置多套主题颜色，任君选择（将在 1.1 版本开放此特性）
快速开始
安装 Taro
安装 Taro 开发工具 @tarojs/cli
使用 npm 或者 yarn 全局安装，或者直接使用 npx
$ npm install -g @tarojs/cli
$ yarn global add @tarojs/cli初始化项目
使用命令创建模板项目
$ taro init myApp安装 Taro UI
$ cd myApp
$ npm i taro-ui使用
在代码中 import 组件并按照文档说明进行使用
import { AtButton } from 'taro-ui'示例
在 /myApp/src/pages/index/index.jsx 文件添加以下代码
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>
)
}
}编译并预览
进入项目目录开始开发，可以选择小程序预览模式，或者 H5 预览模式，若使用微信小程序预览模式，则需要自行下载并打开微信开发者工具，选择预览项目根目录。
微信小程序编译预览模式
# npm script
$ npm run dev:weapp
# 仅限全局安装
$ taro build --type weapp --watch
# npx用户也可以使用
$ npx taro build --type weapp --watchH5编译预览模式
# npm script
$ npm run dev:h5
# 仅限全局安装
$ taro build --type h5 --watch
# npx用户也可以使用
$ npx taro build --type h5 --watch关于本文
作者：@阿集
原文：
https://aotu.io/notes/2018/08/27/the-birth-of-taro-ui/
最后，他曾分享过：