vue axios和日期库的使用

阅读: 评论:0

vue axios和日期库的使用

vue axios和日期库的使用

一、axios数据请求封装

env.js
request.js
api.js
二、生产环境,开发环境切换

1.第一种方法:通过配置.env文件来实现

参考:.html
第二种方法
第一步:通过创建不同环境js文件,再通过cross-env来切换
config
dev.js

prod.js

dev.js
ports = {
BASE_URL: “”
};

prod.js


BASE_URL: “”
};

第二步:安装cross-env并在package.json中配置要传递的参数
npm install cross-env -D

package.json中配置

“scripts”: {
“serve”: “cross-env BUILD_ENV=dev vue-cli-service serve”,
“build”: “cross-env BUILD_ENV=prod vue-cli-service build”
}
第三步:修改fig.js添加对webpack的配置
ports = {

chainWebpack: config => {
config.plugin(“define”).tap(args => {
args[0][‘v’].BUILD_ENV = JSON.v.BUILD_ENV);
return args;
});
}
};

在业务代码做环境的切换
//读取v常量对象中的BUILD_ENV
const envType = v.BUILD_ENV;

const urlObj = require(../config/${envType}.js);

//创建一个axios实例
const service = ate({
baseURL: urlObj.BASE_URL + vipUrl
});

三、过滤器与moment日期库的使用

过滤器

1.全局过滤器

定义:
Vue.filter(‘过滤器名称’,function(a,b,c) {

  //....return ...

})

使用:

{{ num | 过滤器名称(v1,v2) }}

2.局部过滤器

3.总结:过滤器使用场景:用于将后台数据处理成用户最终显示的数据格式

例如:性别,支付状态,物流状态,时间戳。。。。。。

moment

moment官网:/
npm i moment

格式: moment(时间戳).format(“YYYY年MM月DD日,HH时mm分SS秒”);

格式显示:/

本文发布于:2024-01-31 22:07:22,感谢您对本站的认可!

本文链接:https://www.4u4v.net/it/170671004531690.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:日期   vue   axios
留言与评论(共有 0 条评论)
   
验证码:

Copyright ©2019-2022 Comsenz Inc.Powered by ©

网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22/a> 网站地图23