我用了这20多个珍藏de前端轮子,开发效率瞬间提升99%

1,278 阅读10分钟

前言

大家好,我是虚竹,今天给大家分享一下我做前端开发多年,参与过大大小小的产品或项目实战,常常会用到这些私藏干货(前端好轮子)。作为新生代农民工,手上不得不备一些造好的优质前端轮子,为了让工作事半功倍,提升开发效率,高效完成任务,还能获得领导或上司的赏识,非常棒,收藏等会学会加薪。

3.png

开发工具 IDE

1、 VS Code

微软推出的免费、功能强大的一款 IDE 编辑器

Visual Studio Code(简称 VS Code)是一款由微软开发且跨平台的免费源代码编辑器。该软件支持语法高亮、代码自动补全(又称 IntelliSense)、代码重构、查看定义功能,并且内置了命令行工具和 Git 版本控制系统。用户可以更改主题和键盘快捷方式实现个性化设置,也可以通过内置的扩展程序商店安装扩展以拓展软件功能。

官网地址:code.visualstudio.com/

下载免费版:code.visualstudio.com/download

2、Sublime Text 3

Sublime Text 是一款流行的代码编辑器。Sublime Text 具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和工具栏。Sublime Text 的主要功能包括:拼写检查,书签,完整的 Python API ,Goto 功能,即时项目切换,多选择,多窗口等等。Sublime Text 是一个跨平台的编辑器,同时支持 Windows、Linux、Mac OS X 等操作系统。

官网地址:www.sublimetext.com/

下载免费版:www.sublimetext.com/3

3、 WebStorm

WebStorm 是一个适用于 JavaScript 和相关技术的集成开发环境。类似于其他 JetBrains IDE,它也会使您的开发体验更有趣,自动执行常规工作并帮助您轻松处理复杂任务。

官网地址:www.jetbrains.com/zh-cn/webst…

下载试用版:www.jetbrains.com/zh-cn/webst…

准备环境

  • 开发环境:Windows 10,Mac OS

必备工具之一:Node.js v10.16.0+

Node.js 是一个开源与跨平台的 JavaScript 运行时环境。 它是一个可用于几乎任何项目的流行工具。Node.js 在浏览器外运行 V8 JavaScript 引擎(Google Chrome 的内核)。这使 Node.js 表现得非常出色。

官网地址:nodejs.org/zh-cn/

基础教程:www.runoob.com/nodejs/node…

入门教程:nodejs.cn/learn

必备工具之二:Git

Git 是一个开源的分布式版本控制系统,用以有效、高速的处理从很小到非常大的项目版本管理。

官网地址:git-scm.com/

入门教程:www.runoob.com/git/git-tut…

  • 测试/生产环境:CentOS 7/8

必备 web 服务器:nginx v1.20.0+

Nginx(engine x) 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器。在高连接并发的情况下,Nginx是Apache服务器不错的替代品。

安装配置:www.runoob.com/linux/nginx…

基础教程:juejin.cn/post/700734…

前端框架

1、Vue(墙裂推荐)

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

官网地址:cn.vuejs.org/

Vue 2.x 入门:cn.vuejs.org/v2/guide/

Vue 3.x 入门:v3.cn.vuejs.org/guide/intro…

Vue 基础教程:www.runoob.com/vue2/vue-tu…

实战教程:github.com/jackchen012…

2、React(墙裂推荐)

React 是一个用于构建用户界面的 JAVASCRIPT 库。React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。

官网地址:react.docschina.org/

入门教程:react.docschina.org/tutorial/tu…

基础教程:www.runoob.com/react/react…

实战教程:github.com/jackchen012…

3、Angular(不推荐)

Angular 是一个应用设计框架与开发平台,用于创建高效、复杂、精致的单页面应用。本人不推荐使用 AngularJS,其开发成本与学习难度较高,且 AngularJS 不适合单兵作战

官网地址:angular.cn/

入门教程:angular.cn/docs

基础教程:www.runoob.com/angularjs/a…

4、Jquery(历史遗留)

jQuery 是一个高效、精简且功能丰富的 JavaScript 库。它通过一个易于使用、可以跨多种浏览器工作的 API,使HTML 文档遍历和操作、事件处理、动画和 Ajax 等事情变得更加简单。jQuery 结合了多功能性和可扩展性,改变了数百万人编写 JavaScript 的方式。

官网地址:jquery.com/

入门教程:www.runoob.com/jquery/jque…

服务端渲染框架

1、Nuxt.js

Nuxt.js 是一个基于 Vue.js 的通用应用框架,一个用于 Vue.js 开发服务端渲染应用的一站式解决方案。它的优点是将原来几个配置文件要完成的内容,都整合在了一个 nuxt.config.js,封装与扩展性完美的契合。

简单说nuxtjs项目,它其实就是一个 vue 的项目融合一个 node.js server 项目,这里 node 服务有两个作用,第一点是代替浏览器的工作,笼统理解就是在 created 时的请求数据和页面渲染,第二点是当作静态文件服务器,把渲染好的页面返回给用户。

官网地址:nuxtjs.org/

入门教程:www.nuxtjs.cn/guide

2、Next.js

Next.js 为您提供生产环境所需的所有功能以及最佳的开发体验:包括静态及服务器端融合渲染、 支持 TypeScript、智能化打包、 路由预取等功能 无需任何配置。

官网地址:nextjs.org/

入门教程:www.nextjs.cn/

前端自动化工具

1、webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

官网地址:www.webpackjs.com/

2、gulp

Gulp.js 是一个前端构建工具,与 Grunt.js 相比,Gulp.js 无需写一大堆繁杂的配置参数,API 也非常简单,学习起来很容易,而且 Gulp.js 使用的是 nodejs 中 stream 来读取和操作数据,其速度更快。如果你还没有使用过前端构建工具,或者觉得 Grunt.js 太难用的话,那就尝试一下 gulp 吧。

官网地址:www.gulpjs.com.cn/

3、grunt

Grunt 是基于 Node.js 的项目构建工具。它可以自动运行你所设定的任务。Grunt 拥有数量庞大的插件,几乎任何你所要做的事情都可以用 Grunt 实现。

官网地址:www.gruntjs.net/

基于 Vue UI 组件库

PC端

1、Element 饿了么前端团队开发

2、iView 视图更新科技公司开发

3、Ant Design 阿里蚂蚁金服前端团队开发

移动端

1、Vant 有赞前端团队开发

2、NutUi 京东前端团队开发

基于 React UI 组件库

Ant Design 系列 蚂蚁体验科技团队开发

微信小程序 UI 组件库

1、vant-weapp

Vant Weapp 是一套轻量、可靠的微信小程序 UI 组件库

youzan.github.io/vant-weapp/…

2、iview-weapp

iView Weapp 是一套高质量的微信小程序 UI 组件库

weapp.iviewui.com/

3、weui 

WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。

weui.io/

响应式框架

Bootstrap 是目前最受欢迎的前端框架。它是基于 HTML、CSS、JAVASCRIPT的集合,它简洁灵活,使得 Web 开发更加快捷。用于开发响应式布局、移动设备优先的 WEB 项目。

www.bootcss.com/

后台管理框架

1、vue-element-admin

github 源码地址:github.com/PanJiaChen/…

演示地址:panjiachen.github.io/vue-element…

2、iview-admin

github 源码地址:github.com/iview/iview…

演示地址:admin.iviewui.com/login

3、d2-admin

github 源码地址:github.com/d2-projects…

演示地址:d2.pub/d2-admin/pr…

4、vue-manage-system

github 源码地址:github.com/lin-xin/vue…

演示地址:[lin-xin.gitee.io/example/wor…](lin-xin.gitee.io/example/wor…)

5、react ant-design pro

github 源码地址:github.com/ant-design/…

演示地址:preview.pro.ant.design/

常用 JS 函数库

1、lodashjs

www.lodashjs.com/

2、时间操作

moment

momentjs.cn/

dayjs

github.com/iamkun/dayj…

timeago.js

github.com/hustcc/time…

3、rx.js 响应式异步编程库,在vue中需引入 vue-rx

vue-rx

github.com/vuejs/vue-r…

常用前端插件

1、工具库函数

js-utils

github.com/HEJIN2016/j…

2、富文本编辑器

ushare-editor

github.com/HEJIN2016/u…

3、轮播插件

swiper

www.swiper.com.cn/

4、数据可视化

  • echarts

echarts.apache.org/zh/index.ht…

  • vcharts

v-charts.js.org/#/

  • G2

g2.antv.vision/zh/docs/man…

  • D3

d3js.org/

  • highcharts

www.highcharts.com.cn/

  • vueDataV

github.com/jackchen012…

5、http 请求

axios

www.kancloud.cn/yunye/axios…

6、图片裁切

cropperjs

github.com/fengyuanche…

vue-cropper

github.com/xyxiao001/v…

7、html 转 canvas 生成图片

html2canvas

html2canvas.hertzen.com/

8、cookie 操作

js-cookie

github.com/js-cookie/j…

9、页面加载进度条

nprogress

github.com/rstacruz/np…

10、移动端适配

px 转 rem 或者 vw、vh postcss

blog.csdn.net/ling3695232…

11、数字滚动效果

jquery.countup.js

www.jq22.com/jquery-info…

vue-count-to

github.com/PanJiaChen/…

12、前端加密

crypto-js

github.com/brix/crypto…

13、滚动插件

mescroll.js

www.mescroll.com/api.html

better-scroll

github.com/ustbhuangyi…

14、markdown 文本转 html

marked.js

github.com/markedjs/ma…

15、前端生成二维码

qrcodejs

github.com/davidshimjs…

vue-qr

github.com/Binaryify/v…

在线生成二维码

cli.im/

16、防止 xss 攻击

js-xss

github.com/leizongmin/…

17、前端多语言切换

i18n-node

github.com/mashpie/i18…

vue-i18n

github.com/kazupon/vue…

18、移动端 click 点击事件优化

fastclick

github.com/ftlabs/fast…

19、满屏滚动

fullPage.js

github.com/alvarotrigo…

20、上传文件、文件夹、分片、断点

vue-uploader

github.com/simple-uplo…

21、图片懒加载

vue-lazyload

github.com/hilongjw/vu…

22、复制文本到剪贴板

clipboard.js

github.com/zenorocha/c…

vue-clipboard2

github.com/Inndy/vue-c…

23、五级行政区域数据

Administrative-divisions-of-China

github.com/jackchen012…

24、拖拽

vue-draggable

www.itxst.com/vue-draggab…

前端动画库

1、Animate.css

Animate.css 是一个使用 CSS3 的 animation 制作的动画效果的 CSS 集合,里面预设了很多种常用的动画,且使用非常简单。

官网地址:animate.style/

2、Animejs

Anime.js 是一个轻量的JavaScript 动画库, 拥有简单而强大的API。可对 CSS 属性、 SVG、 DOM 和 JavaScript 对象进行动画。

官网地址:www.animejs.cn/

NodeJS 服务框架

  • koa2(墙裂推荐)

Koa 是一个新的 web 框架,由 Express 幕后的原班人马打造, 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。 通过利用 async 函数,Koa 帮你丢弃回调函数,并有力地增强错误处理。 Koa 并没有捆绑任何中间件, 而是提供了一套优雅的方法,帮助您快速而愉快地编写服务端应用程序。

中文文档:koa.bootcss.com/

入门教程:www.ruanyifeng.com/blog/2017/0…

  • egg(个人喜好)

eggjs 是阿里开源的企业级 Node.js 框架,专注于企业级框架和应用而生,团队架构师和技术负责人可以基于 egg 孕育出适合自己团队的上层业务框架,帮助开发团队和开发人员降低开发和维护成本。

官网地址:eggjs.org/zh-cn/

入门教程:eggjs.org/zh-cn/intro…

  • express(建议放弃)

Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具。使用 Express 可以快速地搭建一个完整功能的网站,它有一套健壮的特性,可用于开发单页、多页和混合Web应用。

中文文档:www.expressjs.com.cn/

入门教程:www.runoob.com/w3cnote/exp…

版本控制工具

1、公司内网 GIT

Gogs 是一款极易搭建的自助 Git 服务,相比于 GitLab 搭建更简单,性能要求更低。

Gogs 项目旨在打造一个以最简便的方式搭建简单、稳定和可扩展的自助 Git 服务。使用 Go 语言开发使得 Gogs 能够通过独立的二进制分发,并且支持 Go 语言支持的 所有平台,包括 Linux、macOS、Windows 以及 ARM 平台。

官网地址:gogs.io/

2、个人外网 GIT

  • github

GitHub 是一个面向开源及私有软件项目的托管平台,因为只支持Git作为唯一的版本库格式进行托管,故名GitHub。

官网地址:github.com/

  • gitee

大家都知道国内访问 Github 速度比较慢,很影响我们的使用。如果你希望体验到 Git 飞一般的速度,可以使用国内的 Git 托管服务。

Gitee 提供免费的 Git 仓库,还集成了代码质量检测、项目演示等功能。对于团队协作开发,Gitee 还提供了项目管理、代码托管、文档管理的服务,5人以下小团队免费。

官网地址:gitee.com/

结语

如果对您有一丢丢帮助,希望能给个👍评论收藏三连。大家也可以分享在开发中用到的轮子写在评论区。

另外此文如有写得不妥的地方,欢迎批评指正。愿与各位大虾们一起交流讨论,一起学习一起进步。

关注公众号【懒人码农】,获取更多项目实战经验及各种源码资源。如果你也一样对技术热爱并且为之着迷,欢迎加我微信【lazycode520】,将会邀请你加入我们的前端实战交流群一起创造更多 BUG,一起面向快乐编程~ 🦄