路漫漫其修远兮,吾将上下而求索~
此文为转载文章,已获得作者同意
主要是为了帮助大家搜集一下前端开发中要用到的一些东西,打造一个前端开发工具字典,方便大家查阅。
篇幅比较长,先给大家放一张脑图,看看自己的兴趣在哪,或者说自己需要补充哪方面的,可以从右边的导航栏查看,也可以直接打开我做的工具网站查看,分级明显。前端工具集~
技术库
Vue
- vue的官网 - 官网怎么能少
- nuxt - Vue的SSR
- Vue-router - Vue的路由
- Vue CLI - Vue的cli,帮助你迅速搭建自己的vue项目
- Vuex - Vue的状态管理
- VuePress - 能帮助你快速搭建自己的博客
- element-ui - 饿了么出品的UI库,主要用于搭建PC网页
- iView - 另外一款搭建PC网页的UI库,越弄越好了
主要说上面一些,具体的一些vue插件可以从下面这个链接找:
React
- React 官方文档
- React 中文文档
- Mobx 中文文档 - 状态管理,react和vue的都有,但是更多的被用到react中,目前很多公司都用mobx替换了redux
- Redux 中文文档 - 也是react的状态管理
- React Native 文档 - 跨端开发,目前Flutter也比较火,跨端的竞争对手
- ReactNative 学习指南 - 新玩意层出不穷… 对于能持续学习的童鞋,这是个美好的时代
- antd - 蚂蚁开源的react的UI库,用起来很舒服,不亏是用户体验部出的。目前市面上的UI库,我感觉这个说第二,没有敢说第一的吧。
- antd-pro - antd 阿里官方解决方案,拉了代码就可以用,非常方便
小程序
- WePY - 支持组件化的小程序开发框架
- mpvue - 基于 Vue.js 的小程序开发框架,从底层支持 Vue.js 语法和构建工具体系,目前支持多端小程序,如:微信,支付宝,百度
- Taro - 使用 React 的方式开发小程序的框架,同时支持生成多端应用
- chameleon - 一套代码运行多端,一端所见即多端所见
- MPX - 滴滴开源的增强型小程序框架,深度性能优化,支持跨小程序平台开发,完全兼容原生小程序组件
- uni-app - 可以兼容多端小程序,比如支付宝,微信小程序,还可以开发快应用和native
CSS
- PostCSS - 推荐大漠的文章《PostCSS深入学习》,学习完postcss之后,什么sass,less都不需要了
- Hover.css - 很多鼠标 Hover 态的效果,可以给产品学习一下
- Animate.css - CSS的动画库,我们可以把源码弄下来,然后学习一下CSS3的动画
- HINT.css - 一款非常小巧的提示框效果
- hamburgers - 简单的动画库,让 Click(or Tap) 变得美妙
- EnjoyCss - 可以自定义一些 css 样式,然后直接获取代码
跨终端
- Flutter 官方文档 - 目前比较火的跨终端开发方案,感觉会大火
- Flutter 社区中文资源 - 会有很多Flutter的开发资源
- electron - 跨终端开发,可以写桌面应用
Node
- Mongoose - 让 NodeJS 更容易操作 Mongodb 数据库
- koa - 强烈推崇,next洋葱圈的机制非常好用
- pm2 - 是一个带有负载均衡功能的 Node 应用的进程管理器
- supervisor - 监控 Node 代码,自动重启
- socket.io - 预计 Node 的实时框架 聊天室、页游等对实时性有高要求的较适用
- Mocha - Node 里最常用的测试框架
- shelljs - 写 Node 时难免需要用 shell 去操作些神马 shelljs 是基于 Node 的 shell 工具,API极其简单
其他技术库
- webpack - 这个不用说,大家都知道
- velocity.js - 基于 js 的动画库,可以和 jquery 完美结合
- Cleave.js - 用于格式化文本框输入内容的插件
- clipboard.js - 复制内容到剪切板的插件
- hcharts - 兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库
- echarts - 百度维护的图标库
- select2 - 下拉框第三方库,随着越来越多的 ui 库集成下拉菜单之后,这个基本很少用了
- datatables - 表格库
技术博客
大牛博客
- 阮一峰 - ES6 教程写的真的很棒
- 技术胖 - 前端各种免费视频教学
- 张鑫旭 - 成名多年的、高产的前端大湿, CSS猛人
- 翁天信官网 - 一个辍学在家自学的天才少年,各种旅行漂亮的照片,还有他的个人介绍
- 翁天信博客 - 他的官网中可以找到他博客的地址,但是有点不显眼,所以就列出来了
- surmon - 不知道怎么称呼,但是是一个很牛 B 的人,点开博客就知道了
- 廖雪峰 - 有关于 python,JS,git 的教程
- 美团技术团队 - 新美大的技术口碑这些年做的挺好,尤其在 高可用 方面,推荐关注。
- W3Cplus - 大漠(《图解 CSS3》作者)在国内的影响力杠杠的
- 淘宝前端团队 - 内容涵盖 Web 和 Node,要深度有深度,要广度有广度
- 奇舞团博客 - 坚持是最宝贵的,别人的奇舞周刊早已经过百期了
- 大搜车前端 - 文章质量高,尤其是 Node,Vue 方向的
- 百度 FEX - 代表作 FIS、 UEditor、 WebUploader、 KityMinder
- 腾讯全端 AlloyTeam - 腾讯 Web 前端团队
- 酷壳 - CoolShell - 享受编程和技术所带来的快乐,涉及范围:Android , Bash, book, C++,CodeReview, Coding, CSS, Database, Debug, ebook, Game, Go, Google,HTML, IE, Java, Javascript, jQuery, Linux。。。
- 前端开发博客 - 汇集了很多前端有用的东西
搭建博客的工具
- VuePress - 能帮助你快速搭建自己的博客,样式还不算很那看,但是更多的可以用作搭建文档。
- jekyll:将纯文本转化为静态网站和博客。由于环境依赖的问题,所以安装起来可能稍费劲那么一点。
- hexo:快速、简洁且高效的博客框架,照着文档分分钟就可以在本地跑起来。
- Next:是hexo的一个主题。
hexo或者jekyll配合github pages 进行博客的搭建非常方便快捷,这两种方式都有不同的主题,上github上一搜一大片,hexo上手会比较快,自己的博客一开始也是用hexo+next搭建的,后续发现了jekyll比较好的一个主题,所以换成了jekyll,大家可以参考一下。
我的博客:http://www.shiyanping.top/
我自己用的主题:https://github.com/Shiyanping/Shiyanping.github.io
搭建成功后,直接写markdown,然后发布到github,就可以咯。当然还可以使用掘金当做自己的博客。
开发工具
- bootCDN - 各种开源库的 cdn 地址,加快开源库访问速度
- Awesomes.cn - 前端各种资源库,想用的这里说不定都有
- 熊猫图片压缩 - 一个压缩图片的网站,很牛,一次可以压缩70%左右,还不失真,不过不购买的话压缩有限制,一次最多十张,每张有大小限制(忘记多大了,好像是 5M,好像是 10M)
- 淘宝 npm 镜像 - 加快 npm 包下载速度,其实更建议使用nrm,可以切换自己当前网络最快的源
- jquery 插件库 - 各种 jquery 的插件,有的需要花钱,有的不用,花钱也很便宜哦
- 时间戳格式化
- 站长工具 - 里面包含了很多有用的工具,html、css、js 压缩,解压缩。html 转 markdown,IP 地址查询
- JSON 代码高亮
- 草料二维码 - 用于根据链接生成二维码
- cubic-bezier - 用于生成贝塞尔曲线,css中可以有效地使用
- CSS icon - 使用css写的icon,可以减少iconfont和图片所占的大小,其实主要是好玩,可以研究研究怎么写的
- codepen - 在网页上快速写代码,可以免去打开编辑器去敲代码,可以解决电脑上没有 IDE,但是你想写代码的情况(那还写个毛线,?)
- Unicode 编码转换
- RGB 颜色和十六位颜色转化工具
- 石墨文档 - 可以多人协作的文档及表格
- 缩短链接 - 如果你觉得自己的链接太长,可以使用新浪的缩短链接服务,将 url 进行缩短
- 在线图片格式转换
- iconfont - 阿里维护的 iconfont 里面有很多漂亮的 icon
- 自动添加 css 前缀 - 如果没有使用 gulp 或者 webpack 等打包工具的话,为了 css兼容,可以使用这个,css,less,scss 都可以用
- 压缩 js,css,html
- base64 加密解密
- css3 中的阴影生成工具 - 可以让 UI 根据这个去写阴影,后续直接 copy 代码出来使用即可
- 变量起名 - 帮助你解决起名字的尴尬
学习资源
学习文档
- 印记中文 - 各种中文文档,与官方文档同步
- Pro Git - git 各种命令介绍,简单实用
- 前端规范 - 由我自己维护的,主要参考腾讯的,?
- Markdown 教程 - Markdown 语法
- JSDoc - JS 注释中文文档,注释写得好有助于其他人阅读使用
- 前端面试图谱 - 前端知识,有助于复习面试基础知识
学习网站
- web 前端导航 - 由腾讯维护的 web 前端资料库,里面包含各种前端的知识
- 百度前端技术学院
- 慕课网
- 腾讯课堂
- github - 最大的同性交友网站,被微软收购之后用户数有所减少
- FreeCodeCamp - 适合刚学前端的同学学习
- codewars - 学习语言的好网站,代码战争,听着名字就很叼
- 优达学城
- MDN - 无数的资源在等着你探索,追标准和新特性肯定得重点关注的网站。
- 极客时间 - 知识付费。较热门的方向都有非常干货的课程,目前大多数的课程不太适合小白,但是非常适合有经验的程序员进阶。
推荐书籍
- JavaScript 设计模式与开发实践 - 全面涵盖 JavaScript 设计模式,设计原则,对深入了解设计模式有帮助
- Vue.js 实战 - 示例比较多,是 iView 作者写的
- 你不知道的 JavaScript(上卷) - 内容写的很精髓,内容和书名很搭配
- 你不知道的 JavaScript(中卷) - 精髓二连击
- 你不知道的 JavaScript(下卷) - 精髓三连击
- CSS 揭秘 - 讲 CSS 使用技巧
- ES6 标准入门(第 3 版)
- 编写可维护的 JavaScript - 红皮书作者写的,主要是 JS 编码规范,代码风格,写出一些让后续开发者能看懂的代码
- 学习 JavaScript 数据结构与算法 第 2 版 - JS 常用的数据结构和算法,不是很深入,但是针对前端的同学够了
- 图解 HTTP - 让前端人员了解 HTTP 请求,方便和后端沟通
- 高性能 JavaScript
- JavaScript 语言精粹
- JavaScript 框架设计(第 2 版)
- Node.js 实战 - 了解 Node.js,熟悉 node.js 与数据库交互,node.js 程序测试
- SQL 必知必会 - 数据库通用语言从入门到精通
- 用户体验要素:以用户为中心的产品设计
- 深入 React 技术栈
- 设计模式:可复用面向对象软件的基础
辅助工具/软件
chrome插件
- Adblock Plus:屏蔽广告专用,可以设置白名单
- JSONView:自动识别 JSON 文件进行格式化
- Wappalyzer:查看当前网页使用了哪些技术,干什么的慢慢体会吧
- WEB 前端助手:包括 JSON 格式化、二维码生成与解码、信息编解码、代码压缩、美化、页面取色、Markdown 与 HTML互转、网页转为图片等,功能很强大,很适合前端
- Octotree:可以在 github 上可以生成侧边栏更易查看
- Wide Github:会将 github 内容区域变宽
- 掘金:新打开的 tab 页会出现掘金的首页,有助于学习哦
- Vue.js devtools:用于调试 vue
- React Developer Tools:用于调试 react
- CSSViewer:打开后可以吸取除 google 以外网页的元素样式
- Vimium:打开后在网页上使用 vim,F 打开
- Axure RP Extension for Chrome:前端在 chrome 上看 Axure 导出的文件
- Postman:模拟请求,很强大,还可以敲代码
Mac工具
Mac上有用的工具太多了,而且Mac对于开发人员来说真的是非常友好,如果有条件的话,我觉得开发还是用Mac爽,在这里就不给大家赘述Mac工具了,给大家推荐个网站,Mac的软件基本都能下载到。xclient
VSCode 插件
- Prettier - Code formatter
代码美化,快捷键(shift+option+F),可以格式化很多格式的文件,团队的话建议在项目的目录下使用.prettierrc
进行 prettier 的配置,.prettierrc
的优先级比编辑器的设置更高,可以让团队保持统一的代码风格,最好再配合 eslint 使用。 - npm
npm 插件可以检查 package.json 中所定义的 npm 模块与实际安装的 npm 模块是否一致。 - package.json 中定义了,但是实际未安装
- package.json 中未定义,但是实际安装了
- package.json 中定义的版本与实际安装的版本不一致
- npm Intellisense
npm Intellisense 插件会为 package.json 建立索引,这样当我 require 某个模块时,它可以自动补全。
- Git History
查看 git log - GitLens
显示文件最近的 commit 和作者,显示当前行 commit 信息 - ESLint
ESLint 插件,这个不必多讲,配合自己的项目的 eslint 使用 - Vetur
目前比较好的 Vue 语法高亮 - Bracket Pair Colorizer
可以为代码中的匹配的括号自动着色,以不同的颜色进行区分,这样我们可以轻易地辨别某个代码块的开始与结束。
- Auto Close Tag
插件的功能非常简单,它可以自动补全 HTML/XML 的关闭标签
- Auto Import
自动去查找、分析、然后提供代码补全。对于 TypeScript 和 TSX,可以适用
- Auto Rename Tag
修改 HTML 标签时,自动修改匹配的标签
- Code Spell Checker
帮助你检查代码中的拼写错误
- Code Runner
可以在编辑器中选中部分代码段,然后运行(支持大量语言,包括 Node),但是极少数情况运行出来的结果会和浏览器不同,如果你在编辑器中使用这个功能之后,觉得答案和你想的不同,要在浏览器中再测试一下。 - Debugger for Chrome
配合 chrome 进行 debug - jQuery Code Snippets
jquery 快捷提示,安装了之后输入 jq 就会看到很多提醒,对目前还在用 jq 的小伙伴有帮助
- language-stylus
支持 stylus - Material Icon Theme
icon 样式,很好看 - vscode-element-helper
可以快速提示 element-ui
- open in browser
在浏览器运行当前页面,快捷键(option+B) - Output Colorizer
控制台输出着色
- Panda Theme
一个主题,比较护眼,熊猫主题 - Path Intellisense
路径自动补充
- SVG Viewer
可以在编辑器中查看 svg 图片
持续更新中