Taro UI Component Library Rewritten with Vue 3.0

Taro UI Component Library Rewritten with Vue 3.0

Using Vue 3.0rewritten Taro UI component library. Component type styles and reuse the Taro UIexisting style and type definition experience when using, refer to the documentation .

Taro UI Vue3

Using Vue 3.0rewritten Taro UI component library.

Component type styles and reuse the Taro UIexisting style and type definition experience when using, refer to the documentation .

All components are used in Vue 3.0the preparation of the rendering function, unused Vue Templateor jsx.

installation

yarn add taro-ui-vue3

use

  • Reference components and component styles on demand
import { AtButton } from 'taro-ui-vue3/lib'
import 'taro-ui-vue3/dist/style/components/button.scss'

export default {
  components: {
    AtButton
  }
}
  • Syntax comply with vue 3.0the syntax
  • Specific parameters can refer to the document
  • You can also refer to the writing of Demo Pages

Body UI Demo

Available mobile access https://b2nil.github.io/taro-ui-vue3-demo/ experience h5version.

or:

  • clone taro-ui-vue3-demo project to local
  • Run yarn installinstall dependencies
  • According to the platform you want to experience, run the relevant commands:
"dev:weapp": "taro build --type weapp --watch",
"dev:swan": "npm run build:swan -- --watch",
"dev:alipay": "npm run build:alipay -- --watch",
"dev:tt": "npm run build:tt -- --watch",
"dev:h5": "npm run build:h5 -- --watch",
"dev:qq": "npm run build:qq -- --watch",
"dev:jd": "npm run build:jd -- --watch",
  • Import compiled related projects in development tools such as WeChat/Baidu/Alipay/QQ/JD/Browser

Differences from Taro UI

  • Removed Taro UI component classNameand customStyleattribute parameters. For by the former classNameand customStylethe way custom styles for a component can be directly passed to the component classand styleproperty
<at-card class="custom-class" style="height: 20px;">...</at-card>

Everyone

  • [] Component display page
  • [] theme

Known issues

  • Alipay applet

  • AtCalendar:

  • Because of Taro Swipercomponent does not support Alipay built-in Swipercomponent onAnimationEndattributes, the compiler, the need to manually modify base.axmlthe <template name="tmpl_0_swiper">base template, the swipernode onAnimationFinishmodified to onAnimationEnd, or can not update in January when the slide switch

  • AtTextarea:

  • Because of Taro Textareacomponents Alipay does not support the textareacomponents of show-countproperty, so the word count can not be set :count="false"directly off, the need to manually modify the compiler base.axml, in <template name="tmpl_0_textarea_focus">and <template name="tmpl_0_textarea_blur">under the basis of template textareaadd nodesshow-count="{{i.showCount}}"

  • Baidu Swan applet (there are more problems, affecting the experience)

  • Part of the style is invalid

  • Taro Issue #7293 : Taro 3 Baidu applet will cause the full page to be re-rendered every time the setData is set, resulting in flickering pictures and unusable input boxes.

  • H5 edge

  • Taro assembly adapted Vue 3.0 in @tarojs/components/dist-h5/vue3/index.jsby initVue3Componentsmethod taro-xxxregistered in the global tag assembly. Using rendera function rendering nodes need to reference vue 3.0 provided resolveComponenta method, first label taro-xxxparsing component instance: h(resolveComponent('taro-xxx')). But taro-ui-vue3we are not used resolveComponentto h5 adaptation.

  • For convenience, the taro-ui-vue3project is compiled to h5, temporarily need to modify the script @tarojs/components/dist-h5/vue3/index.js, all components export demand convenient reference. Then webpack configuration aliasthe @tarojs/components$point @tarojs/components/dist-h5/vue3/index.js. The specific h5 compilation configuration scheme is as follows:

  • Add a h5 build script in the config directory of the project: h5-building-script.js

  • Will be package.jsonunder build:h5the command amended as follows: "build:h5": "node ./config/h5-building-script.js && taro build --type h5",

  • In the config / index.js is h5added under webpack aliasprovided:

h5: {
  webpackChain(chain) {
    chain.resolve.alias
      .set(
        '@tarojs/components$',
        '@tarojs/components/dist-h5/vue3/index.js'
      )
  }
}

License

WITH

Credits

Download Details:

Author: b2nil

Demo: https://b2nil.gitee.io/taro-ui-vue3/

Source Code: https://github.com/b2nil/taro-ui-vue3

vuejs vue javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue Native is a framework to build cross platform native mobile apps using JavaScript. It is a wrapper around the APIs of React Native. So, with Vue Native, you can do everything that you can do with React Native. With Vue Native, you get

How to Make a Simple Vue Custom Select Component

In this article, you’ll learn how to build a Vue custom select component that can be easily be styled using your own CSS. In fact, it’s the same component that we use in production on Qvault, and you can see it in action on the playground.

Creating a Custom Tooltip Component in Vue

There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.