前端集合 - 关注前端技术和互联网免费资源

关注前端技术和互联网免费资源

分类儿

页面儿

搜索儿

前端集合 RSS订阅
Home » 经验记录 » Nuxt.js 2 如何使用 tdesign-vue?

Nuxt.js 2 如何使用 tdesign-vue?

发布者:前端集合 // 发布时间:2022-11-08 22:38:00 // 分类:经验记录 // 访问: 153 次 // 热度:

送您限时全场优惠30元会场通用优惠券

前情提要

最近在玩 nuxt.js 2,集成了几个 ui 框架进去玩。

首先尝试的是 ant design vue。基本没遇到啥问题,因为 nuxt.js 2 官方就是支持这个的。

然后试着集成 TDesign Vue 2 的版本。中间碰到了很多问题,网上没有现成资料,但最后我自己也都想办法解决了。

记录一下,方便同样遇到问题的人。

TDesign Vue 0.49.3 版本官方页面就有说明,即不支持 vue 2.7:

由于 vue 2.7 与 tdesign-vue 目前的其他依赖不兼容,请暂时保证您的 vue 版本在 2.7 以下。
建议您将项目依赖配置为vue: ~2.6.14
如果项目同时使用了 vue-template-compiler,请保证 vue-template-compiler 的安装版本与vue一致。
接下来我们将支持在 vue 2.7 中使用,具体时间请关注版本更新动态。

但是你即使把 nuxt.js 中所有依赖降到 vue 2.6 对应的版本,nuxt.js 最后 build 以及 start 上线时都会编译报错。

原因分析

原因在于 nuxt.js 里有个内部模块 @nuxt/components 里依赖了vue-template-compiler,其版本号是 ^ 开头的,故在安装时 vue-template-compiler 依然会升级到 2.7 系列的版本,与 vue 2.6 系列对应不上,build 就会报错。

解决方案

Ok,nuxt.js 2 就可以正常使用 tdesign-vue 了。

后面部署项目到服务器时,npm install 会自动按照 patches 文件夹内容修改 node_modules 包。从而保证不管运行多少次 npm install 都不落下对包的修改。

Tags: node.js, nuxt, nuxt.js, nuxt.js 2, tdesign, tdesign-vue, nuxt.js tdesign

<< 记第一次汽车年检流水账
Top