前端常见库-框架-工具

框架

• Vue.js：https://cn.vuejs.org/

• React：https://reactjs.org/

• Angular：https://angular.cn/

• AngularJS：https://angularjs.org/

• Koa：https://koa.bootcss.com/

基于 Node.js 平台的下一代 Web 开发框架。

• Express：http://www.expressjs.com.cn/

基于 Node.js 平台，快速、开放、极简的 Web 开发框架。

• Egg：https://eggjs.org/zh-cn/

Egg 继承于 Koa。

Koa 是一个非常优秀的框架，然而对于企业级应用来说，它还比较基础。而 Egg 选择了 Koa 作为其基础框架，在它的模型基础上，进一步对它进行了一些增强。

• Electron：https://www.electronjs.cn/

Electron（原名为Atom Shell）是GitHub开发的一个开源js框架。 它允许使用Node.js（作为后端）和Chromium（作为前端）完成桌面GUI应用程序的开发。

也就是说，我们可以用 js 语言开发客户端软件了。其实呢，VS Code 这个客户端软件就是用 js 语言写的。

• Redux：https://www.redux.org.cn/

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。

• ReactNative：https://reactnative.cn/

使用JavaScript编写原生移动应用。

• mpvue：http://mpvue.com/

基于 Vue.js 的小程序开发框架。

UI框架

• Bootstrap：http://www.bootcss.com/

• ElementUI：http://element-cn.eleme.io/

基于 Vue.js 的组件库。

• iView：https://www.iviewui.com/

一套基于 Vue.js 的高质量 UI 组件库。

• Ant Design：https://ant.design

基于 React 的 UI 组件库，主要用于研发企业级中后台产品。官网推出了 Ant Design pro 作为示例，可以看看。

• Ant Design Mobile：https://mobile.ant.design/

一个基于 Preact / React / React Native 的 移动端 UI 组件库。

• Ant Design of Vue：https://vue.ant.design/docs/vue/introduce-cn/

Ant Design 的 Vue 实现，开发和服务于企业级后台产品。

类库

• jQuery：http://jquery.com/

• Zepto.js：https://zeptojs.com/

可以理解成是移动端的 jQuery。

• ECharts：https://echarts.baidu.com/

使用 JavaScript 实现的开源可视化库。

CSS

• Sass：https://sass-lang.com/

Sass 是成熟、稳定、强大的 CSS 扩展语言。入门文档可以看：http://sass.bootcss.com/

• Less：http://lesscss.org/

给 CSS 加点料。入门文档可以看：https://less.bootcss.com/

• Stylus：http://stylus-lang.com/

构建

• NPM：https://www.npmjs.com/

• Yarn：https://yarnpkg.com/zh-Hans/

• Webpack：https://webpack.js.org/

• Gulp：https://www.gulpjs.com.cn/

• Babel：https://babeljs.io/

• ESLint：https://cn.eslint.org/

可组装的JavaScript和JSX检查工具。

• PostCSS：https://www.postcss.com.cn/

用 JavaScript 工具和插件转换 CSS 代码的工具

调试抓包

• whistle：https://wproxy.org/whistle/

代理抓包工具，很好很强大。

• Fiddler：https://www.telerik.com/fiddler

代理抓包工具。

Mock数据

• Easy Mock：https://www.easy-mock.com

编辑器 && IDE

• VS Code：https://code.visualstudio.com/

• Sublime Text：https://www.sublimetext.com/

• WebStorm：https://www.jetbrains.com/webstorm/

• Atom：https://atom.io/

编码规范

• Bootstrap编码规范：https://codeguide.bootcss.com/

• es6编程风格：http://es6.ruanyifeng.com/#docs/style

• Airbnb Javascript Style Guide：https://github.com/airbnb/javascript

静态站点搭建工具

• Hexo：https://hexo.io/zh-cn/

• VuePress：https://www.vuepress.cn/

• GitBook：https://www.gitbook.com/

设计工具

• 墨刀：原型设计工具。网址：https://modao.cc/

• 蓝湖：一款产品文档和设计图的在线协作平台。网址：https://lanhuapp.com

• PxCook（像素大厨）：高效易用的自动标注工具。软件下载链接：https://www.fancynode.com.cn/pxcook

图标

• Font Awesome：http://www.fontawesome.com.cn/

• Iconfont：https://www.iconfont.cn/

• icomoon：https://icomoon.io/

• EasyIcon：https://www.easyicon.net/

• icons8：https://icons8.cn/

• IconStore：https://iconstore.co/

• iconninja：http://www.iconninja.com/

工具

• CanIUse：https://caniuse.com/

浏览器兼容性查询。前端同学必须要知道。

• 国家企业信用信息公示系统：http://www.gsxt.gov.cn

通过这个网站，我们可以查到任何一家公司的基本信息（成立时间、法定代表人等）。如果你在这个网站上没有找到某公司的信息，放心吧，这个公司一定是个骗子。

• ProcessOn：https://www.processon.com/

在线制作流程图。推荐。

• 幕布：https://mubu.com

极简大纲笔记、一键生成思维导图。非常好用。

• JSON格式化：http://www.bejson.com/

• 草料二维码：https://cli.im/

• 短链生成：http://www.sina.lt

• GitHub短网址：https://git.io/

• 图片压缩：https://www.yasuotu.com/

• 在线PS：https://www.photopea.com/

• 图片在线裁剪：https://www.asqql.com/gifc/

• 多数据源IP地址查询：https://haoip.cn/

• Gif添加字幕：http://www.yingjingtu.com/

• Photoshop的投影参数转换为 CSS代码：https://psd2css.mezw.com/

将Photoshop设计文件图层中的混合选项参数快速转换为CSS3代码，以节省前端开发人员的时间和精力。

• Get Emoji：https://emoji.svend.cc/

• 图片转Ascii：http://picascii.com/

• 视频转GIF：https://github.com/vvo/gifify

• OCR文字识别：https://app.xunjiepdf.com/ocr

团队

• 腾讯AlloyTeam：http://www.alloyteam.com/

• 腾讯社交用户体验ISUX：https://isux.tencent.com/

• 淘宝FED | 淘宝前端团队：http://taobaofed.org/

• 阿里巴巴国际UED：http://www.aliued.com/

• 京东 | 凹凸实验室：https://aotu.io/

• 饿了么前端:https://zhuanlan.zhihu.com/ElemeFE

• 百度前端研发部FEX：http://fex.baidu.com/

• 360 | 奇舞团：https://75team.com/

• 知道创宇FED：https://knownsec-fed.com/