标签：前端开发
共 64 篇文章
开发一个基于uni-app的imgcook DSL
最近看到了阿里的前端智能化的实践：imgcook 由设计稿一键智能生成代码的大厨，由设计稿直接生成前端代码，试用了一下，比zeplin和蓝湖做的更进一步，可以直接集成到项目开发的过程中。但发现一个问题，imgcook官方支持的DSL并不多，我们团队是使用Uni-app做跨端开发的，希望能将设计稿直接生成符合uni-app的代码，但官方没有，找了一个其他开发者贡献的，也没有找到合适的，于是自己动手写(组装)了一个。
继续阅读使用Husky管理项目的Git Hooks（以配置Uni-app的ESLint和Commit Lint为例）
Git目前是毫无争议的项目版本管理的王者，而前端的项目大了之后我们通常需要利用一些Git Hooks来保证项目的质量。包括但不限于：
- eslint
- tslint
- 单元测试
- E2E测试
- style lint
- commit lint
- others checks
有的同学可能要说，没有这些项目质量也会很好，是的，一般这么说的，要么项目小，要么团队人少。如果你的项目人数>30，又是多分支开发的话，就会大概率需要这玩意。
继续阅读pm2 是怎样处理端口冲突的？
使用pm2在本地启动了2个项目，2个项目都是使用了3000的端口，发现2个项目都启起来了。这是什么黑科技啊？
定位一下3000端口
先定位了一下3000端口的占用情况。
lsof -i tcp:3000
结果：
pm2 环境变量不生效的解决方法
pm2 设置环境变量有2种方法。
方法一
NODE_ENV=XXXXX pm2 XXXX
方法二
使用一个单独的配置文件，可以参考官网
https://pm2.keymetrics.io/docs/usage/environment/
如：
pm2 start ecosystem.config.js --env productionXcode 升级 React Native Unknown argument type '__attribute__' in method 解决方案
最近MacOS系统更新，顺便把XCode的版本也进行了升级，但升级之后出现了错误：
[RCTModuleMethod.mm:376] Unknown argument type '__attribute__' in method -[RCTLinkingManager getInitialURL:reject:]. Extend RCTConvert to support this type.使用 box-shadow 代替 border
在前端开发中给一个 div 添加边框，一般是使用border属性。
如下：
<div class="box">
</div>
CSS
.box {
background: blue;
width: 100px;
height: 100px;
border: 3px solid red;
}Momentjs 中无法更改 locale 解决方法
Moment.js 是前端中一个非常强大的处理日期时间的库。有多强大？以致于每次引用它的时候都要考虑一下到底是不是需要一个这么重的库引用进来。而最近一个项目中用到了多语言的日期格式，需要将日期格式化成当地的日期显示格式，比如日本的金耀日、月耀日等等。
开始直接使用了Moment.js的locale函数
修改 HTML5 中 video 样式
前几天收到一个需求，要实现一个背景视频播放的效果，在网上找了几个解决方案。
video.js
这是一起封装非常好的JS库了，可以实现非常棒的效果，一个效果图：
Bootstrap 4 中 hidden-* 和 visible-* 类都去哪了？
之前使用过一个CMS开发过后台系统，使用了 Bootstrap3，里面有好个非常好用的css类 hidden-* 和 visible-*，可以方便地实现响应式。最近帮朋友改一个基于 Bootstrap 4 开发的系统，却发现找不到这两个好用的类啦。后来仔细看了一下，发现在 Bootstrap 4 中，这2个类前缀已经被移除了。
网页调试控制台注入jQuery
最近调试一个React写的网站，想在控制台进行DOM操作。虽然目前浏览器已经原生支持了querySlector，但还是不如使用jQuery方便，由于项目本身并未引入jQuery，在控制台中调试还遇到了一点困难。方法总比困难多，找了一个办法在控制台成功注入了jQuery。