Taro-UI-Vue 邀你尝鲜,期待你的参与!



  • Taro

    目前国内最受欢迎的跨端小程序之一,Taro1.x , Taro2.x 之前是使用jsx语法编写, 是 React 技术栈同学选择跨端框架的首选。在前不久 Taro 发布了 3.0,拥有了对 vue 语法的支持,对Vue开发者来说算是福音了,使用非常简单。

    快速开始

    # 使用 npm 安装 taro-CLI
    npm install -g @tarojs/cli
    

    使用命令创建模板项目

    # 使用 npm 安装 CLI
    taro init myApp
    

    然后就可以开始你的taro之旅了。

    Taro-UI

    个人是 Vue技术栈,之前用过 uni-app做过小程序。后来转向 Taro 很大一部分原因是因为Taro-UI这个非常清新且高质量的官方的组件库,一套高质量的组件库绝对能可以让你的开发工作事半功倍。

    Taro-UI-Vue

    Taro-UI-Vue 主要参考 Taro UI 的实现,复用了其样式文件,写成vue组件,配合 Taro3.0vue 写法,拥有 50+ 组件,让 vue 开发者拥有更多的选择。

    丰富的组件

    (仅展示其中一部分)

    如何使用Taro-UI-Vue

    安装

    npm i -S taro-ui-vue
    

    按需引入

    // page.js
    import { AtButton } from 'taro-ui-vue'
    // OR
    import AtButton from 'taro-ui-vue/src/components/button/index.vue'
    

    按需引入样式

    import 'taro-ui-vue/dist/style/components/tag.scss'
    
    @import "~taro-ui/dist/style/components/button.scss";
    

    小示例

    <template>
      <view class="index">
        <AtTag>标签</AtTag>
        <AtIcon value="clock" color="#F00"></AtIcon>
      </view>
    </template>
    
    <script>
    import { AtTag, AtIcon } from 'taro-ui-vue'
    import 'taro-ui-vue/dist/style/components/icon.scss'
    import 'taro-ui-vue/dist/style/components/tag.scss'
    export default {
      name: 'Index',
      components: {
        AtTag,
        AtIcon,
      }
    }
    </script>
    

    更多内容可以参考官方文档

    写在后面

    此项目为 psaren 发起,承担了其中的绝大部分的工作。最近完善了文档和示例,让大家使用更加方便,目前项目还处于测试阶段,大家有使用中的问题可以提 issue, 我们将在最快的时间解决问题,当然,如果你有好的办法,可以直接提PR。有兴趣的同学可以一起参与进来,期待早日发布稳定版本。

    如何贡献

    相关链接

    Taro-UI-Vue
    Taro
    Taro UI


登录后回复