「前端笔记」vue中使用 antd-vue 中将默认时间库 monent 改为 dayjs

最新推荐文章于 2024-10-07 20:30:57 发布
最新推荐文章于 2024-10-07 20:30:57 发布
阅读量1.7k 收藏 2
点赞数 1
分类专栏： 前端 记录 文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_27926119/article/details/122076896
版权
本文介绍了如何在Vue项目中使用Ant Design Vue时，将默认的时间库Moment.js替换为轻量级的Day.js。通过antd-dayjs-webpack-plugin插件，无需修改现有代码即可完成替换。主要步骤包括安装dayjs和antd-dayjs-webpack-plugin，然后在main.js中全局引入并设置语言包，最后在vue.config.js中配置插件并重启编译。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js简单地说，只要你会Moment.js，那么你就会Day.js!但是我们知道的，Moment.js 的大小是200多k,Day.js的大小是2kB，100倍的差距，拥有同样强大的 API。

在 antd 中时间库默认使用 moment，修改方式这里使用一种实现方式。使用 antd-dayjs-webpack-plugin 插件，无需对现有代码做任何修改直接替换成 Day.js。请参考 antd-dayjs-webpack-plugin。
在这里插入图片描述
默认是只给出了 react 版的操作流程。vue 没有一个明确的流程，这里根据官方给出的步骤进行尝试后成功在 vue 中配置成功，步骤如下：

1、安装 dayjs 和 antd-dayjs-webpack-plugin

npm i dayjs --save
npm i antd-dayjs-webpack-plugin --save-dev

2、在vue 项目的 ma

最低0.47元/天 解锁文章
vue3+antd中使用Dayjs实现输出的日期格式化，和限制自定义日期选择器的可选范围
weixin_45745641的博客
10-31 4401
在vue3+antd项目中我们需要对日期数据进行格式化，通常大家会想到moment，但是在antd的v3版本中自带dayjs，强大的Day.js也拥有非常强大的日期数据格式处理的api，本文就来讲解如何在项目中进行使用
ant-design-vue-pro moment时间格式化 前端UI库, 解决s-table中时间格式化问题
weixin_43687353的博客
11-05 1683
1.修改前效果 2.修改后效果 3.script 标签中引入 moment import moment from 'moment' 4.Antd 的 table 表格 columns 表格设置 //表格数据字段 const columns = [ { title: '序号', scopedSlots: { customRender: 'serial' } }, { title: '业务描述', dataIndex: 'item
Ant-design-vue 替换moment为dayjs方式记录
japlus的博客
02-09 1890
moment通过webpack.ContextReplacementPlugin()移除非中文国际化后，打包依旧比较大。 dayjs作为moment的轻量实现，考虑使用dayjs替换momentjs 步骤 安装插件 npm i antd-dayjs-webpack-plugin --save-dev webpack/vue-cli配置 // webpack-config.js const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-
antd-dayjs-webpack-plugin::alarm_clock:适用于antd的Day.js Webpack插件
05-28
antd-dayjs-webpack-plugin A webpack plugin for . 一个 Day.js 的 Webpack 插件。 Replace Moment.js with Day.js in antd project in ONE step. Bundle size reduced from 65 kb -> 4.19 kb. 只需一步操作即可使用 Day.js 替换 Moment.js ，打包体积由 65 kb 优化至 4.19 kb。 Name Size Size gzip Moment.js 231 kb 65.55 kb Day.js 11.11 kb 4.19 kb Usage 使用方法 Install npm i dayjs --save. 安装 dayjs。 Install npm i antd-dayjs-webpack-plugin --save-de
Vue中dayjs
qq_47462646的博客
04-07 436
dayja(Data.now()).format('YYYY年MM月DD日 HH:mm:ss')dayja(Data.now()).format('YYYY年M月D日 HH:mm:ss')dayjs()对象格式化。
Ant Design Vue中DatePicker日期选择框默认绑定dayjs对象数据格式问题
butcher的博客
10-23 5452
我的需求是选择日期后，提交的数据可以是我期望的格式。 然而遇到的问题却是： 代码： <template> <a-date-picker v-model:value="receive" /> {{ receive }} </template> <script lang='ts'> import { defineComponent, reactive } from "vue"; import dayjs from "dayjs"; export def
ant-design-vue中使用datepicker 中英文混合的解决，原因是少了moment
今日最可爱YeahT
05-11 3300
使用前的日期控件： 加上moment之后就好了。 <template> <a-config-provider :locale="locale"> <div id="app"> <router-view /> </div> </a-config-provider> </template> <script> import zhCN from 'ant-d...
Day.js替代Moment.js
qq_40782372的博客
02-17 1088
Day.js 是一个轻量的 JavaScript 时间日期处理库，和 Moment.js 的 API 设计保持完全一样. 如果你曾经用过 Moment.js, 那么你已经知道如何使用 Day.js
Ant-Design-Vue 日期控件显示英文解决
m0_48237530的博客
04-26 645
【代码】Ant-Design-Vue 日期控件显示英文解决。
antd-theme-webpack-plugin:一个Webpack插件，用于为Ant Design生成动态主题
05-02
antd-主题-webpack-plugin 该webpack插件用于生成特定于颜色的less / css并将其注入到index.html文件中，以便您可以在浏览器中更改Ant Design特定的颜色主题。 现场主题演示： 为了与您的webpack配置集成，请安装该软件包并在您的webpack配置文件中添加以下代码。 安装 npm install -D antd-theme-webpack-plugin const AntDesignThemePlugin = require ( 'antd-theme-webpack-plugin' ) ; const options = { antDir : path . join ( __dirname , './node_modules/antd' ) , stylesDir : path . join ( __dirname , '
antd时间组件Datepicker day.js 替换 Moment.js
qq_29118071的博客
01-04 1285
关于具体造成问题的原因，从issue下面的回复有人提到是因为在node_modules中存在了两个dayjs，一个是原本通过npm或yarn引入的dayjs依赖，但是看了官方修复也只是把原先引入的固定版本的dayjs转变成了一个更加广泛的1.x版本，并没有删除这个依赖，所以目前具体原因不清楚。Moment.js 的大小是200多k,Day.js的大小是2kB，100倍的差距，拥有同样强大的 API。另一个存在于rc-picker中的依赖(也就是antd引入的时间相关的组件模块)，自定义导出dayjs。
Ant Design的日期选择器 - 设置中文 - 限制时间范围 - 回显
pig_ning的博客
03-27 807
Ant Design的日期选择器 - 设置中文 - 限制时间范围
八、Vue3组件库经验[Ant Design]
黑日里不灭的light
01-06 552
问题1：当将时间加载到DatePicker 日期选择时，用出现bug卡住，并报错。原因：DatePicker 需要的dayjs处理后的数据格式。问题2：使用DatePicker时间差了8小时。原因：DatePicker默认是0时区。
Ant Design Vue中日期选择器快捷选择 presets 用法
weixin_46607967的博客
07-22 616
范围选择时可接受一个数组 具体参考。ant写文档的纯懒狗。话不多说 直接上代码。
Ant Design Vue 时间 下周 最近7天 最近30天 上周（版本3.2.18）
qq_24953751的博客
04-26 682
Ant Design Vue 3.2版本是用Dayjs实现的，具体实现代码。以上是详细代码，下面是全部代码 是在vben admin 框架上开发的。
vue3 antd-design-vue3 日期组件语言不显示中文问题
最新发布
cui_win的专栏
10-07 718
随着ant-design-vue v3的推出，ant-design-vue官方把时间组件中的momentjs 替换成了dayjs，升级完后发现日期显示不正常（月份，星期不显示中文), 修改如下。
vue + antd vue + moment 日期选择器，选择范围限制
pacholy的博客
09-28 4666
首先我们先把环境配置好 1.安装antd vue（这里就不介绍了） 2.安装moment.js 步骤: （1）npm i moment （2) //main.js import moment from 'moment'; Vue.prototype.$moment = moment; 需求1：要求日期不可选择未来时间，日期范围不得超过半年 <template> <a-range-picker @change="onChange" @calendarChange="handleCale
Nuxt3+Ant-design-vue国际化,自定义主题
yongjian_123的博客
03-23 4042
Nuxt3+Ant-design-vue国际化,自定义主题
Vue中使用dayjs
热门推荐
07-19 1万+
dayjs中文网Day.js中文网Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。https单位不区分大小写，支持复数和缩写形式把dayjs()对象当成一个中转站，往后所有的关于日期的计算都先转成dayjs()对象，再进行加减等运行。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值