Vant 3.0 RC 版本发布 🔥🔥🔥
chenjiahan opened this issue · comments
目前 Vant 已完成了对 Vue 3.0 的绝大部分适配工作，并发布了 Vant 3.0 RC 版本，欢迎大家在新项目中尝试 Vant 3.0。
背景知识
在使用 Vant 3.0 前，请先了解一下 Vue 3.0 的变更内容：Vue 3.0 官方文档
安装 Vant 3.0
#npm
npm i vant@next -S
# yarn
yarn add vant@next安装完成后，请参考 Vant 3.0 的文档使用：
后续计划
我们计划在十二月发布 Vant 3.0 正式版，目前正在进行的工作有：
- 对外提供 Vant 内部使用的 Composition API 模块，封装为 @vant/use 库（已完成）
- 使用 Composition API 重构所有组件（已完成）
- 使用 TypeScript 重构所有组件
- 完善单元测试并修复发现的问题
- 增加新组件和更多 Feature
注意事项
- Sku 组件还未完成 Vue 3 适配，因此在 Vant 3.0 RC 版本中暂时不可用
- beta 版本迭代过程中可能会引入少量的不兼容改动，在升级时请仔细阅读更新日志
视觉规范升级
近期我们还发布了 Vant 视觉规范 3.0，详见：Vant 设计规范 3.0 发布
问题反馈
使用 Vant 3.0 过程中遇到问题时，请通过 issue 的形式进行反馈~
这么巧吗 让我赶上了 恭喜
强啊，有考虑从webpack换vite开发吗？
会考虑滴，等 Vant 3.0 完工先
也可以抛出一些composition api的常用工具方法
可以抛出一些composition api的常用工具方法
这部分要等内部使用稳定后才会考虑抛出
建议在使用cdn 比如字体 不要在css文件里内置有赞本身的cdn，而是对外暴露出来，否则对于某些使用字体需要放到自己cdn的用户，会很难受，会意外的下载有赞的字体
注意样式对ie11的兼容哦~ 2.x版本还存在一些问题。
@vvni 具体是啥问题，Vant 是移动端组件库，不会专门兼容 IE11
@vvni 具体是啥问题，Vant 是移动端组件库，不会专门兼容 IE11
目前看到的是组件样式的居中问题，以及input文字被截断，emm，我晚点提几个issues
@vvni 具体是啥问题，Vant 是移动端组件库，不会专门兼容 IE11
因为vant有PC端兼容嘛，所以处理一下ie11也好呀。
目前看到的是组件样式的居中问题，以及input文字被截断，emm，我晚点提几个issues
好滴
效率是真的高
Uploader 组件调用摄像头拍照后部分华为手机不支持上传功能
这, 二维码失效了呀....
@muzaisimao 已更新
tabbar 在没有 route 的时候 会报
Property "$route" was accessed during render but is not defined on instance
不知道是不是我操作问题
用 vite 在 main 中引入的话
import Vant from 'vant'
import 'vant/lib/index.css'
app.use(Vant)
这么写 打包的时候 不能把 css 打包进去
如果用
import Vant from 'vant'
import '/@modules/vant/lib/index.css'
app.use(Vant)
是正常的
加油，搞起来。
您好，van-tabs加了sticky属性用浏览器的前进后退来跳转路由会报错，不加sticky属性是没有问题的
1.
runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Unhandled error during execution of unmounted hook
at <VanSticky container= <div class="van-tabs van-tabs--line" modelvalue="0">… offsetTop=0 onScroll=fn >
at
at <Home onVnodeMounted=fn onVnodeUnmounted=fn ref=Ref< Proxy {getCode: ƒ, commit: ƒ, …} > >
at
at
Uncaught (in promise) TypeError: Failed to execute 'unobserve' on 'IntersectionObserver': parameter 1 is not of type 'Element'.
Line 327 in c8d573c
vant-next 当没有使用 v-model 时， event.target.composing 总是为 false
导致输入框在 ios 下输入中文会有问题，
似乎这里没有使用 vue3, v-model 内部 vModelText 指令 设置 event.target.composing 值
onInput(event) {
// not update v-model when composing
if (event.target.composing) {
return;
}
this.updateValue(event.target.value);
},
vue:3.12.1
vant:3.0.0
main.js中引入vant
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
顺便说一下，交流群过期了！！！
但是运行的时候报错，如下：
main.js?56d7:13 Uncaught ReferenceError: Vant is not defined
at eval (main.js?56d7:13)
at Module../src/main.js (app.js:4269)
at webpack_require (app.js:833)
at fn (app.js:130)
at Object.1 (app.js:4355)
at webpack_require (app.js:833)
at app.js:971
at app.js:974
vue:3.12.1
vant:3.0.0
main.js中引入vant
import Vant from 'vant';
import 'vant/lib/index.css';Vue.use(Vant);
顺便说一下，交流群过期了！！！
但是运行的时候报错，如下：main.js?56d7:13 Uncaught ReferenceError: Vant is not defined
at eval (main.js?56d7:13)
at Module../src/main.js (app.js:4269)
at webpack_require (app.js:833)
at fn (app.js:130)
at Object.1 (app.js:4355)
at webpack_require (app.js:833)
at app.js:971
at app.js:974
安装vant的时候提示：但我的已经是vue3.12.1了
npm WARN vant@3.0.0-alpha.5 requires a peer of vue@3.0.0-0 but none is installed.
可以再发一遍群二维码吗？？
二维码已更新
vant-next 当没有使用 v-model 时， event.target.composing 总是为 false，导致输入框在 ios 下输入中文会有问题，
@ctwowt 这个问题已知，下个版本会修复
vue3.0 正式版 昨天发布了。移动端可以全面换vant3.0+vue3了
sku组件， 大概哪个版本能上，都beta0了
sku组件， 大概哪个版本能上，都beta0了
不要做伸手党还在催，来提提PR撒...
uploader在安卓机上进行拍照上传后，会自动旋转90°，之前处理过，但是还是想让vant3.0把这个修改一下
vite内main.ts 中配置了
import Vant from 'vant';
import 'vant/lib/index.css';
// @ts-ignore
const app = createApp(App)
app.use(router)
app.use(vuex)
app.use(Vant);
app.mount('#app')
配置完了 。页面打开显示一段错误，global错误，错误如下
Uncaught ReferenceError: global is not defined
at vant.js:362
有没有遇到的
刚刚发布的beta1.0版本，启动报错vant.js:362 Uncaught ReferenceError: global is not defined
at vant.js:362
@ranmogit @Anima-No @linglingyun10 已在 3.0.0-beta.2 版本修复
目前 vant-next 分支在 windows 下克隆，会出现 babel 转换问题：
重现：
git clone -b next https://gitee.com/vant-contrib/vant.git vant-next
cd vant-next
yarn
yarn dev
下面是 mac 和 windows 对比
似乎是 babel-preset 配置文件 不起作用
vant-cli 页面更新问题：
使用vite创建的vue3项目，求一个自动按需引入的方法
二维码过期了
头疼，下载运行组件库后就报错“Uncaught TypeError: activePostFlushCbs[postFlushIndex] is not a function”，各位大神有遇到的吗
vant3.0 swipe 轮播图组件，动态获取的数据，轮播图无法滑动
@Nick930826 已经在 vant@3.0.0-beta.5 版本修复了
大佬们能不能出一个react版本的?
文档还是vue2.0的写法 能不能实时更新成3.0的写法，大佬
大佬们能不能出一个react版本的?
https://github.com/mxdi9i7/vant-react
文档还是vue2.0的写法 能不能实时更新成3.0的写法
等正式版发布以后，会陆续把文档改成 setup 的写法，目前的写法也是可以正常用的
头疼，下载运行组件库后就报错“Uncaught TypeError: activePostFlushCbs[postFlushIndex] is not a function”，各位大神有遇到的吗
+1
vant：3.0.0-beta.6
操作系统：win10
node：10.21.0
更新：
初步定位为 vant-cli 采用了babel loose 模式，导致 vue 代码 const deduped = [...new Set(pendingPostFlushCbs)]; 编译成了 var deduped = [].concat(new Set(pendingPostFlushCbs));， 最终 deduped 变成了 [Set(cb)], 与预期 [cb] 不符导致报错，目前我的解决方案是把 vant-cli 本地打包，修改 packages/vant-cli/src/comfig/webpack.base.ts 中的 babel-loader 配置， exclude: /node_modules\/(?!(@vant\/cli))/ 改为 exclude: /node_modules/。
此方法牺牲了兼容性，期待官方给出更好的解决方案。
@chenjiahan @ctwowt @jiesir
ps: 热更新不生效的问题也存在，端口是8080
大佬们能不能出一个react版本的?
目前 vant-next 分支在 windows 下克隆，会出现 babel 转换问题：
重现：
git clone -b next https://gitee.com/vant-contrib/vant.git vant-next cd vant-next yarn yarn dev
下面是 mac 和 windows 对比
似乎是 babel-preset 配置文件 不起作用
大神，这个问题解决了吗
@lilililee @jiesir 感谢帮忙排查，babel loose 选项已经在最新分支移除了
@chenjiahan vite 中按需导入怎么实现呢
vite 中按需导入怎么实现呢
Vant 支持 tree shaking，在 vite build 时默认就是按需引入的
@chenjiahan 好的 感谢。
// import 'vant/lib/index.css'
import 'vant/lib/button/index.less'
上面是全局引入编译好的css，如果我修改按钮主题变量我需要下面这种引入，那很多的情况下 我需要引入更多。
有没有一种方式import 'vant/lib/index.less 直接全局导入less便于修改主题呢，之前通过babel-import-plugin可以直接导入，当vite时候rollup没有这种方式
import 'vant/lib/index.less这种生成路径引入会报错
[vite] error applying css transforms:
[LessError] {
message: undefined,
stack: undefined,
type: 'Syntax',
filename: '/Users/cssr/xxx2-wap/node_modules/vant/lib/icon/index.less',
index: 24,
line: 2,
column: 0,
callLine: NaN,
callExtract: undefined,
extract: [
"@import '../style/var';",
"@import '~@vant/icons/src/encode-woff2.less';", // 应该是这里不能使用webpack路径？
''
]
} 0 [
....
在使用 v-lazy 全局注册时候
报错
在 lazyload.d.ts文件 中发现
@SharpWuqing Lazyload 在下个 beta 版本会支持
你好，为什么vue3的源码是ts和js混合的呢
为什么vue3的源码是ts和js混合的呢
TS 改造还在持续进行中
使用 Vite 创建的项目，如何修改主题色配置？
使用 Vite 创建的项目，如何修改主题色配置？
我是通过引入less组件样式文件
然后在less配置中修改变量颜色，配置和之前使用方式一样
vite.config.js里面的cssPreprocessOptions属性， less: {
modifyVars: {'primary-color': 'red'},
javascriptEnabled: true
},
大概就这样
在less文件使用的时候直接@primary-color，这样主题就是红色的。
至于上面答主说的引入less文件：
@import 'utils/var.less';
@import 'utils/public.less';
大概就是这样了
ActionSheet, Dialog, Popup 这些类似组件在关闭显示的时候，没有动画过渡呢？
强啊 这效率也太高了吧
头疼，下载运行组件库后就报错“Uncaught TypeError: activePostFlushCbs[postFlushIndex] is not a function”，各位大神有遇到的吗
2021年，我也遇到了， 环境信息：
vant: 3.0.13
vite: 2.1.3
node: 12
Android: 6.0.1 chrome51(webview)
UA: "Mozilla/5.0 (Linux; Android 6.0.1; vivo Y66 Build/MMB29M; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/51.0.2704.81 Mobile Safari/537.3"
查看了所有issue相关的，看到楼上2位讨论和webpack的配置项loose有关，还有一个PR, 又查了vant源代码，这个loose选项后面有做过修改。
稍后提供一个minimal的重现repo.
有谁知道如何解决麻烦回复下，谢谢了。
头疼，下载运行组件库后就报错“Uncaught TypeError: activePostFlushCbs[postFlushIndex] is not a function”，各位大神有遇到的吗
2021年，我也遇到了， 环境信息：
vant: 3.0.13
vite: 2.1.3
node: 12
Android: 6.0.1 chrome51(webview)
UA:"Mozilla/5.0 (Linux; Android 6.0.1; vivo Y66 Build/MMB29M; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/51.0.2704.81 Mobile Safari/537.3"
查看了所有issue相关的，看到楼上2位讨论和webpack的配置项loose有关，还有一个PR, 又查了vant源代码，这个loose选项后面有做过修改。
稍后提供一个minimal的重现repo.
有谁知道如何解决麻烦回复下，谢谢了。
this is @vitejs/plugin-legacy 的锅......