Taro UI Vue3

采用 Vue 3.0 重写的 Taro UI 组件库

组件复用了 Taro UI 已有的样式和类型定义。

安装

# 使用 yarn
yarn add taro-ui-vue3

# 或使用 npm
npm i taro-ui-vue3

使用

• 配置编译插件

  由于 taro-ui-vue3@^1.1.0 提供的是采用 Vue 3.0 SFC 编译后的文件，Taro 目前尚不支持自动收集使用渲染函数编写的组件中所使用的小程序组件标签。

  taro-ui-vue3 提供了一个自动收集小程序组件标签的插件，请在编译配置文件中进行配置。

  // ./config/index.js
  {
    plugins: ['taro-ui-vue3/lib/plugin'],
  }
  

• 全局引用组件和样式

  • 引用全部组件和样式

  import { createApp } from 'vue'
  import { createUI } from 'taro-ui-vue3'
  
  // 引用全部组件样式
  import 'taro-ui-vue3/dist/style/index.scss'
  
  const App = createApp({
    onShow(options) { },
  })
  
  // 引用全部组件
  const tuv3 = createUI()
  App.use(tuv3)
  
  export default App
  
  • 引用部分组件和样式

  import { createApp } from 'vue'
  import { createUI } from 'taro-ui-vue3'
  import { 
    AtButton, 
    AtInput, 
    AtTabs 
  } from 'taro-ui-vue3/lib'
  
  // 引用上述组件对应的样式文件
  import 'taro-ui-vue3/dist/style/components/button.scss'
  import 'taro-ui-vue3/dist/style/components/input.scss'
  import 'taro-ui-vue3/dist/style/components/tabs.scss'
  
  const App = createApp({
    onShow(options) { },
  })
  
  // 引用部分组件
  const tuv3 = createUI({
    AtButton, 
    AtInput, 
    AtTabs
  })
  App.use(tuv3)
  
  export default App
  

• 按需引用组件和组件样式

  import { AtButton } from 'taro-ui-vue3/lib'
  import 'taro-ui-vue3/dist/style/components/button.scss'
  
  export default {
    components: {
      AtButton
    }
  }
  

• 完全遵照 vue 3.0 语法，组件具体参数请参考 文档，亦可参考 Demo 的写法

体验 UI Demo

• 可用手机访问 https://b2nil.github.io/taro-ui-vue3-demo/ 体验 h5 版本。

• 亦或将 Demo 仓库 clone 到本地自行编译，体验各个小程序平台的版本。

与 Taro UI 的差异

• 移除了 Taro UI 组件的 className 和 customStyle 属性，可直接给组件传入 class 和 style 属性，自定义部分组件样式。

  <at-card 
    class="custom-class" 
    style="height: 20px;"
  >
    ...
  </at-card>
  

开发

• 安装依赖

  运行 yarn bootstrap 安装所有依赖，并创建packages目录下所有组件以及demo目录之间的符号链接。

• 修改文件

  • 组件位于 packages 目录，如需修改组件，找到相关组件目录即可。

  • 组件测试文件位于各个组件目录下的 __tests__目录中。测试用的一些 mock 文件和功能位于 packages/test-utils 目录。

  • 文档文件位于 website/docs 目录，关于组件使用方面的修改，只需修改该目下的相关文件即可。

  • 文档网站采用 vitepress 开发，网站组件位于 website/.vitepress 目录，如需修改网站相关功能和主题，则需修改该目录下的相关文件。

  • demo 位于 demo 目录。

• 预览 demo

  • 预览小程序 demo：

    运行 yarn demo:weapp (以微信为例，其他平台可更改以下 scripts 下的命令)

  • 预览 h5 demo：

    demo 设置了从项目根目录下 dist 和 lib 中引用组件和部分功能，因此采用了 esbuild 在开发时进行快速构建和打包。

    但 h5 平台使用 esbuild 打包的组件时，会报错。因此，预览 h5 效果时，需要先使用 rollup 打包。

    运行 yarn build 使用 rollup 打包组件，然后运行 cd demo && yarn dev:h5 预览

• 预览文档

  运行 yarn dev:docs 预览文档。

TODOs

• [] 组件展示页面
  • [] theme

License

MIT

Credits

• Taro UI
• taro-ui-vue
• vuetify