Vant 3.0 RC 版本发布 🔥🔥🔥
chenjiahan opened this issue · 63 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的用户,会很难受,会意外的下载有赞的字体
@heart-er 这块会改掉
注意样式对ie11的兼容哦~ 2.x版本还存在一些问题。
@Vvni 具体是啥问题,Vant 是移动端组件库,不会专门兼容 IE11
@Vvni 具体是啥问题,Vant 是移动端组件库,不会专门兼容 IE11
目前看到的是组件样式的居中问题,以及input文字被截断,emm,我晚点提几个issues
目前看到的是组件样式的居中问题,以及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 版本修复
使用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版本的?
@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 [
....
@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 的锅......