DE编译运行vue项目:
npm run serve
报如下错误:
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
解决方法:
1.打开cmd
2.执行以下命令修改node相关配置
setx NODE_OPTIONS --max_old_space_size=10240
3.重启IDE,重新编译运行vue项目。
概是18年的时候,那时候我还是一个很稚嫩的小前端,我记得很深刻,当前GitHub上有个叫做Screenshot-to-code的开源项目冲榜贼猛,短短几天就获得了好几千的star,这个项目主要表达的是在未来三年内,深度学习将改变前端开发。它将会根据设计图自动生成对应的html,css代码,从而拉低开发软件的门槛。
也就是说我们前端以后不需要再画静态了!
项目地址:https://github.com/emilwallner/Screenshot-to-code
Screenshot-to-code-in-Keras 是 Emil Wallner 实现的一个可根据设计草图生成基本 HTML 和 CSS 网站的神经网络。以下是该过程的简要概述:
1)给训练好的神经网络提供设计图像
2)神经网络将图片转化为 HTML 标记语言
3)渲染输出
Emil Wallner 分三步从易到难构建三个不同的模型:
这里只做简单介绍,感兴趣的朋友可以在头条搜索中搜 Screenshot-to-code 即可看到更多详细内容
前几天体验了一下蓝湖内测的设计图转代码功能,真的挺震撼的。废话不多说,大家请看视频!
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
(第二张示例图中标签文字溢出并不是bug,因为谷歌浏览器最小文字只支持12px)
从上面视频可以看到,UI小姐姐只需要把画好的项目设计图放上去,我们前端就可以直接生成完整的静态页。目前来看主要支持vue和普通的html页面。css倒是兼容得非常好,less和sass都支持不过这毕竟只是一个内测版,相信等正式推出时应该是可以兼容到react等主流框架的。
感觉这对我们前端来说其实还是利大于弊,因为前端最主要的交互和逻辑未来五年内应该是不可能像静态一样可以生成,那么设计图转代码的功能的推出其实还是可以在一定程度上减轻我们的工作负担。
因为画静态页对大部分前端来说都是枯燥无味的工作。如果以后都不用画静态的画,那么我们就可以有空闲时间来学习新技术,新知识。比如现在挺火的云函数啥的,学学总没有坏处。或者学一门后端语言等都可以不断完善自己的技术栈,提高自己的行业竞争力。
篇文章主要给大家介绍一下在html页面中如何让单行文本以及多行文本溢出显示省略号(…)。
当我们在编写网页代码的时候,肯定会遇到过文字列表中的文字太多超出了我们所写的宽度,导致文本换行或者文本超出了界限,这时有人就会说了,让后台限制一下调用的文字个数不就行了吗,但是我们在做响应式的时候由于是百分比布局,无法计算一行会显示多少个文字,所以这并不是一个好的解决方案,我们使用css3就可以轻松的实现,而且简单好用。
核心css语句:
1、overflow:hidden; (顾名思义超出限定的宽度就隐藏内容)
2、white-space: nowrap; (设置文字在一行显示不能换行)
3、text-overflow: ellipsis;(规定当文本溢出时显示省略符号来代表被修剪的文本)
我们具体的代码效果演示就如下图所示:(设置ul宽度为300,超出的文字内容让其自动隐藏并显示...)
我们在编写网页代码时,有时候新闻列表页中新闻简介可能有一行或者多行,我们要如何处理这种问题,让其超出多行后还能显示省略号呢,不要慌,我们css还是很强大的,已经给我们提供了方法来处理这种问题了。
核心css语句:
1、-webkit-line-clamp:2; (用来限制在一个块元素显示的文本的行数,2表示最多显示2行。 为了实现该效果,它需要组合其他的WebKit属性)
2、display: -webkit-box; (和1结合使用,将对象作为弹性伸缩盒子模型显示 )
3、-webkit-box-orient:vertical;( 和1结合使用 ,设置或检索伸缩盒对象的子元素的排列方式 。)
4、overflow:hidden; (顾名思义超出限定的宽度就隐藏内容)
5、text-overflow: ellipsis;(规定当文本溢出时显示省略符号来代表被修剪的文本)
我们具体的代码效果演示就如下图所示:(设置段落p宽度为300,超出2行的文字内容让其自动隐藏并显示...)
好了,本篇文章就给大家说到这里,大家自己下来可以自己找例子写一下试一试到底能不能实现我们所说的效果,以后在写页面的的遇到这种问题的时候直接复制使用即可。
每日金句:必须从过去的错误学习教训而非依赖过去的成功。喜欢我的文章的小伙伴记得关注一下哦,每天将为你更新最新知识。
*请认真填写需求信息,我们会在24小时内与您取得联系。