![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 65
好巧.
欢迎访问我的github主页: https://github.com/xlz122
展开
-
github 自动化部署到github pages
点击 Settings -> Pages,找到 Build and deployment 菜单下的 Branch 选项,选择 static-pages 分支并保存。当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。工作流默认是没有推送代码的权限,配置选中第一项,工作流才具有读取和写入权限。工作流运行成功之后, 会自动生成一个 static-pages 分支。如果本篇文章对你有帮助的话,很高兴能够帮助上你。原创 2023-11-02 09:24:35 · 1672 阅读 · 1 评论 -
vue typescript项目配置eslint+prettier
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。如果本篇文章对你有帮助的话,很高兴能够帮助上你。安装 typescript 解析器、规则补充。安装 eslint-plugin-vue。安装 prettier 及相关插件。主要用于检查 Vue 文件语法。原创 2023-11-21 09:22:50 · 1134 阅读 · 0 评论 -
vue 根据git commit记录生成CHANGELOG.md文档
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。生成 CHANGELOG.md 需要符合 git commit 提交规范,规范配置请查看另一篇文章。-n ./.changelog.config.js: 自定义配置文件。1.根目录新建 .changelog.config.js。-i CHANGELOG.md:指定输出的文件名称。-r 0:指定增量更新,不会覆盖以前的更新。-s:指定读写同一文件。原创 2021-10-20 15:33:12 · 1365 阅读 · 3 评论 -
github 自动化部署到腾讯云服务器
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。Name:SERVER_USERNAME / Secret:服务器用户名。Name:SERVER_PASSWORD / Secret:服务器密码。Name:SERVER_HOST / Secret:服务器公网IP。Name:SERVER_PORT / Secret:服务器端口。新建的 main.yml 文件名可以自定义,例:ci.yml。原创 2023-11-02 17:09:32 · 947 阅读 · 0 评论 -
vue 代码提交github前进行eslint检测
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。lint-staged 是文件过滤器,它只会校验等待提交的文件。如果本篇文章对你有帮助的话,很高兴能够帮助上你。.husky/_/husky.sh 文件不存在。项目根目录将会生成一个 .husky 文件夹。4.检查 husky.sh 文件是否存在。3.执行 yarn prepare。2.重新安装 husky 插件。1.删除.husky文件夹。原创 2021-10-18 09:44:11 · 1459 阅读 · 0 评论 -
vue 代码提交github前commit message校验规范
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。commit message 校验规范中,angular 规范是目前使用最广的写法,比较合理和系统化,并且有配套的工具。如果本篇文章对你有帮助的话,很高兴能够帮助上你。项目根目录将会生成一个 .husky 文件夹。打开 GIT 日志,查看详细的报错信息。不符合规范的 commit,报错拦截。符合规范的 commit。原创 2021-10-20 14:58:15 · 1161 阅读 · 1 评论 -
vue cli配置stylelint样式规范
如果想使用airbnb或prettier的规范,改为stylelint-config-airbnb或stylelint-config-prettier即可。使用airbnb或prettier规范的话,将extends里的stylelint-config-standard替换即可,参考第一步中的规则配置插件部分。当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。具体配置项可自行查看。原创 2022-07-11 14:27:39 · 3551 阅读 · 0 评论 -
vue cli 5.x 配置小图片转base64
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。vue-cli 5 版本已经将 webpack 版本升级为5版本,具体变更可以自行查看 vue-cli 迁移日志。如果本篇文章对你有帮助的话,很高兴能够帮助上你。本文基于 vue-cli 5.0.6 版本。原创 2021-11-18 15:57:45 · 2464 阅读 · 0 评论 -
vue cli 5.x 配置生产环境不输出console.log
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。vue-cli 5 版本已经将 webpack 版本升级为5版本,具体变更可以自行查看 vue-cli 迁移日志。terser-webpack-plugin 插件 vue-cli 自带,无需自己安装,直接配置就可以。如果本篇文章对你有帮助的话,很高兴能够帮助上你。相比于 4.x版本,5.x配置变化有如下几个。本文基于 vue-cli 5.0.6 版本。原创 2021-11-18 15:40:37 · 3857 阅读 · 0 评论 -
uni-app vue-cli命令行创建项目,拉取模板(dcloudio/uni-preset-vue)失败,443超时报错
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。创建cli工程,会远程下载 dcloudio/uni-preset-vue,拉取失败时,可以通过手动下载来创建项目。提示,通过 vue-cli 命令行创建项目,出现如下报错。如果本篇文章对你有帮助的话,很高兴能够帮助上你。原创 2021-08-12 14:31:21 · 8119 阅读 · 0 评论 -
uni-app vue-cli创建项目方式,打包成android ios手机apk
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。文章演示Android打包,ios打包也差不多步骤(ios要自有证书,测试证书只能用在越狱手机上上)。项目基于vue-cli方式创建,打包成Android ios手机apk。第一步: 勾选需要打包为 Android 还是 ios 的手机apk。第三步:测试app包,选择公共测试证书就好了,正式上线选择自有证书。应用名称:打包后的Apk包名称。原创 2021-01-11 11:00:45 · 4557 阅读 · 3 评论 -
uni-app 支付宝小程序授权,获取用户基础信息(头像图片地址、昵称、性别、国家码、省份、所在市区)
1.授权需要用户主动触发(按钮点击)#ifdef 为环境编译,官方文档-条件编译固定写法:open-type=“getAuthorize” 授权组件固定写法:scope=“userInfo”授权成功回调:@getAuthorize=“onGetAuthorize”授权失败回调:@error=“onAuthError”支付宝授权方法: my.getOpenUserInfo<template> <!-- #ifdef MP-ALIPAY --> <butt原创 2020-12-24 10:20:32 · 6104 阅读 · 2 评论 -
uni-app 支付宝小程序自定义顶部导航栏失效
支付宝小程序:picker Picker’s child must be an element: ,picker 不能直接写文字(< picker> 生日当天有惊喜),需要用< text> 或者 < view>包裹(< picker> < text>生日当天有惊喜 )当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。...原创 2020-12-21 13:43:13 · 6429 阅读 · 6 评论 -
vue 3.0 封装一个message提示组件
前言vue2.x中,可以使用 Vue.extends 来封装一个弹框,在vue 3.0中,该api已经被废除。本篇文章使用了typescript,如果不需要,只需要把ts部分去掉即可,实现效果图放在文章末尾。实现后使用方式: Message.info(‘提示’); Message.error(‘错误’);附上vue3.0文档:Vue3中文文档 - vuejs1.新建一个ts文件注:createApp(组件) mount(id, class, div), 可以参考main.ts。h函数第一原创 2020-11-17 15:37:28 · 3645 阅读 · 0 评论 -
vue 3.0 使用ref获取dom元素
答:检查是在哪里进行的console.log,setup函数相当于vue2中的beforeCreate, created阶段,如果直接在setup中直接使用console.log获取ref,返回的自然是null。当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。最后,希望在提出疑问前请创建一个新项目,将文章中的示例代码完完整整的拷贝到新项目的app.vue中,运行后可直接查看效果。// 存储dom数组。原创 2020-09-24 16:00:52 · 135330 阅读 · 59 评论 -
vue 导出文件,携带请求头token
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。如果本篇文章对你有帮助的话,很高兴能够帮助上你。本文并不能直接复制到本地看效果,仅提供代码参考。'导出文件.xlsx'原创 2020-06-04 11:26:46 · 4530 阅读 · 6 评论 -
vue3 v-for循环数据列表,点击获取循环列表当前项的某一项的数据,例如id
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。v-for循环语句上定义一个点击事件,传入一个参数,点击的时候需要获取什么数据就传入什么,这里以获取 id 为例。本文为vue 3语法,vue 2语法从以下链接进入另一篇文章。如果本篇文章对你有帮助的话,很高兴能够帮助上你。'当前被点击的id: '原创 2020-05-20 14:22:22 · 9978 阅读 · 1 评论 -
vue iview上传多文件只发送一次ajax请求,并根据上传进度显示上传进度条
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。上传多文件,只进行了一次ajax请求,这里xlz是一个超大压缩包,用于展示进度条效果, binary 为二进制文件。,将所有上传文件拦截下来,保存在本地临时数组,使用axios来进行上传。// 控制多文件上传,只触发一次ajax请求。// 控制多文件上传,只触发一次ajax请求。// 临时数组,同时用于显示在页面。// 临时数组,同时用于显示在页面。原创 2020-04-11 10:47:35 · 3810 阅读 · 1 评论 -
vue 日期字符串转为刚刚、1分钟前、1小时前、1天前、1周前、1月前
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。建议在 src 目录下新建一个 common 文件夹,新建 date.js 文件。// formatDate接收参数为时间戳,需要将日期字符串转为时间戳。如果本篇文章对你有帮助的话,很高兴能够帮助上你。原创 2020-01-14 14:16:49 · 4250 阅读 · 9 评论 -
vue 日期字符串格式化
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。建议在 src 目录下新建一个 common 文件夹,新建 date.js 文件。如果本篇文章对你有帮助的话,很高兴能够帮助上你。原创 2020-01-14 13:56:11 · 6816 阅读 · 1 评论 -
javaScript/js 获取屏幕宽高,元素宽高/margin/padding
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。// 使用,第一个参数元素,第二参数,元素的属性,如:width/height/margin/border都可以。如果本篇文章对你有帮助的话,很高兴能够帮助上你。// 兼容IE浏览器。原创 2018-12-05 17:57:03 · 6320 阅读 · 1 评论 -
vue echarts 实现一个简单的散点地图,迁移效果
前言最新的 echarts 5 版本,不再内置地图,要么自行下载 china.js,在项目里引入,要么使用echarts4.9echart 官方文档 - 去除内置的-geojson1.安装依赖组件使用geo配置项,隐藏南海诸岛(可选)效果图如果本篇文章对你有帮助的话,很高兴能够帮助上你。当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。原创 2019-11-12 17:43:00 · 1873 阅读 · 2 评论 -
vue cli 配置 eslint 和 perttier 引号规则冲突问题
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。启动项目,改为单引号之后,eslint编译通过,prettier不通过,prettier提示改为双引号,改为双引号之后,eslint编译不通过。需要注意的是,关于eslint的配置改动之后,都需要重新启动,不然配置不生效。如果本篇文章对你有帮助的话,很高兴能够帮助上你。.eslint.js 文件开启强制单引号。重新启动之后,prettier编译通过了。原创 2019-11-12 16:31:56 · 2368 阅读 · 4 评论 -
vue 移动端吸顶效果,开始随页面滚动,滚动到指定位置固定在顶部或者固定在指定位置
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。不同组件多次使用的话,建议在 src 下新建一个 common 文件夹,创建 stickySlot.vue 文件,方便多次复用。为了方便演示,这里使用了for循环的方法将屏幕撑满,直接将全部代码复制运行就能看到效果。通过设置top的值,控制需要固定在什么位置,0是顶部,值为number(px)// 需改为对应的组件存放的路径。// 使用假数据撑满屏幕。原创 2018-12-05 16:27:53 · 19568 阅读 · 5 评论 -
vue 实时监听窗口滚动条
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。如果本篇文章对你有帮助的话,很高兴能够帮助上你。原创 2018-12-05 14:15:37 · 9317 阅读 · 2 评论 -
vue tab切换,echartst图表宽度只有100px问题解决
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。解决思路:直接将图表的宽高写死,根据实际代码进行改写,提供一个思路。如果本篇文章对你有帮助的话,很高兴能够帮助上你。原创 2018-12-07 18:24:59 · 6575 阅读 · 7 评论 -
vue v-for循环数据列表,点击获取循环列表当前项的某一项的数据,例如id
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。定义一个点击事件并传入参数(点击的时候需要获取什么数据就传入什么),示例以获取 id 为例。如果本篇文章对你有帮助的话,很高兴能够帮助上你。'当前被点击的id: '本文为vue 2语法。原创 2018-11-30 18:16:24 · 53189 阅读 · 17 评论 -
vue v-for循环列表,点击当前项(每一项),通过后台数据id进行url传参,进行页面(路由)跳转到同一个页面
官方解释:当使用路由参数时,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用。在项目中经常遇到,用v-for循环出一个列表,点击当前项跳转到另一个页面,跳转后的页面使用的是同一个页面的基础结构,这个时候就需要使用url传参传值给后台,来返回不同数据用于渲染页面。当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。// 接收到a.vue页面传递的id。// 编程式导航路由跳转。原创 2018-12-04 18:44:15 · 16618 阅读 · 11 评论 -
vue 将后台数据时间戳转换成日期格式
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。建议在 src 目录下新建一个 common 文件夹,新建 date.js 文件。如果本篇文章对你有帮助的话,很高兴能够帮助上你。'yyyy年MM月dd日 hh:mm:ss'// 时间格式可自定义。原创 2018-12-05 17:33:28 · 11815 阅读 · 8 评论 -
iview admin 将后台时间戳 转为 日期格式 (yyyy-MM-dd hh:mm),并在组件table表格中使用
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。建议在 src 目录下新建一个 common 文件夹,新建 date.js 文件。如果本篇文章对你有帮助的话,很高兴能够帮助上你。原创 2018-12-21 18:51:32 · 4218 阅读 · 14 评论 -
vue 实现一个简单的全局调用弹窗
1.实现效果图2.第一步,新建一个.vue文件 定义一个弹框的基本模板 style样式放在了文章的最底部,如果需要看效果,需要将样式放入这个vue文件里 ,样式是用less写的,需要你的项目引入less 注意:我这里的组件右上角关闭是一张图片 需要换成你自己本地的路径<template> <div id="tip_alertModal"> <...原创 2019-04-28 17:10:19 · 9960 阅读 · 10 评论 -
vue v-for 点击当前行,获得当前行数据,以及event当前事件对象
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。定义一个点击事件,传入两个参数(当前行数据、当前事件对象),当前事件对象必须加上。加上 $:点击之后获取到当前行数据以及当前事件对象。如果本篇文章对你有帮助的话,很高兴能够帮助上你。不加 $:点击之后报错。原创 2019-04-28 16:18:47 · 12824 阅读 · 1 评论 -
vue radio单选框,获取当前项(每一项)的value值
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。本文使用了lable关联选中,如果不需要,直接将循环语句 v-for 写在 input标签上即可。注意:需使用 change 事件,不是 click 事件。注意:需使用 change 事件,不是 click 事件。如果本篇文章对你有帮助的话,很高兴能够帮助上你。原创 2018-12-24 18:59:08 · 32901 阅读 · 1 评论 -
vue 全局引入axios
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。如果本篇文章对你有帮助的话,很高兴能够帮助上你。出现如下表示安装完成。原创 2018-12-04 17:48:57 · 13731 阅读 · 1 评论