Vant: Vant 3.0 RC 版本发布 🔥🔥🔥

[chenjiahan]

目前 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 3.0 更新日志
• Vant 3.0 迁移指南
• Vant 3.0 源代码

后续计划

我们计划在十二月发布 Vant 3.0 正式版，目前正在进行的工作有：

• 对外提供 Vant 内部使用的 Composition API 模块，封装为 @vant/use 库（已完成）
• 使用 Composition API 重构所有组件（已完成）
• 使用 TypeScript 重构所有组件
• 完善单元测试并修复发现的问题
• 增加新组件和更多 Feature

注意事项

1. Sku 组件还未完成 Vue 3 适配，因此在 Vant 3.0 RC 版本中暂时不可用
2. beta 版本迭代过程中可能会引入少量的不兼容改动，在升级时请仔细阅读更新日志

视觉规范升级

近期我们还发布了 Vant 视觉规范 3.0，详见：Vant 设计规范 3.0 发布

问题反馈

使用 Vant 3.0 过程中遇到问题时，请通过 issue 的形式进行反馈~

[cereschen]

这么巧吗 让我赶上了 恭喜

[Yankai17148]

强啊，有考虑从webpack换vite开发吗？

[chenjiahan]

会考虑滴，等 Vant 3.0 完工先

[ZhengXiaowei]

也可以抛出一些composition api的常用工具方法

[chenjiahan]

可以抛出一些composition api的常用工具方法

这部分要等内部使用稳定后才会考虑抛出

[heart-er]

建议在使用cdn 比如字体 不要在css文件里内置有赞本身的cdn，而是对外暴露出来，否则对于某些使用字体需要放到自己cdn的用户，会很难受，会意外的下载有赞的字体

[chenjiahan]

@heart-er 这块会改掉

[xlya]

注意样式对ie11的兼容哦~ 2.x版本还存在一些问题。

[chenjiahan]

@vvni 具体是啥问题，Vant 是移动端组件库，不会专门兼容 IE11

[xlya]

@vvni 具体是啥问题，Vant 是移动端组件库，不会专门兼容 IE11

目前看到的是组件样式的居中问题，以及input文字被截断，emm，我晚点提几个issues

[xlya]

@vvni 具体是啥问题，Vant 是移动端组件库，不会专门兼容 IE11

因为vant有PC端兼容嘛，所以处理一下ie11也好呀。

[chenjiahan]

目前看到的是组件样式的居中问题，以及input文字被截断，emm，我晚点提几个issues

好滴

[NidhoggDJoking]

效率是真的高

[lg751551023]

Uploader 组件调用摄像头拍照后部分华为手机不支持上传功能

[muzaisimao]

这, 二维码失效了呀....

[chenjiahan]

@muzaisimao 已更新

[puzzle9]

tabbar 在没有 route 的时候 会报

Property "$route" was accessed during render but is not defined on instance

[puzzle9]

不知道是不是我操作问题
用 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)

是正常的

[snowdream]

加油，搞起来。

[ctwowt]

https://github.com/youzan/vant/blob/c8d573cbe785cb0f171a127c54da8c7698d5e382/src/field/index.js#L327

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);
    },

[13810768336]

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

[13810768336]

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 [email protected] requires a peer of [email protected] but none is installed.

[xilianfuhua]

可以再发一遍群二维码吗？？

[chenjiahan]

二维码已更新

[chenjiahan]

vant-next 当没有使用 v-model 时， event.target.composing 总是为 false，导致输入框在 ios 下输入中文会有问题，

@ctwowt 这个问题已知，下个版本会修复

[apem789]

vue3.0 正式版 昨天发布了。移动端可以全面换vant3.0+vue3了

[89360944]

sku组件， 大概哪个版本能上，都beta0了

[xlya]

sku组件， 大概哪个版本能上，都beta0了

不要做伸手党还在催，来提提PR撒...

[Yjp1120]

uploader在安卓机上进行拍照上传后，会自动旋转90°，之前处理过，但是还是想让vant3.0把这个修改一下

[Anima-No]

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
有没有遇到的

[linglingyun10]

刚刚发布的beta1.0版本，启动报错vant.js:362 Uncaught ReferenceError: global is not defined
at vant.js:362

[chenjiahan]

@ranmogit @Anima-No @linglingyun10 已在 3.0.0-beta.2 版本修复

[ctwowt]

目前 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 配置文件 不起作用

[ctwowt]

vant-cli 页面更新问题：

[ZhongMingKun]

使用vite创建的vue3项目，求一个自动按需引入的方法

[heemoe]

二维码过期了

[jiesir]

头疼，下载运行组件库后就报错“Uncaught TypeError: activePostFlushCbs[postFlushIndex] is not a function”，各位大神有遇到的吗

[Nick930826]

vant3.0 swipe 轮播图组件，动态获取的数据，轮播图无法滑动

[chenjiahan]

@Nick930826 已经在 [email protected] 版本修复了

[Augly]

大佬们能不能出一个react版本的?

[OctoberToEscape]

文档还是vue2.0的写法 能不能实时更新成3.0的写法，大佬

[chenjiahan]

大佬们能不能出一个react版本的?

https://github.com/mxdi9i7/vant-react

文档还是vue2.0的写法 能不能实时更新成3.0的写法

等正式版发布以后，会陆续把文档改成 setup 的写法，目前的写法也是可以正常用的

[lilililee]

头疼，下载运行组件库后就报错“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

[Nick930826]

大佬们能不能出一个react版本的?

https://github.com/mxdi9i7/vant-react

[jiesir]

目前 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 配置文件 不起作用

大神，这个问题解决了吗

[chenjiahan]

@lilililee @jiesir 感谢帮忙排查，babel loose 选项已经在最新分支移除了

[yoonasy]

@chenjiahan vite 中按需导入怎么实现呢

[chenjiahan]

vite 中按需导入怎么实现呢

Vant 支持 tree shaking，在 vite build 时默认就是按需引入的

[yoonasy]

@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]

在使用 v-lazy 全局注册时候

报错

在 lazyload.d.ts文件 中发现

[chenjiahan]

@SharpWuqing Lazyload 在下个 beta 版本会支持

[lycHub]

你好，为什么vue3的源码是ts和js混合的呢

[chenjiahan]

为什么vue3的源码是ts和js混合的呢

TS 改造还在持续进行中

[Nick930826]

使用 Vite 创建的项目，如何修改主题色配置？

[yoonasy]

使用 Vite 创建的项目，如何修改主题色配置？

我是通过引入less组件样式文件
然后在less配置中修改变量颜色，配置和之前使用方式一样

[Nick930826]

你好，方便把你的配置截个图参考一下吗，vite.config.js。

---原始邮件---
发件人: "yoonasy"<[email protected]>
发送时间: 2020年12月8日(周二) 凌晨3:49
收件人: "youzan/vant"<[email protected]>;
抄送: "Mention"<[email protected]>;"ChenNick"<[email protected]>;
主题: Re: [youzan/vant] Vant 3.0 Beta 版本发布 🔥🔥🔥 (#7035)

使用 Vite 创建的项目，如何修改主题色配置？

我是通过引入less组件样式文件
然后在less配置中修改变量颜色，配置和之前使用方式一样

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.

[jiesir]

vite.config.js里面的cssPreprocessOptions属性， less: {
modifyVars: {'primary-color': 'red'},
javascriptEnabled: true
},
大概就这样

在less文件使用的时候直接@primary-color，这样主题就是红色的。

至于上面答主说的引入less文件：
@import 'utils/var.less';
@import 'utils/public.less';

大概就是这样了

[hj624608494]

ActionSheet, Dialog, Popup 这些类似组件在关闭显示的时候，没有动画过渡呢？

[chenjiahan]

@hj624608494 https://github.com/youzan/vant/issues/7709

[TencentIT]

强啊 这效率也太高了吧