预览模式: 普通 | 列表

vite2+vue2.6.12+vant2.12.12提速移动端开发

 试着用网上的一个vite2的脚手架做了个移动端的尝试。vite最大的好处就是--真的快!也可能是我页面比较少,但是每次热更新,基本就是一存盘,浏览器就完成了变更,体验太好了。

换新脚手架,要把所有常用配置都验证一下,并且把原来webpack中的选项都做到在vite中等价实现。

包括:

* px2rem的解决方案,在postcss.config.js中配置,转化为vw单位,比rem方式要先进点。

* vant基础样式定义,在theme.less中。

* lodash及moment全局引入,在/index.html中直接用<script>标签引入的,在vue文件中和.js中直接可用,但是在.ts文件中,如果不做import,会有红色的错误波浪线出现,但不影响使用。

* import后缀为vue的组件时,必须带上vue后缀,但js/ts不用带后缀。

* 有时候大的变化要CTRL+F5强制刷新页面,热更新才会生效。

* 图片引入方式:

<img :src="require('@img/aaa.png')" />

background-image: url("@img/aaa.png");

* 静态资源在/public目录下,在页面中用/images这样的路径引入即可。

* webpack允许的require在此都不能用,要改为import。写法方面,@import "~@/assets/less/_variable.less" vite中要去掉~写成:@import "@/assets/less/_variable.less";

* 控制台过滤。vite会出现一些控制台输出,暂时没有配置方法屏蔽,折中办法,在控制台搜索框输入-vite,可以过滤掉这些输出。

* 运行命令与环境变量。跟webpack略有不同。运行方式看package.json就知道了。环境变量可放在.env.development这样的文件中,跟webpack一致。在所有代码中输出import.meta.env,可以看到环境变量的所有。具体看文档。

 

我本人对于vue3和ts不是很熟悉(学不动了),所以宁愿工作在vue2+js的环境中。在vite脚手架中,这两种方式是可以混用的。所以按自己合适的模式使用就行了。

 

放心去享受vite带来的快速体验吧!

分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 346

本次YT项目的一些收获

今年4月1号开始在YT公司参与一个商业管理系统的开发,担任前端开发,跟十几个同事一起工作了二个月时间。

到今天项目已经基本告一段落。写写心得。

一是业务理解能力和抗压能力比较重要。项目刚开始时,碰到比较复杂的逻辑,我心理上有犹豫及抗拒,总觉得理解起来很吃力。尤其是在工期压力下,有时会感到头脑一片空白。
比如第一期开发阶段,需要构造一个自定义的日历。我跟后端同事小刘商量,由他来写算法,我前端只负责渲染。我坦承自己并不擅长日期算法。小刘却认为这个日期运算应该由前端的我来负责,我们两个互不相让,产生了一点分歧。后来组长曾工主动承揽了此算法,他花了较少的时间完成了,解决了这个小矛盾。
后来随着项目的进展,我才逐渐发现项目中有大量的日期运算。我查查文档、问问同事,不知不觉也熟练了这项技能。到二个月后的今天,项目没那么紧张了,我又系统地读了一下moment.js的文档,发现自己居然熟练了大多数常用方法,于是试着重新写一下那个日历,结果只用了大约1小时,就完成了。---这真是一个神奇的变化,也是我此次项目的第一个收获,就是提升了自己面对复杂情况的心理阀值。
 
二、项目进度跟踪。 开发团队有比较成熟的进度管理,每天做了几个页面,调试成功几个接口,都要登记在文档中,早会时组长点评。这样挺好,每个人都会按照工期推进,减少项目风险。我跟其它前端同事的分工也逐渐默契,互相取长补短。
 
三、松散的分工模式。拿前端来说,几个前端同事其实是各写各的,没有公用的规范,也没有共同的JS工具和CSS片段。你愿意怎么写就怎么写,愿意放哪个目录就放哪个目录,只要最终页面逻辑能跑通。--我开始面对这个事实有点吃惊,但后来发现也没啥大问题。这样减少了团队磨合成本,VUE本身的模块化方式,也避免了变量冲突和样式冲突。这样做的缺点,就是每个人的“埋头工作”有时候是重复劳动,写了一大块儿,发现别人早就写过相同的代码了。
另外,有些同事的前端代码效能比较差,对于我这样的"老师傅"来说,总觉得这样做缺乏“工匠精神”,但是事实上并不影响最终使用。将来万一出了问题,会有人去改这些“差代码”,但至少不是我。
当然,这里面少不了梁工这位熟悉全局的神人,他凭一己之力,写了很多公共代码块,经常第二天上班被他告知,几个页面被加上了某个代码块。这家伙简单高效地把帮我们把代码升级了。
 
确实,有些业务逻辑,讲一遍太麻烦,还不如直接帮着写了来得爽快。这种搞法,也适合于我们这种快组快闪的团队。
 
四、隐患。项目交工后,还是要提炼经验,并把一些公共建筑搭建好。比如我们这个项目,我觉得可以固定下一些公共配置及工具,把环境变量的最佳实践方法整理好,写成文档,等等。
当然,我参与的很多外包项目,本来就是雇佣军,打一枪换个地方,成员不固定。既然成员不固定,沉淀经验也就无从谈起。最劳神的,还是公司的留守老员工,象老母亲一样把旧项目缝缝补补,案牍劳形。
 
我自己这次收获颇丰:熟练了GIT操作,深入了VANT组件库,加强了moment运算。最大的收获,是了解了5人以上协作开发的一些普遍做法。
 
当然,团队中坚的年轮人,为了项目做出艰苦赴出:连贯一二个月加班,有人身体出现不适,也还在坚持工作。深夜时他们还在钉钉上提BUG、凌晨时全组人测试跨天逻辑、每天中午所有人都趴在桌上午睡。每当看到这些,我都觉得IT人的谋生不易。

对我这样一个老同志来说,能保证每天按时下班,每天搞搞锻炼,每天中午能在自己的折叠床上小睡一个午觉,真是千金不易的人生甘甜。
分类:开发心得 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 459

 moment('2021-1')这种格式定义一个日期时,安卓机可以通过,苹果机不行,显示NaN,

因此必须统一使用:moment('2021-01')这样的标准格式。
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 523

演示在此: http://258754.cn/2020/ehs/canvas_and_svg.html

技术要点:

- 异形边框,自适应尺寸。已经做成了VUE标准组件。边框的宽、高可以使用px,也可以使用rem。

- 边框SVG+MASK+路径动画,底部CANVAS动画。

- flexible.js,每个块的宽、高,会根据整个页面的宽度自适应变化 。

查看更多...

分类:我们的作品 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 902

SVG异形边框及路径动画+CSS动画演示

演示地址:

http://contactu.cn/2021/vue_svg_tweenmax_demo/index.html

- 根据窗体的width/height参数,自动计算生成SVG的path路径

- tweenmax+MorphSVGPlugin生成小光点绕路径环游的动画,tweenmax的CSS动画生成右下角的色彩变化

- VUE组件化,方便复用

查看更多...

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 859

涂鸦智能(杭州)外协工作小记

 涂鸦智能(杭州)外协工作小记

 
此次应朋友公司邀请,我带领一个前端开发小组,为涂鸦智能提供前端开发服务。我们算是外包公司,负责即将上线的某内部平台的模块开发,技术栈是react+vue。
工作地点在杭州的涂鸦总部:华策中心。楼道里的指示牌没有细看,至少5层楼是属于涂鸦。办公区域员工坐得密密麻麻,听说已经达到2000人规模。网上搜到的公开信息:...《苏州高新区·2020胡润全球独角兽榜》发布,杭州涂鸦信息技术有限公司排名第256位...2020中国新型创新企业50强第25位。---各方面来看,这都是一家大型科技企业无疑了。

到处都是年轻人,听说互联网大厂的平均年龄线已经在29岁以下了。到来的第1-2天,我们经历了冗长的各种登记手续。大致包括登记身份、签订保密签议、领取工牌、安装员工APP、注册员工帐号邮箱及GIT帐号等。领我们办手续的老员工对有些手续都不是很熟练,只说每个新人都要经历这一关。到了第2天中午,我们才领到工作用的thinkpad(第一天发了苹果笔记本,用不惯,退掉了)。第3天领到了外接的显示器,和think一样都是全新未拆封的。从库房的门口看过去,一堆堆的新设备堆在那里,宣示公司开疆拓土的硬实力。

公司内网有5种不同的权限,为不同层级的使用者提供。也有很多智能设备,门禁刷脸异常灵敏,在镜头里略略停留就能成功。面试区旁边是专门的电话亭,据说隔音效果很好,专属通话可以避开大办公室的嘈杂。暖气很足,我呆了两天就放弃了秋裤。每一排座位旁边都有一台空气净化器。
 
公司整体装饰是互联网的作派。员工多、东西多,但是堆得很整齐,加上黄色的吉祥物公仔加小绿植的点缀,办公区并不显得市侩。
 
我们这个项目,因为工序的关系,暂时还没有很赶进度,所以压力不大。我有时间,观察一下陌生的城市、新的组员、新的合作伙伴--总归跟我生活了很多年的长沙不一样。边学习一些新的技术,边跟一些很久没聊过的老朋友在线聊聊天。有几个老友也是技术人,他们很想知道外包是怎样一种感觉。
 
deadline的压力当然是有的。当然最终目标也确信能达成的,收入是能兑现的。在此之外,异地工作适合那些乐于拥抱变化的头脑。
中午能在陌生的沙发上睡个柔软的午觉。晚餐跟打饭的大爷闲聊几句,发现了早餐的肉包子和油炸土豆饼实在是合我口味。餐厅充个一百元的会员,买单时方便很多。请刚认识的涂鸦的小妹子吃零食,她热情地指点我们周边的交通出行和几种手机挣闲钱的办法(不馈是电商专业人士!)。下班后,走10分钟到酒店里,边看篮球赛,边在网上跟人下几盘围棋,不用担心孩子的学习。缠绵一周的冷空气终于走了,明天阳光充足又是周末,我们做了准备,杭州西湖去转转。
 
今天早上,在华策中心地库找餐厅入口,向随便碰到的一个大哥问路(用普通话),他立即问我,你是湖南人吧?我说是呀,这你也听得出?纳米级微不足道的邂逅,事后回忆却总是让人想笑。
 
分类:开发心得 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 41

snap.svg+vue实现圆形导航

查看案例请点击此处:
 
使用的技术框架:
1、snap.svg实现Svg
2、数据与视图双向交互由vue-cli3实现
 
功能点:
1、图形与数组双向互动。可点击“添加”按钮添加数组中的对象。
2、算法实现path环状节点,角度、弧度、边长的逻辑关系。下图中所有不同颜色的线段,都是通过CSS定义得到的。可以把一个圆环分成3份,也可以分成50份,得到不同的视觉效果。
3、Snap.animate 实现动画、transform用法
4、stroke-dasharray实现线条间隙,比如下例中的白色间隔。
5、viewBox改变Svg中心。
6、textPath路径文字,实现跟随弧度变化的文字
 
通过这个案例,了解了两种方式,来实现SVG线条。用HTML+CSS方式、或使用snap.svg的JS方式,都可以实现。
 
 
 
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1152
做为正当的做法,应该使用
Javascript代码
  1. npm install snapsvg  
  2. import Snap from 'snapsvg'  
来使用svap.svg
 
但事实上这样是不行的,会报红字错:
vue-router.min.js:6 TypeError: Cannot read property 'on' of undefined
 
 
找了很多百度、github issue的很多资料,发现很多人都碰到了这个问题,也提供了Webpack及改写vue-cli3( vue.config.js)的办法,但实验发现都解决不了问题。

最终在stackoverflow.com找到了最简便的解决办法:
Javascript代码
  1. npm install snapsvg-cjs  
  2. import "snapsvg-cjs"  
经我验证可行。
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1624

 

查看案例请点击此处:

 
需要源码可联系站长本人。微信18975141930。
 
使用的技术框架:
1、原生Svg用来画线
2、原生js拖动dragover、dragleave、drop行为
3、betterscroll实现画布拖动
4、整个底层由vue-cli3实现

功能点:
1、图形与数组双向互动。树节点有单击、右键单击、删除等行为,可通过console.log查看。
2、左侧方案节点可以直接拖到右侧蓝色节点上,添加树节点
3、树节点变化后,会自动调整画面宽、高,并重绘线条
4、线条的柄长度、连接点位置,包括宽度、颜色,都已经用变量实现。
 
这个案例主要是用来测试JS与SVG的结合、拖动行为的基础实现。到具体项目中,是将树结构打包为一个dtree.vue的组件,对外暴露行为。本例只是一个雏形雏形,有了这套理论,可以实现更复杂的东西。比如在页面上任何DOM对象之间都可以连线,画图形标记,是不是想想都有点小激动?
 

 顺便提一下,这种连线可以跟动画相结合,参见我的另一个小例子:

http://www.contactu.cn/2016/svg/test_svg_2019.html

VUE+TWEENMAX+SVG动画,用来模拟流程控制

分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1494

面试前端岗位的一次经历(长沙)

我打算在含浦、洋湖、后湖这个3公里圈子里找份前端工作。上周通过BOSS直聘联系到后湖的一家公司,基本条件和待遇双方都符合,于是约定面谈。

 
那天我提前10分钟到了,公司在后湖的创业区,环境不错,就这一点来说,心理加分。但是他们公司并没有挂牌,公司也没人值守,我没找到是具体哪一间房。我在前台坐了一会儿,L经理一行三个人才到公司,说是刚下火车,刚从外地回来。
 
寒喧两句,一位黑色西装的W经理跟我交流技术细节。可能是我的工作年限比较长,简历上列的项目太多,W经理都没怎么问我技术细节。W经理直接跟我说了一个需求,让我描述下实现思路。我没听懂他要的是什么,另外我想,组件的功能实现,难道不是产品经理的活儿么?我可是面前端岗位呀。
 
W经理重复了两次,我还是没搞清他到底要实现什么。是要我做功能分析?还是UI设计?还是前端技术架构?要说这几门我倒是都会,就是真没听懂他的思路。
 
老鸟跟新人的区别,就是我碰到不会或是不理解的东西,会接受现实,并从容地应对。没听懂就是没听懂,可能是你表达不好,也可能是我没有这个经历,“只要你给我时间,我一定能搞懂。这世界上没有听不懂的需求。”
 
W经理最后放弃了描述,他有点不服气。向L经理示意可以直接谈待遇了。我说:“不考核下我的技术了?”W可能感觉有点被动(被应聘者反将),于是他说也行,那就考核几个点吧。问了几个问题,我记得的有:
VUE-CLI路由类型--我说分为hash和history,他又问我两者区别,我坦承不了解,工作中没用过,但我觉得百度一下就行了。
组件传数据的几种方式--我说了最典型的三种,他说还有更多的没有。我说我查过文档,应该还有更多,但工作中没用到就暂时没去了解。
es6跟组件功能有什么联系?(仿佛如此)----我说es6是一种技术手段,跟功能设计没啥联系。不过我补充了一下我使用es6与lodash库的一些经历。
最后W经理让我看了他们的后台界面,问我,如果只给一个功能描述,是否能实现从“功能设计-UI交互设计-前端编码”这一系列工作,我说我可以,但是我觉得这应该由团队来实现,而不是我一个人。
 
最终还是没有谈拢,原因如下:
团队感觉太小太新,人手不齐。从办公室的布置(只放了几张桌子和刚组装完的电脑)看得出来。虽然L经理说他们张家界还有几十人的团队,但长沙这边确实看不到人。
L经理说他们并不缺钱,但我觉得如果属实,公司应该布置得更正式一些。然后招人进度也不会象目前这样,如果引入一个有力的HR来专门做招聘工作,长沙各种类型的员工还是招得到的。如果连招人这一点都无法保障的话,我只能说这个团队还是缺乏执行力。
虽然承诺了他们招聘事宜上的顶薪,但是要9-8-6的工作制,晚上到8点,每周6天。如果有团队支持,我觉得还勉强可以,但是把几个岗位都堆给我,我觉得我可能承受不了这个工作量。
 
我还在等更好的机会出现。 

Tags: 面试

分类:开发心得 | 固定链接 | 评论: 1 | 引用: 0 | 查看次数: 1290

北京50天项目收获

这次赴北京,参与中科院某院组织项目,历时近一个半月。整个项目组由8个不同的单位派员组成,前端人员十多人。
项目采用前后端分离,前端框架VUE+element ui。也使用了原生SVG做一些控件的开发。

我担任前端工作:
1、负责搭建整个项目的前端框架和主体逻辑。撰写主干代码和路由表,做模块化的总体规划与示例。子单位只能在他们固定的目录,写固定名称的组件(我们称之为“槽位”),所以我们统筹组需要在原型设计的基础上,提前定出槽位。这个提前做的工作有时间要求,否则子单位不好开展工作。另外前期槽位如定得不合理的话,后期代码编写会有麻烦。我们统筹组总体还是达标了。
2、为各单位提供前端解释与咨询。各单位进场时间有前后,对项目理解也不一致。因此统筹组要帮助他们理解进场逻辑,并写出合格的组件。
3、以下主要是我们内部工作。安排人员开发几个重点组件(拖拽树、甘特图、圆形导航),这几个重点组件涵盖近二分之一的应用场景,非常重要。我做为前端组长,安排了专人来开发,追进度、规划要暴露的接口、做压力测试。(后文详细阐述)
4、使用element组件构建约20个页面。中间含有大量的列表、表单、弹窗。在element基础上也另外封装了一些组件。比如封了一个可拖动的el-dailog。
5、对全局scss的定义:使用了内置的element-variables变量文件,统一颜色及组件外观。
6、使用vuex进行跨组件通讯。
7、大量的api请求和前后端联调工作。(后文详细阐述)

三个组件的功能描述:
1、树组件:
这个树组件我们内部命名为gtree(类似脑图),节点上要通过拖拽行为增加子节点。树图与数据双向交互,节点可增、删、改。
我们使用了go.js(破解版)构建。
这个树的核心代码由黄工写的,外部事件由我进行定义和调试。

2、甘特图:
这个组件先后开发了两版。之前版本由赵工写的,性能方面有些问题。后面这一版由黄工写,外部接口由小周进行调试。
这一版避免了数据条数较多时的卡顿问题,在上下连续拖拽和展开时做了逐步加载,这是一个重大的升级。
“时间条”从头开始就是黄工写的,可以拖动移动,也可以拖动改变大小。

3、圆形导航:
这个圆形导航黄工写了SVG的环状实现。这个组件我全文reivew了代码,已经基本掌握。
环状实现用的SVG的原生PATH对象,这部分体现出黄工的算法功底。

以下谈谈我的收获:
1、前后端联调涉及大量的数据处理,要熟练地使用ES6语法和lodash库。对我本人来说,以前这方面实战得较少,这次跟小周、小任学了不少语法和技巧。
2、图形算法方面,黄工表现出非常高的开发效率。他对算法很熟,比如将四个数组转化成四个同心圆,并进行均分切割,再得到PATH对象。他对DOM模型很熟,比如手写了可拖拽变换宽度的长方形。文档阅读能力也很强,他读了gojs的英文版的官方文档,才完成了gtree的所有功能。我除了学习他的构建思路,还跟他学到了算法、控制台debugger的一些技巧。
3、对于VUE工程化、同步协作方面,有了一次完整的实践。比如模块化、路由、组件定义的粒度、VUEX、env环境变量的使用。
4、对后端接口调试有了比较完整的认识。比如HOST切换、数据异常时的一般呈现、数据前端加密、axios的封装等。


接下来的研发想法:
1、重点研发一下SVG图形写法(简单的用原生,复杂的用框架)。争取能自如地实现SVG图形化。
2、总结一下lodash的各种用法,尤其是跟日常工作相关的技法。
3、建议使用postman用到开发中,后端测试完样例,再交给前端,可较大提升前后端协同能力。


查看更多...

分类:开发心得 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1130

某大屏展示项目中,要实现“点击乡级区划,显示出相应的数据”,

最终效果,链接:http://258754.cn/2020/guidong/demo.html

 

经过几天的学习,解决了一些疑难问题,特汇总如下以供参考:

 

 

难点 解决方法 参考文章或链接
echarts地理图的基础实现-基于geojson 参考了百度官方示例-香港地图 https://echarts.apache.org/examples/zh/editor.html?c=map-HK
外框发光效果实现 geo--itemStyle  
得到县一级的geojson数据 很多方法得到,本处给出一个很方便的工具 https://gallery.echartsjs.com/editor.html?c=x4snrWXFGe
网上公开的geojson数据,免费只到县一级,没有乡镇一级地图

1、自己手工绘制,比较粗糙,边界不准

2、找到了精确边界数据的购买渠道,很便宜

geojson.io这个网站可以手工绘制区块
买到的 geojson数据比较旧,今年度新的区划已经发生了合并。

使用mapshaper.org提供的工具,对区划进行了合并,完美解决了问题。

 

合并操作及控制台语法花了点时间。

工具:mapshaper.org

 

解析贴:

https://segmentfault.com/q/1010000013001601

同一页面展示多个图表 vue组件将地图封装了一下 查看本文源码

 

解决了以上主要问题,绘制类似地图,就只剩一些细节问题了。

 

 

本文同时发布到两处:

本人博客:http://www.contactu.cn

知乎专栏《低水平前端》:https://zhuanlan.zhihu.com/c_1040198727197237248

Tags: echart geojson

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2615

 我刚咨询了阿里云客服:

一个阿里云帐号,只能对应一个备案主体。

可以用邮箱做为主ID来注册阿里云帐号。也就是说,对于那种一个管理员管理多个备案的情况,可以用一个手机、多个邮箱组合,来注册多个阿里云帐号,进而达到管理多个备案主体的目标。

分类:开发心得 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2105

SVG制作不规则链接热点的最简版演示

一朋友要做一个“战国地图”,不会做“不规则热点”。我给他做了这个最简版演示。SVG是我用ps描的,很粗略。响应用的是vue.js,其实用jquery也是一样的。

这就是个最简演示,其它常用技术就不解释了。

演示地址 :
http://www.contactu.cn/2016/svg/qg.html

查看更多...

分类:前端研究 | 固定链接 | 评论: 2 | 引用: 0 | 查看次数: 7308