taro ui（taro-ui 与 taro 的版本问题）

：暂无数据 2026-09-16 15:00:01 ：0

这篇文章给大家聊聊关于taro ui，以及taro-ui 与 taro 的版本问题对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。

本文目录

taro-ui 与 taro 的版本问题
taro ui时间轴中可以放图片不
Taro3 + Vue3 + NutUi 校验配置
Taro避坑指南
nutui哪里有nutui-taro版本

taro-ui 与 taro 的版本问题

使用 taro-hooks的模板生成了一个项目，然后手动安装了 taro-ui.

相应依赖：

执行

控制台报错：

网上查询了下，说是 taro 的版本与 taro-ui 版本不兼容。
解决方案

taro 升级后的版本为 ^3.0.0-alpha.10 再编译则正常通过。

taro ui时间轴中可以放图片不

可以放，taro—ui本身给我们提供了时间轴taroUI官方文档-时间轴。但是个人用起来taroui始终有些不灵活，于是乎自己手码，数据是动态渲染的，为了方便复用，看得更清楚。只贴了一小段代码，flex+100%布局；小圆点是我拿css画出来的，想加icon图标也是同样的道理。所以是可以加图片的。

拓展知识：Taro 是一个开放式多端开发框架，支持使用 React、Vue、Nerv 等框架，来开发微信、京东、百度、支付宝、字节跳动、QQ小程序、H5等应用。

Taro 一套遵循 React 语法规范的多端开发解决方案。使用 Taro，只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信小程序、H5、App 端等）运行的代码。同时 Taro 还提供了开箱即用的语法检测和自动补全等功能。

Taro 基于组件化，组件生命周期和 React 的完全一致，使用声明式的 JSX 语法。

Taro3 + Vue3 + NutUi 校验配置

NutUI - 移动端 Vue2、Vue3、小程序组件库 (jd.com)

在项目内执行 eslint --init （若eslint方法报错，请先全局安装再尝试）
按顺序选择如下内容

等待依赖安装完成会生成 .eslintrc.js 文件
此时规则还不太适用此项目，会有很多报错，因此再手动安装一些依赖

然后更改eslintrc文件为

保存后查看其他文件是否有校验效果，若没有重启一下项目
我使用的vscode格式化插件为 Prettier ESLint - Visual Studio Marketplace
用此插件格式化会符合设置的eslint规则

安装vue-tsc

然后在 package.json 的 scripts 中添加以下脚本

首先单独测试命令
运行 yarn lint 看报错文件是否提示出来
修复为符合eslint规则后再运行此命令
出现类似如下展示即为成功

然后运行 yarn tsc

此时如果有类似如下报错
node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1952:40 - error TS1005: ’;’ expected.

运行 yarn add typescript -D 升级typescript

再运行命令 yarn tsc
出现类似如下展示即为成功

安装husky

然后初始化husky

此时会生成 .husky 文件夹，里面包含 _ 文件夹
在.husky文件夹内新建 pre-commit 文件（没有后缀）
内容如下

之后使用git提交，在commit时，会运行检查，若检查不通过，需修改到符合规则才能提交

为保证其他开发者在提交时也有husky效果，在 package.json 的 scripts 中添加以下脚本
（prepare脚本会在yarn install后自动执行）

在taro使用中，需要渲染长列表，而且长列表数据多且复杂时，建议使用虚拟列表渲染,只渲染可视范围内数据，不会造成页面卡顿！

-首先监听页面是否有滚动（通过usePageScroll），滚动超过阈值后出现按钮
-点击按钮后，通过Taro.pageScrollTo回到顶部

时间选择ios只识别‘年/月/日’这种格式，其他格式需转换成此格式

绑定旧值，监听onChange事件设置旧值的拷贝值，==避免组件依赖值更新==

该样式是基于微信原生的picker，想换色还未找到好办法，目前我们只能重写picker了
在Taro UI表单组件中，还有很多不完善的地方，也有可扩展性差的问题，所以在做表单时很多都需要进行重写才能满足需求，这点体验性差！

由于本人只是中间介入使用Taro开发微信小程序的需求，还有很多没有发现的坑以及亮点，但是有一种，从入门到放弃的赶脚～如有问题，请指出哈，大家一起学习！