我用了这20多个珍藏de前端轮子,开发效率瞬间提升99% |
您所在的位置:网站首页 › 造个轮子 › 我用了这20多个珍藏de前端轮子,开发效率瞬间提升99% |
前言
大家好,我是虚竹,今天给大家分享一下我做前端开发多年,参与过大大小小的产品或项目实战,常常会用到这些私藏干货(前端好轮子)。作为新生代农民工,手上不得不备一些造好的优质前端轮子,为了让工作事半功倍,提升开发效率,高效完成任务,还能获得领导或上司的赏识,非常棒,收藏等会学会加薪。 开发工具 IDE1、 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、数据可视化 echartsecharts.apache.org/zh/index.ht… vchartsv-charts.js.org/#/ G2g2.antv.vision/zh/docs/man… D3d3js.org/ highchartswww.highcharts.com.cn/ vueDataVgithub.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 githubGitHub 是一个面向开源及私有软件项目的托管平台,因为只支持Git作为唯一的版本库格式进行托管,故名GitHub。 官网地址:github.com/ gitee大家都知道国内访问 Github 速度比较慢,很影响我们的使用。如果你希望体验到 Git 飞一般的速度,可以使用国内的 Git 托管服务。 Gitee 提供免费的 Git 仓库,还集成了代码质量检测、项目演示等功能。对于团队协作开发,Gitee 还提供了项目管理、代码托管、文档管理的服务,5人以下小团队免费。 官网地址:gitee.com/ 结语如果对您有一丢丢帮助,希望能给个👍评论收藏三连。大家也可以分享在开发中用到的轮子写在评论区。 另外此文如有写得不妥的地方,欢迎批评指正。愿与各位大虾们一起交流讨论,一起学习一起进步。 关注公众号【懒人码农】,获取更多项目实战经验及各种源码资源。如果你也一样对技术热爱并且为之着迷,欢迎加我微信【lazycode520】,将会邀请你加入我们的前端实战交流群一起创造更多 BUG,一起面向快乐编程~ 🦄 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |