采用 Vue 3.0
重写的 Taro UI 组件库。
组件复用了
Taro UI
已有的样式和类型定义。
所有组件均采用
Vue 3.0
的渲染函数编写。
yarn add taro-ui-vue3
-
全局引用组件和样式
- 引用全部组件和样式
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 } }
-
H5 端
-
为了方便起见,使用
taro-ui-vue3
的项目编译至 h5 时,暂时需要使用脚本先修改@tarojs/components/dist-h5/vue3/index.js
, 将所有组件导出,方便按需引用。 -
然后通过 webpack 配置
alias
将@tarojs/components$
指向@tarojs/components/dist-h5/vue3/index.js
。 具体 h5 编译配置方案如下:-
在项目的 config 目录下增加一个 h5 构建脚本: h5-building-script.js
-
将
package.json
下的build:h5
命令修改为:"build:h5": "node ./config/h5-building-script.js && taro build --type h5",
-
在
config/index.js
中的h5
下添加 webpackalias
设置:
h5: { webpackChain(chain) { chain.resolve.alias .set( '@tarojs/components$', '@tarojs/components/dist-h5/vue3/index.js' ) } }
-
-
可用手机访问 https://b2nil.github.io/taro-ui-vue3-demo/ 体验 h5
版本。
或者:
clone
taro-ui-vue3-demo 项目到本地- 运行
yarn install
安装依赖 - 根据希望体验的平台,运行相关命令:
"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",
- 在微信/百度/Alipay/QQ/京东/浏览器等开发工具中导入编译后的相关项目
- 移除了 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
预览文档。
- [] 组件展示页面
- [] theme