vue
文章平均质量分 85
海天酱油zz
已转战掘金社区,掘金名称:htSauce
展开
-
三年不断优化更新的接口服务封装代码推荐,支持后端多种微服务对接,可多平台移植使用
碎碎念看了下上次文章发布时间,2个月前。好久没更新了。技术深度方面也没有特别多的一个加深。这次来一个老生常谈的事情吧。api服务封装。这是我干前端这些年一步步慢慢优化过来的代码。特性:1、支持多个不同微服务(核心)2、集中配置中心3、简化开发流程和优化开发体验4、解耦,可移植一、列举下大家都是怎么封装的接口服务我来吐槽下大家这些都会产生什么问题,我全部试过1、增加接口拦截服务,什么重复接口防止提交好多文章都在axios上面做文章,基于axios本身的api进行再封装。原创 2021-09-18 16:26:55 · 452 阅读 · 0 评论 -
我的前端项目目录约定和基础规范建议。一个5年前端接触者的推荐
甘雨镇楼废话其实我以前觉得这个文章没必要写。但是干前端三年多(15年底接触前端开发),我发现后端做前端的时候,前端新手入学的时候对于这个基础的约定规范,都是东拼西凑,慢慢的把自己的风格习惯搭建起来。而很多没有追求的就是穷举写法。写到哪里是哪里。我这里会对于我个人这些年逐步沉淀的习惯分享给大家。有react的见解也有vue的见解。大家互相促进文后有阿里前端九部规范文档一、我的目录结构1、目录结构项目是vue项目,但是react其实也差不多。config ...原创 2021-05-29 10:51:37 · 1416 阅读 · 0 评论 -
vue3下jsx教学,保证业务上手无问题!手敲代码,有知识点,附带和template对比
前言原因:闲的。还有一个原因吗?嘿嘿然后之前就说过了,我拿vue3直接干公司项目了,是内部的孵化项目,客户不多,但是也是正规的生产项目。技术栈说明:公司项目:js,element-plus,vue3,jsx,常规template,按需加载(单独领出来是因为这个也会导致你的项目填坑变多)个人组件库研究项目:TypeScript,vue3,jsx,常规template主要讲公司项目吧,公司项目上线一个月。还算稳定,不过我需要给没能力填坑的大家看一个截图。一、vue3生产注意点.原创 2021-01-06 09:04:04 · 1785 阅读 · 1 评论 -
基于vue3和element-plus的省市区级联组件,elui-china-area-dht发布
说明其实该组件很简单,核心在于全国省市区数据的来源,还有数据格式化以及组件封装。然后大家应该知道在vue2阶段其实有一个省市区的第三方封装的组件,我想大家应该不少人使用过。看源码,作者应该暂时没有发布vue3的计划。那么我这里就提前一步给大家个福利。使用的话直接看使用部分就行了。核心原理数据基于:https://github.com/airyland/china-area-data根据第三方提供的省市区数据部分,将数据改为element-plus所需的嵌套数据结构封装Chin原创 2021-01-05 11:43:12 · 3778 阅读 · 7 评论 -
决图片溢出,样式不对问题,个人博客开发(三)
废话:最近写博客。重新写了下文章编辑器。用的quill.js,觉得应该分享下。有些坑还是需要注意下的。一、vue-quill-editor引入和使用1、先放官方的一个文档地址:https://github.surmon.me/vue-quill-editor/npm地址:https://www.npmjs.com/package/vue-quill-editor2、使用方式...原创 2019-11-22 17:32:27 · 489 阅读 · 0 评论 -
vue打包优化大小,vue服务端渲染,非cli环境实现spa单页面项目
引言:写这篇文章的目的主要在于刚才看了一位掘友的文章,但是我看了他的代码有点粗糙,甚至是我觉得无法作为一篇好的给予新手的引导文章。这里我先抱歉一声,因为我这样做有损你的声誉。先放上该掘友的文章,还是很不错的,只是希望多点注解会更好:https://juejin.im/post/5d9ff02df265da5baf4104d9#comment一、知识点和目的1、打包优化的目的...原创 2019-10-12 14:40:25 · 567 阅读 · 0 评论 -
vue实现树形组件,参考并解析elementUI树形组件
废话部分,不想看的跳过就行了,发发牢骚本来是不想发出来的,但是呢,最后出于装逼,讨论和分享的想法下还是拿出来。而且我对于树形组件的自定义节点这块,还是没有理解透彻。也希望有大神帮忙解惑。然后其实我的眼界还是有限,一直都停留在ui组件上面,但是作为一个普通的前端,大家不都干这样的事情吗?既然你觉得我眼界小,那么请说说你在干什么。(一次偏激的回复)感慨:如果没有网络的世界我想我会抑...原创 2019-10-12 14:39:16 · 2794 阅读 · 0 评论 -
vue自定义组件(四)指令模式实现loading,模仿elementUI v-loading
指令模式(蒙版) fullscreen Boolean v-dht-loading.fullscreen 在非全屏模式下,dom没有渲染完成下会导致元素顶部对齐 background String 0, 0, 0, 0.5 text String 加载中... iconSrc ...原创 2019-07-02 10:37:26 · 4606 阅读 · 9 评论 -
vue自己开发ui插件
首先,我最近写了四个组件了,代码都在我之前的博客当中。我是参考了elementUI的源码来写的。不然,自己写还不知道什么时候能写出来。非常感谢elementUI的开源贡献。这里附上elementUI开源地址:https://github.com/ElemeFE/element下面是介绍我自己的代码部分。一、首先是项目结构,声明,我是在个人项目上直接开发,未打算发布到npm上面。...原创 2019-07-02 10:50:19 · 848 阅读 · 2 评论 -
vueUI组件开发历程,text组件,代替传统p标签(一)
组件功能表dht-text 替代p标签,需要提前指定元素的宽高 text String nowrap Boolean TRUE 默认不换行 num Boolean TRUE 默认不控制字数显示,如果控制字数显示则,最后部分用省略号代替 copy ...原创 2019-06-27 17:31:34 · 1171 阅读 · 0 评论 -
自定义vueUI组件库(二)替代传统img标签,实现图片懒加载
dht-img 替代原有的img标签功能,组件本身的宽高都由最外层容器所决定,支持图片加载失败处理 src String src本地图片需要require fit String cover alt String 加载失败 当最终还是加载失败的时候 error-src ...原创 2019-06-27 17:36:14 · 625 阅读 · 0 评论 -
vue下自己开发富文本编辑器(二)带你从入门到放弃,个人已经基本开发完成
上一篇总结:上一篇其实代码开发方面,基本原理都看的差不多了,但是发生了无限嵌套的问题。总结下富文本遇到的问题:1、元素跨标签处理2、如何正确选择到你要的元素3、跨行设置元素未选中部分换行(默认回车事件导致)4、多个功能直接交叉使用问题(要有取舍)5、css新旧混合问题6、代码块插入问题7、其实还有更多问题,但是没有开发过的那真的不知其中各种滋味…………目前还...原创 2019-08-08 17:17:38 · 834 阅读 · 0 评论 -
egg.js入门教程视频文件(转载于cnode社区)
记得上篇博客我满怀欣喜的去搞富文本,结果撞的头破血流。简直是惨不忍睹。后来我也说了,我的那个有比较严重的问题,后期会考虑重构。(第一版已经放弃了)之后我说我会去看关于后端nodejs koa框架方面的东西。这次呢我选择的框架是eggjs,跳过了koa框架。(我以前用过express,写过很小的网站。)一开始直接翻官方文档说实在看的头昏脑涨。之后逛cnode社区,发现有教程。教程很基...转载 2019-07-19 16:41:48 · 923 阅读 · 0 评论 -
最简单的小程序数据监听,最简单的vuex原理,实现跨页面通讯(转)
声明转载至:简书:原文地址:https://www.jianshu.com/p/2ba137a02f09代码部分://模拟数据定时变化startWebSocket() { setInterval(()=> { this.setChangedData(121212); }, 5000);},//二级页面的监听函数addListener: function(ca...转载 2019-07-23 09:16:15 · 698 阅读 · 0 评论 -
妈妈再也不用担心css难写了!css的奇技淫巧(转)
声明:这个博客是个人在掘金上面看到大神总结了很多的css技巧转发的。非常好用。最后有福利举例:1、三角形生成器(自动生成css代码):代码:.triangle { width: 0; height: 0; border-style: solid; border-width: 0 50px 100px 50px; border-color: transp...原创 2019-08-14 08:46:04 · 599 阅读 · 0 评论 -
vue递归组件,认识树形组件基础原理,纯数据驱动组件
背景1、个人心血来潮想试试如何实现无限嵌套组件,也就是当数据不确定的情况下,如何渲染组件2、自我思考以后肯定会需要用到这种思维和开发方式,早点学,早点掌握3、好奇之前jqui的文件夹列表实现说明:组件写的很垃圾,很丑,大家请关注原理实现开始实现第一步思考首先既然是树形渲染,那么for循环是肯定需要的,问题:for循环的时候只能单列循环,也确实是数据驱动,但是...原创 2019-08-24 14:38:52 · 677 阅读 · 0 评论 -
vue下个人实现拼图验证码
缘由:之前看哔哩哔哩官网登录的时候有一个拼图验证码,很好奇怎么去实现。然后就想着自己弄一个。先给大家看我的最终效果。后面再一点点拆解代码。为什么想着写这个功能呢,主要在于拼图验证码在前端这里会比较复杂并且深入。相比文字拼写,12306的图片验证码都没有拼图验证码对前端的要求来的复杂,和难。我总结下知识点:1、弹窗功能2、弹窗基于元素定位3、元素拖动4、canvas绘图...原创 2019-09-11 17:39:33 · 6987 阅读 · 3 评论 -
vue轮播组件实现,懂,但是写过才算,附带好用的gif录制工具
写这个组件起因记得就这两天有掘友发一个沸点说找女票千万别找同行,好了,曾经我是erp软件实施,现在转前端。女票也是前端。然后她发我一个链接(打不开看gif图):http://ipark.jsboon.com/static/dashboard/yjw/yjw.html这个链接的最右侧有一个轮播的效果。说起来这整个页面是不咋的,不过里面涉及的东西都比较复杂。附带gif录制工具:http:/...原创 2019-09-26 10:32:42 · 396 阅读 · 0 评论 -
vue自定义组件(三)函数式实现loading加载
页面顶部进度条模式,服务模式(参考elementUI服务模式) mask Boolean FALSE let cesg = {}; //展现与传值 cesg = this.$dhtLoading({ mask: true, background: "red" }); //关闭 cesg.close();...原创 2019-07-02 10:34:02 · 2874 阅读 · 0 评论 -
ajax二次封装配合防抖处理,vue,axios,elementUI(改)
纯属个人记录,代码很糙,因为博客之前发布过一次,这次是修订之后的。已经比较全面的解决了我目前所遇到的痛点。项目痛点:1、每次接口调用完成都需要处理错误提示和操作成功提示。2、页面蒙版并不能解决用户点击提交的时候重复提交请求解决:1、ajax继承页面蒙版控制2、错误和成功信息既可以全局处理也可以自定义3、ajax代码集成防抖函数4、默认数据过滤处理,当字符串中出现Na...原创 2019-06-11 16:27:24 · 1067 阅读 · 0 评论 -
js节流和防抖(转)
直接上代码。其中防抖反而是最简单的,我已经把代码吃透,并且附上注释。防抖部分只有代码。但是也没有问题。都来自大神的博客,并且自己小改。大神博客地址:防抖:https://blog.csdn.net/Beijiyang999/article/details/79832604节流:https://blog.csdn.net/Beijiyang999/article/details/79...转载 2019-06-10 16:27:46 · 135 阅读 · 0 评论 -
我的rem响应式解决方案
一、原理:虽然大家都喜欢直接拿代码,但是原理还是不得不说的。走的越远,越发现理论的重要性。关键知识:1:rem是定义在html元素上面的,并且必须设置font-size(别和我扣,我也知道body上面也可以)2、浏览器内用rem就必须在初始的html元素上面定义fontSize大小,并且需要设置随着页面变化fontSize也会随之变化这里很多新手都不知道,直接拿来用虽然看着没问...原创 2019-01-29 17:16:44 · 505 阅读 · 0 评论 -
vue无法更新数据(vue响应式)
原因:今天写项目的时候页面有一个标题和状态一直没有发生变化。我一开始以为是异步的问题,也确实,异步方面确实存在问题。但是当解决异步问题之后,发现我所需要的数据和状态依旧没有发生改变。如图,1部分,我为了验证异步问题做了延迟处理。但是延迟3秒之后数据改变但是页面参数依旧没有改变。所以我在页面上面干脆就做了一个按钮,这样无论如何都是不存在异步问题的。但是依旧不行。我甚至一度怀疑自己...原创 2019-02-26 10:42:05 · 1492 阅读 · 0 评论 -
vueCli3.0发布到nginx,vue项目部署
1、nginx部分nginx.conf配置文件#user nobody;worker_processes auto;#error_log logs/error.log;#error_log logs/error.log notice;#error_log logs/error.log info;#pid logs/nginx.pid;event...原创 2019-03-02 12:38:42 · 6673 阅读 · 0 评论 -
阿里飞冰(Iceworks)入门和飞冰是干什么的
前言:昨天技术总监告诉我个框架(Iceworks),又名飞冰,是阿里旗下的一个开发工具。也没说具体这个东西能解决什么问题。所以我最终的目的是为了知道这个框架有什么用,是干什么的。引用飞冰官网的一句话: 每个后台相互独立,同类功能也需要重复开发,前期开发成本较高 技术方案差异大,人员变动后维护成本非常高 视觉质量参差不齐,使用效率大打折扣 …… 我经过...原创 2019-02-21 10:14:00 · 13551 阅读 · 1 评论 -
vue部署到nginx非根目录下面,vue cli3.0
先贴nginx配置#nginx作为服务器需要的配置 location /miniprogram { root D:/nginx/html/miniprogram; index index.html; try_files $uri $uri/ /index.html; }这段配置就是简单的指向index首页和静态文件所在...原创 2019-03-09 16:00:20 · 4510 阅读 · 4 评论 -
vue不打包指定js
方案:在index.html中如下图所示用script标签导入<script src="<%= BASE_URL %>api/api.js"></script>关键点:必须要参考favicon.ico的引用方式。给你当前的引用路径增加变参,vue因为版本不同变参不同,我是vue cli3下变参是:<%= BASE_URL %...原创 2019-03-07 18:20:51 · 4842 阅读 · 0 评论 -
js连续请求并发处理,promise和async/await
本次使用,核心在于promise和async/await的使用。上代码://获取所有门店的数据,一万家门店情况this.storelists(1, 10000, "", true)//注意async .then(async e => { let that = this;//for循环进行所有数据处理 for (var i = 0; i < e.le...原创 2019-03-22 12:49:28 · 2931 阅读 · 0 评论 -
vue下将图片打包为zip进行下载
需要使用到的技术:import JSZip from "jszip";import FileSaver from "file-saver";使用函数,上代码传入数据格式如下:[{name:"你的图片名称,不能重复",baseImg:"后端传输给你的base64图片"}]//批量下载门店二维码转化StoreDowQrcode(arr, blogTitle = "二维码"...转载 2019-03-23 13:24:18 · 5370 阅读 · 3 评论 -
(websocket)微信小程序心跳包和pc心跳包
1、我的开发方式全部为es6的语法,并且用es6的class方式封装心跳2、代码仅供参考,虽然实际项目中个人是有使用的3、所有代码我都用注释,就不仔细解释了。但是能用。一、pc心跳class WebSockets { constructor(opt) { //websocket实例 this.ws = null; //url this.url ...原创 2019-04-25 11:13:37 · 2972 阅读 · 0 评论 -
小程序实现数据监听
项目描述:本人是这个项目中需要使用websocket返回的数据,但是websocet如果放在页面中切换就会频繁的断开重连。这是不切实际的。所以将websocket写在了app.js下面,但是问题也随之而来。虽然app.js下面数据实时变化,但是我websocket的数据不会对应实时更新到别的页面。最后感谢简书的一位大佬,具体链接在最后代码部分://app.jsApp({ ...原创 2019-04-25 11:23:58 · 11940 阅读 · 0 评论 -
vue下实现window.print局部打印
代码是我同事提供的,这个发博客主要就是记录下,下一次好用。下面上代码// 打印类属性、方法定义/* eslint-disable */const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this...原创 2019-04-30 16:00:54 · 4882 阅读 · 1 评论