1.进入阿里巴巴矢量图标库: 2.新建项目 3.前缀注意不要跟element-ui自带的icon(el-icon)重名就ok 4.创建完成后,去阿里选自己要使用的图标,加入购物车                                                                                                                                                                

前言 阿里无线前端团队在过去一年对所负责业务进行了全面的性能优化.以下是我们根据实际经验总结的优化指南,希望对大家有所帮助. 第一部分仅包括数据加载期优化. 图片控制 对于网页特别是电商类页面来说,图片通常会占据了大量的视觉空间,是页面中最为重要的展现内容,并且占据网页传输字节的大部分.因此,对图片的优化是我们性能优化的重点. 启用WebP WebP是一种支持有损压缩和无损压缩的图片文件格式,派生自视频编码格式 VP8.根据 Google 官方的数据,无损压缩后的 WebP 比 PNG 文件少了

webpack-qc-iconfont-plugin webpack-qc-iconfont-plugin是一个webpack插件,可以轻松地帮你将阿里icon的图标项目下载至本地 开发初衷 之前已经发布过gulp的版本了,但是在webpack流行的时代,我还是觉得webpack插件版还是很有必有的,于是在我加班加点的研究下,我终于实现了webpack插件版 为啥子要加班加点呢,因为我很懒,到目前为止都没有完整的看过官方的文档,所以基础很差,因此连更半夜的才把这个插件完成了,请原谅我的懒,真的,

有很多小伙伴们特别关心面试Web前端开发工程师时,面试官都会问哪些问题.今天小卓把收集来的"阿里Web前端开发面试题"整理贴出来分享给大家伙看看,赶紧收藏起来做准备吧~~ 一.CSS盒子模型,绝对定位和相对定位 1)清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 2)如何保持浮层水平垂直居中 3)position 和 display 的取值和各自的意思和用法 4)样式的层级关系,选择器优先级,样式冲突,以及抽离样式模块怎么写,说出思路,有无实践经验 二.JavaScript基础

RAP2-DELOS 开源社区版本 (后端API服务器) 项目地址:https://github.com/thx/rap2-delos RAP2是在RAP1基础上重做的新项目,它包含两个组件(对应两个Github Repository). rap2-delos: 后端数据API服务器,基于Koa + MySQLlink rap2-dolores: 前端静态资源,基于React link Resources Official Site 官网: rap2.taobao.org 钉钉群ID: 1178

一.静态文件依赖 学习django的时候发现静态文件(css,js等)不能只在html中引入,还要在项目的settings中设置,否则会报以下错误 [11/Sep/2018 03:18:15] "GET /static/js/index.js HTTP/1.1" 404 1646 [11/Sep/2018 03:18:15] "GET /static/js/lib/vue/dist/vue.js HTTP/1.1" 404 1679 [11/Sep/2018 03:

原谅我copy过来的,但是这个条理很清楚很有借鉴意义 前言 以下是从公众号的文章中获取到的一位阿里的前端架构师整理的前端架构p7的技能图谱,当然不是最完整.最系统的,所以之后我会一直维护更新这里的内容,并且维护在个人前端小册的各个小册中,欢迎大家关注最新的文档更新. 我的语雀前端小册链接:www.yuque.com/robinson/fe… 重点是:免费 + 不断更新 + 可以微信交流 . 宗旨:从小白到大师,我们慢慢来. 技术架构考核范围 vue.js react.js nodejs 微信 前

图标选购网址:http://www.iconfont.cn/ 1.从阿里妈妈网站选购好小图标,加入购物车,下载好文件: 2.把字体文件放入字体(font)文件夹(tff)(woff),(eot) 3.样式表里面引入以下内容(../font 这个是根据相对路径做出相应的选择) @font-face {font-family: 'iconfont';     src: url('../font/iconfont.eot'); /* IE9*/     src: url('../font/iconfo

项目中遇到利用阿里OSS上传文件,线上很多示例用到了各种SDK,却没有看到OSS BrowserJS-SDK相关示例,鉴于脑子不好使,记一下. 封装upload相关组件  使用npm安装SDK的开发包 npm install ali-oss 在组件中实例化SDK并使用  上述四个参数可通过调用后台接口获取,若前端直接封装,容易暴露. 前往(控制台-对象存储OSS-基本设置)配置CORS  (详见官方文档) methods中封装相关上传方法 export default { name:'al

为何要这样做:减轻后端数据库压力(个人觉得于前端没啥用,谁返回来都行) 代码部分: <template> <div class="upLoad"> <div class="file">上传图片 <input type="file" :accept="typeArr" @change="upload($event)"> </div> </div

Dawn 取「黎明.破晓」之意,原为「阿里云·业务运营团队」内部的前端构建和工程化工具,现已完全开源.它通过pipeline 和 middleware 将开发过程抽象为相对固定的阶段和有限的操作,简化并统一了开发人员的日常构建与开发相关的工作.   特点 采用中间件技术,封装常用功能,易于扩展,方便重用 支持 pipeline 让多个 task 协同完成构建任务 简单.一致的命令行接口,易于开发人员使用 支持基于「中心服务」管理中间件和工程模板 支持搭建私有中心服务,并统一下发构建规则,易于团队

由于微信小程序不支持ttf字体,只支持base64的问题,需要把从图库下载下来的字体文件中的ttf文件转码为base64后使用如图 需将图中箭头所指的字体文件通过 https://transfonter.org/    进行base64 处理 将经过base64处理后的文件下载并解压后取得stylesheet.css文件并在小程序的目录下新建iconfont.wxss文件讲stylesheet.css中的内容全部复制下来粘贴进新建好的iconfont.wxss文件中 然后将阿里图库下载下来的文件

注意点: 1. 存储为svg格式(建议使用存储为svg,不要使用导出为svg)2. 图像位置:链接(注意哦,不要点嵌入和保留编辑功能)---确定3. AI里面选中图形,点对象-路径-轮廓化描边 软件编辑要点: 从网站下down下来,记得下  Ai  格式. 使用Ai 进行编辑.( 别用PS软件编辑 ) 否则矢量图图片会被污染,编辑后 再上传 Icon 就会出现下图上传空文件的现象.

一.引入页面几种方法   1.IFrame引入,看看下面的代码    <iframe   frameborder=0   border=0   width=300   height=300   src="b.htm" mce_src="b.htm"></iframe>  这种高度需要限制是个问题,但经过我不懈努力终于找到了iframe自适应高度方法: <iframe name="lanrentuku" src=&qu

第一次写博客,如有错误请多多指教. 先上代码吧: ossUpload = function (file, fun, funParameter) { //第一此请求后台服务器获取认证请求 $.ajax({ url: "/UEditor/GetSecurityToken", type: "post", success: function (data) { var access = JSON.parse(data); console.log(access); let ho

1.1什么是CSS 翻译为“层叠样式表”或者“级联样式表”, 简称样式表. 1.2CSS的主要作用 它主要是用来给HTML网页来设置外观或者样式 外观或者样式:HTML网页中的文字的大小.颜色.字体,网页的背景颜色.背景图片! 1.3书写CSS的语法规则 Key values Key values ,h1  {color:red; fornt-size:14px;} 选择器 声明 声明 l  Css代码是由选择器和一对括号组成 l  大括号里面是由一条一条的声明语句组成 l  每一条语句都要使用

进入到阿里的图标库网站,里面有上百万种icon,https://www.iconfont.cn,需要注册一个帐号,然后进入到这个页面,在这里点击右下角的带加号的图标,创建一个新的项目,名称与你要使用图标的前端开发项目同名.然后转到图标页去点选图标,加入购物车,选好确定后,购物车中的图标将全部加入到创建的项目中. 然后选择一种使用方式,三种格式,第一种一般不选,第二种也有与第一种相同的一个缺点,就是只能是单色,第三种可以保持本色,具体网站上有使用说明,选好后再下载到本地. 第二种即font-cla

---恢复内容开始--- 今天是18年的国庆,趁着国庆的这股开心劲儿,开开心心的写点东西: 第一篇:关于如何将icon图标库引入自己的项目(此方法Taro,微信小程序,支付宝小程序等均适用,不会存在不会编译错误) 栗子是我常用的----阿里矢量图 具体引入项目栗子是:最近正在在做的Taro项目 栗子如下,如果你是其他项目,本人测试过微信小程序,支付宝小程序,能正常用. 第一步:先了解项目的框架结构,下图 是Taro项目的框架目录(红色框出的文件就是我们引入的关键(下文会讲文件的创建方法)了,这是

蒲公英 · JELLY技术周刊 Vol.29 前端智能化是指借助于 AI 和机器学习的能力拓展前端,使其拥有一些超出现阶段前端能力的特性,这将是未来前端方向中一场重要的变革.目前各家互联网厂商都有自己的项目朝着这个大方向不断实践,对未来发起挑战,而阿里就是这其中之一,也给大家留下了许多令人印象深刻的产品-- 登高远眺 天高地迥,觉宇宙之无穷 前端框架 解析 JSX 的全新机制 React 17 中引入了新的 JSX 语法转换机制,好处除了书写 JSX 时不再需要提前引入 React 对象外,还做

  我的一个朋友在前端耕耘一段时间,也在网上进行了高度培训学习,最近一段时间他打算跳槽去阿里面试前端P6开发岗位,结果被痛虐了一回,估计从此以后会给他留下不可磨灭的阴影啊 真是十年生死两茫茫,一鲁代码,到天亮 哈哈:接下来是被痛虐面试的问题,也是根据他面试完成后的回忆总结,各位看官来说说你们的想法:1.html document 是干嘛的? 2.html 5 哪些操作可以 SEO优化 3.css 盒模型有哪些及区别 content-box border-box padding-box 4.重排重

我在阿里这仨月 Alibaba 试用期是三个月,转眼三个月过去了,也到了转正述职的时间.回想这三个月做过的事情,很多很杂,但还是有重点. 本文谈一谈工作中遇到的各种场景,需要用到的一些前端知识,以及我对前端进阶学习的一点思考. 一.漫谈 刚入职不久阿里巴巴就上市了,这是件振奋人心的事情.实际上在正式入职之前,我就已经在淘宝UED实习了三个月,所以这边的工作环境和开发流程都比较熟悉了. 在工作中,遇到了很多这样的场景: 1. 线上 bug 处理 运营:“嘿,小胡子,有客户反馈这个提交表单的页面中,