采用 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
- 引用部分组件和样式
```typescript
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
}
}
可用手机访问 https://b2nil.github.io/taro-ui-vue3-demo/ 体验 h5
版本。
亦或将 Demo 仓库 clone
到本地自行编译,体验各个小程序平台的版本。
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
运行 yarn demo:weapp
(以微信为例,其他平台可更改以下 scripts
下的命令)
demo
设置了从项目根目录下 dist
和 lib
中引用组件和部分功能,因此采用了 esbuild
在开发时进行快速构建和打包。
但 h5 平台使用 esbuild
打包的组件时,会报错。因此,预览 h5 效果时,需要先使用 rollup 打包。
运行 yarn build
使用 rollup
打包组件,然后运行 cd demo && yarn dev:h5
预览
预览文档
运行 yarn dev:docs
预览文档。