前言
本文尽可能为各大插件、工具、框架等官网文档导航,标注为中文文档参考则为民间有志青年翻译。
学习平台
w3school
这是一个收费的在线学习资源,提供 HTML 的残缺教程,包含各种标签和属性的具体介绍,并附有实例演示。
网址:https://www.w3school.com.cn/
MDN Web Docs
这是 Mozilla 开发的收费学习资源,提供 HTML 的具体介绍和教程,并蕴含实例演示和用法示例。
网址:https://developer.mozilla.org/zh-CN/docs/Web/HTML
HTML Dog
这是一个 HTML 教程和参考网站,提供 HTML 的基础知识、标签、属性和实例,还包含 HTML 的最佳实际和 CSS 款式。
网址:https://www.htmldog.com/guides/html/
HTML.com
这是一个专门为 HTML 初学者筹备的网站,提供 HTML 的入门教程和实例演示,以及更高级的技巧和用法。
网址:https://html.com/
菜鸟教程
菜鸟教程是一个收费的中文编程学习网站,它的内容丰盛、易于了解,非常适合初学者学习应用。
网址:https://www.runoob.com/html/html-tutorial.html
CSS-Tricks
CSS-Tricks 是一个由 Coyier 开办的 CSS 学习网站。它提供了大量的 CSS 教程、技巧和代码实例,适宜初学者和进阶者应用。此外,它还有一个社区论坛和博客,让学习者能够和其余开发者交换。
网址:https://css-tricks.com/
Coding Fantasy
Coding Fantasy 是一个通过游戏的形式,让你迅速学习到 flex 和 grid 布局形式,让你在玩游戏的过程学习到常识。
网址:https://codingfantasy.com/games
bilibili
在 B 站上,有很多优质的前端编程视频,其中包含 Web 开发入门、HTML、CSS、JavaScript 等根底课程,也有 Vue.js、React 等风行前端框架的教程,以及一些实用的编程技巧和开发工具的介绍。这些视频由许多有教训的前端工程师制作,涵盖了从根底到高级的前端常识和实际内容。
网址:https://search.bilibili.com/all?keyword= 前端开发
leetcode
LeetCode 平台提供了一个大量的算法练习题库,其中包含了多个类别的算法问题,例如数组、链表、树、字符串、动静布局等等。在这里,用户能够收费练习、在线编程较量和比赛、提交和评估本人的算法问题解决能力,同时也能够通过和其余用户的比拟,激发本人更好的体现。
网址:https://leetcode.cn/
技术交换
GitHub
一个十分受欢迎的开源代码托管平台,让开发者能够共享、单干、摸索各种开源我的项目,同时也是一个十分沉闷的技术社区。
网址:https://github.com/
Stack Overflow
一个专门针对编程问题的问答社区,开发者能够在这里发问、答复问题,并与其余开发者交换和分享教训。
网址:https://stackoverflow.com/
掘金
稀土掘金是一个专一于程序员技术分享和交换的社区平台,致力于帮忙开发者互相学习、交换和成长。它提供了丰盛的技术博客和文章、开源我的项目、求职招聘信息等内容,同时也有大量的技术社区和问答平台。
网址:https://juejin.cn/
知乎
知乎是一个常识分享社区,也是一个十分受欢迎的技术博客平台。在知乎上,不仅能够浏览大量的技术文章和博客,还能够与其余技术爱好者交换和分享教训,取得业余的技术领导和解决方案。
网址:https://www.zhihu.com/
dev
dev 社区和国内的掘金社区很类似,技术分类也比拟多,像 Java、Python、js、分布式等包罗万象,文章品质广泛都还不错,其实如果平时多注意不难发现,掘金上有一些文章是翻译自 dev 社区。
网址:https://dev.to/
书读百遍,其意自现
JS 格调指南
这里蕴含了各种代码的标准格调,不会让你立即变成一个优良的工程师,长期奉行他们也并不意味着你可能居安思危不再犯错。
千里之行,始于足下。咱们须要时常和同行们进行代码评审,一直优化本人的代码。
网址:https://github.com/airbnb/javascript
你不晓得的 JavaScript
这里讲述了很多你已经并不在意然而又不可疏忽的 js 小细节,它将带你把 js 的不同槽点、另类之处,一次性说个明确。
网址:https://github.com/getify/You-Dont-Know-JS
what the f*ck JavaScript
JavaScript 是一个不错的语言。它的语法简略,生态系统也很宏大,最重要的是,它领有最平凡的社区力量。咱们晓得,JavaScript 是一个十分乏味的语言,但同时也充斥了各种奇怪的行为。这些奇怪的行为有时会搞砸咱们的日常工作,有时则会让咱们忍俊不禁。
网址:https://github.com/denysdovhan/wtfjs
正确的学习 JavaScript
这是一份为 JavaScript 老手筹备的指南,同时也蕴含了能够给高手学习的最佳材料,尽管网站的名字是 the right way, 但并不代表是学习 JavaScript 的惟一办法。这里只是将一些顶尖开发者的文章、揭示和技巧收集于此。因为它是由一些十分厉害的网民身上收集而来,故称之为 ‘the right way’ 或是最佳做法。
网址:https://github.com/braziljs/js-the-right-way
JavaScript 数据结构和算法齐全解析
这里蕴含了多种基于 JavaScript 语法的算法与数据结构。每种算法和数据结构都有本人的 README.md,蕴含相干阐明和链接,以便进一步浏览。
网址:https://github.com/trekhleb/javascript-algorithms
优良开源我的项目大全
awesome-vite
awesome-vite 是一个收集了 Vite 生态圈相干资源的 GitHub 仓库,包含插件、模板、示例、文章等等。它的目标是为了帮忙开发者更好地应用和摸索 Vite。这个仓库由社区驱动,大家能够通过 Pull Request 来奉献本人发现的有价值的 Vite 资源,也能够通过 Issues 来反馈问题和倡议。
网址:https://github.com/vitejs/awesome-vite
awesome-react
awesome-react 是一个收集了 React 相干资源的精选列表,包含工具、组件、学习资源、示例等等。如果你是 React 开发者,这个列表可能对你很有用。该列表蕴含了一些十分风行和宽泛应用的 React 组件和工具,也蕴含了一些绝对较新但很有后劲的我的项目。
网址:https://github.com/enaqx/awesome-react
awesome-webpack-cn
awesome-webpack-cn 是一个中文版的 Webpack 相干资源列表,收录了很多 Webpack 相干的文章、教程、插件等,不便开发者学习和应用 Webpack。它蕴含了从入门到深刻的 Webpack 相干内容,以及在 Webpack 应用过程中会用到的各种工具和插件。同时,Awesome-Webpack-CN 的内容也在不断更新和欠缺中。
网址:https://github.com/webpack-china/awesome-webpack-cn
awesome-github-vue
awesome-github-vue 是一个会集了许多 Vue 相干的优良开源我的项目、组件、工具、插件等资源的 GitHub 仓库。该仓库以清晰的分类和具体的介绍,不便开发者查找和应用 Vue 生态中的优良资源。
网址:https://github.com/opendigg/awesome-github-vue
Javascript
正则
正则表达式是一种示意字符串模式的办法,罕用于搜寻、替换和匹配文本。它能够用来匹配特定模式的字符串,比方验证邮箱、手机号、身份证号码等。
RegexOne 提供了一个互动的教程来学习正则表达式。
regulex 是一个超级好用的正则表达式可视化工具。
regex101 是一个在线的正则表达式测试平台。
网址:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide…
ES6
ES6(ECMAScript 6)是 JavaScript 语言的一次重大更新,也称为 ECMAScript 2015。ES6 次要减少了许多新的语法个性,如箭头函数、解构赋值、let 和 const 关键字、模板字符串、类等,同时也减少了许多新的内置函数和办法,如 Promise、Set、Map、Array.from 等。
网址:https://tc39.es/ecma262/ https://es6.ruanyifeng.com/
typescript
TypeScript 中文网是 TypeScript 官网中文文档网站,提供全面的 TypeScript 中文学习资源,包含入门指南、手册、工具、文章、案例等。该网站由社区保护,更新及时、品质高,是学习 TypeScript 的好帮手。
网址:https://www.tslang.cn/docs/handbook/basic-types.html
TS 练习题:https://github.com/type-challenges/type-challenges/blob/main/README.zh-CN.md
TS 学习:https://00feng00.github.io/typescript-book-chinese/#how-to-co…
vue 学习
vue
Vue.js 官网文档是学习 Vue.js 的最佳资源之一,提供了全面的 Vue.js 教程和 API 文档。
网址:https://cn.vuejs.org/
GitHub:https://github.com/vuejs/core
vue 开发插件
一个 Vue.js 应用程序的浏览器调试工具,能够在 Chrome 和 Firefox 上应用。
网址:https://devtools.vuejs.org/
vueuse
VueUse 是一个基于 Vue 3 的轻量级、模块化的函数库,提供了一些不便实用的 Vue 自定义 Hooks。这里蕴含了许多罕用的性能,例如状态治理、表单解决、工夫解决、剪贴板操作、动画成果、浏览器 API 等,也反对 Tree Shaking,能够依据需要抉择所须要的模块,避免浪费不必要的资源和加载工夫。
网址:https://vueuse.org/
nuxt
Nuxt.js 是一个基于 Vue.js 的轻量级利用框架,用于创立服务端渲染 (SSR) 应用程序。它基于 Vue.js,封装了服务端渲染、异步数据加载、打包优化、动态资源预加载、路由零碎等一系列的解决方案和最佳实际,使开发人员能够更快地构建高性能、可扩大的应用程序。
网址:https://www.nuxtjs.cn/
vuepress
VuePress 是一个基于 Vue.js 的动态网站生成器,它可能生成具备文档浏览体验的动态网站。VuePress 应用 Vue.js 的单文件组件和 Webpack 进行开发,反对 Markdown 写作格局,并提供了丰盛的主题和插件可供选择。
网址:https://vuepress.vuejs.org/zh/
React 学习
react
这是学习 React 最好的网站。它蕴含 React 残缺的文档和教程, 从根底到高级, 涵盖了 React 的方方面面。倡议从官网的 learn react 动手, 零碎学习 React。
网址:https://react.dev/
github:https://github.com/facebook/react
hooks 文档:https://legacy.reactjs.org/docs/hooks-intro.html
router:https://reactrouter.com/en/6.14.1/start/overview
react 开发插件
这是一个由 Facebook 官网开发的浏览器插件,能够不便地查看 React 组件的层次结构,以及 props 和 state 的值。
网址:https://chrome.google.com/webstore/detail/react-developer-too…
next.js
Next.js 是一个基于 React 的服务器端渲染框架,反对主动代码宰割、动态页面生成和基于数据的客户端路由等个性,能够帮忙开发者疾速构建高性能、可扩大的 Web 利用。
网址:https://nextjs.org/docs
中文文档:https://www.nextjs.cn/docs
Gatsby
Gatsby 是一个基于 React 的动态网站生成器,反对应用 Markdown、React 组件、GraphQL 等构建动态网站,能够帮忙开发者疾速构建 SEO 敌对、高性能的动态网站。
网址:https://www.gatsbyjs.com/
中文文档:https://www.gatsbyjs.cn/docs/
Ant Design Pro
Ant Design Pro 是一个基于 Ant Design 的企业级后盾管理系统模板,提供了丰盛的组件和模板,能够帮忙开发者疾速构建高质量的企业级利用。
网址:https://pro.ant.design/zh-CN/docs/introduction/
小程序开发
微信小程序
在该文档中,你能够学习如何开发小程序,包含小程序的基础知识、开发工具的应用、小程序开发的各种组件和接口的应用办法等等。
网址:https://developers.weixin.qq.com/miniprogram/dev/framework/
taro
Taro 是由京东·凹凸实验室开发的一款多端对立开发框架,反对编译成微信小程序、百度智能小程序、支付宝小程序、字节跳动小程序、QQ 小程序、H5 等多个平台的代码。
网址:https://taro-docs.jd.com/docs/
uni-app
uni-app 是由 DCloud 公司开发的一款基于 Vue.js 开发的多端对立开发框架,反对编译成微信小程序、支付宝小程序、百度智能小程序、QQ 小程序、快利用、H5 等多个平台的代码。
网址:https://uniapp.dcloud.net.cn/
react Native
React Native 是 Facebook 推出的一种跨平台挪动利用开发框架,反对应用 JavaScript 和 React 以及其余 web 技术进行挪动利用开发。能够在 Android 和 iOS 上构建本机利用,同时也反对在 web 上开发。
网址:https://reactnative.dev/
微前端
Qiankun
Qiankun 是阿里巴巴前端体系基于微前端标准实现的一套解决方案。它提供主利用和微利用两种角色。主利用作为整个我的项目的入口, 微利用负责独立业务场景。微利用能够抉择 React、Vue 或者其余框架开发, 并且能够部署在不同域名下。主利用动静加载微利用, 微利用之间也可互相嵌套。提供沙箱机制, 确保微利用之间的隔离性。提供主利用和微利用之间的通信计划。反对 SSR 渲染和 TypeScript。
网址:https://qiankun.umijs.org/zh
工具
环境配置
node.js
这是 Node.js 的官方网站,提供了对于 Node.js 的文档、API 参考和下载链接等信息。官网还提供了一个交互式的 Node.js 教程,帮忙初学者理解 Node.js 的基本概念和语法。
网址:https://nodejs.cn/
npm
npm 是 Node.js 官网的包管理器,用于帮忙 Node.js 开发人员装置、公布、分享和治理 Node.js 模块(也称为包或库)。这里提供了 npm 的文档、包管理器、包搜寻和社区等。学习者能够在这里找到各种 npm 相干的信息和资源,包含如何应用 npm 装置、公布和治理包等。
网址:https://www.npmjs.com/
中文文档:https://www.npmjs.cn/
git
Git 是一个开源的分布式版本控制系统,用于治理软件开发过程中的源代码。它最后由 Linus Torvalds 在 2005 年创立,目标是更好地治理 Linux 内核的开发。Git 能够轻松地治理大型项目,并使多人合作变得更加简略和高效。
网址:https://git-scm.com/book/zh/v2
罕用库
axios
Axios 是一个基于 Promise 的 HTTP 客户端,用于浏览器和 Node.js。它提供了一种简洁、优雅、灵便和易于应用的形式,使得发送 HTTP 申请变得容易。
moment.js
Moment.js 是一个风行的 JavaScript 库,用于解决、解析和显示日期和工夫。它提供了丰盛的日期和工夫解决性能,包含格式化、解析、时区转换、绝对工夫计算等。
网址:https://momentjs.com/
lodash
Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。
网址:https://www.lodashjs.com/
echarts
ECharts 是一个由百度前端开发团队开发的基于 JavaScript 的可视化图表库,反对各种常见图表类型,如折线图、柱状图、散点图、饼图、仪表盘等,能够灵便扩大和定制化,广泛应用于数据可视化和图表展现的场景。
网址:https://echarts.apache.org/zh/index.html
xlsx
sheetjs 提供了 excel 在前端应用纯 js 导出的解决方案,在线浏览 excel 和导出 excel 工具。
网址:https://sheetjs.com/
构建工具
webpack
webpack 是一个十分弱小的 JavaScript 模块打包工具,能够解决各种类型的文件,反对自定义配置和插件,同时也提供了一些优化性能,如代码压缩、缓存等。
网址:https://webpack.docschina.org/
vite
Vite 是一个现代化的构建工具,能够疾速构建古代 Web 应用程序。Vite 能够疾速启动我的项目,反对疾速热更新、动静导入和动态剖析等性能。与传统的打包工具不同,Vite 采纳原生 ES 模块作为开发时的模块零碎,能够实现按需编译,防止了不必要的打包工夫和编译过程。
网址:https://cn.vitejs.dev/
rollup
rollup 是一个专门用于打包 JavaScript 库的构建工具,反对 ES6 模块和 Tree Shaking 等性能。
网址:https://rollupjs.org/
中文文档:https://www.rollupjs.com/
我的项目配置
eslint
ESLint 是一个 JavaScript 代码查看工具,用于检测代码中潜在的问题和谬误,以保障代码品质和一致性。它能够辨认并纠正常见的代码格调问题,如缩进、括号、引号等,还能够查看语法错误、未应用变量、未声明变量、代码反复等问题。
网址:https://eslint.org/docs/latest/use/getting-started
prettier
Prettier 是一个代码格式化工具,能够依据配置主动格式化代码,使代码格调统一,缩小开发者在代码格局上的工夫和精力投入,从而进步开发效率。
网址:https://prettier.io/
style-lint
style-lint 是一款弱小的 CSS 代码标准查看工具,它能够帮忙开发者保持一致的 CSS 代码格调,进步代码可维护性和可读性。Stylelint 反对配置文件,能够针对不同的我的项目需要进行定制化设置。
网址:https://stylelint.io/user-guide/get-started/
husky
Husky 是一个 Git hook 工具,能够让开发者在代码提交、推送等 Git 操作前主动执行一些脚本。常见的用处包含在提交代码前主动运行代码查看、格式化代码等操作,从而保障代码的品质和格调一致性。
网址:https://www.breword.com/typicode-husky/#skip-all-hooks-rebase
babel
Babel 是一个 JavaScript 编译器,用于将 ECMAScript 2015+ 代码转换为向后兼容的 JavaScript 版本。在应用 Babel 进行开发时,须要进行相应的配置能力使 Babel 失常工作。
网址:https://www.babeljs.cn/docs/
lint-staged
lint-staged 是一个在 git 暂存文件 (staged files) 上运行代码格局标准的工具。它只校验暂存文件的改变(diff), 而不是整个我的项目。这样能够进步 lint 效率, 并且防止提交未修改的文件产生的 lint 谬误。
网址:https://github.com/okonet/lint-staged#readme
css 编译器
less
Less 是一种动静款式语言,是 CSS 的一种扩大,提供了许多 CSS 所没有的性能,如嵌套规定、变量、运算、函数等,使得 CSS 更加易读、易保护和易扩大。
网址:https://lesscss.org/
sass
sass 和 scss 其实是一样的 css 预处理语言,SCSS 是 Sass 3 引入新的语法,其后缀名是别离为 .sass 和.scss 两种。它扩大了 CSS,并增加了许多有用的个性,如变量、嵌套规定、Mixin(混合)、函数等。
网址:https://sass.bootcss.com/
stylus
Stylus 是一种 CSS 预处理器,Stylus 具备相似于 Less 和 Sass 的性能,但它的语法更加简洁,并且能够非常容易地与 Node.js 集成。同时,Stylus 还反对实时编译,能够让开发人员更快地调试和开发 CSS 款式。
网址:https://stylus.bootcss.com/
PostCSS
PostCSS 是一个 CSS 后处理器,它可能解析 CSS 代码并且应用插件来转换 CSS。PostCSS 的插件生态系统十分丰盛,能够实现各种 CSS 的转换,例如主动增加浏览器前缀、将 rem 单位转换为 px、压缩 CSS 等等。
网址:https://www.postcss.com.cn/
单元测试
Jest
jest 是由 Facebook 开发的 JavaScript 测试框架,可用于测试 React、Angular 和 Vue 等前端框架。
网址:https://jestjs.io/zh-Hans/docs/getting-started
Mocha
Mocha 是一个基于 Node.js 和浏览器的 JavaScript 测试框架,反对异步和同步测试,并且能够与各种断言库和测试覆盖率工具配合应用。
网址:https://mochajs.org/
AVA
AVA 是一个轻量级的 JavaScript 测试框架,反对异步测试和并发执行,具备疾速、简略和易于应用的特点。
网址:https://github.com/avajs/ava
三维开发
Three.js
Three.js 是一款基于 WebGL 的 3D 渲染引擎,能够用于制作各种 3D 场景、动画、交互等成果。它提供了丰盛的 API 和示例,可用于创立简单的 3D 网站、游戏、虚拟现实(VR)、加强事实(AR)等利用。
网址:https://threejs.org/
Cesium
cesium 是一个开源的 JavaScript 库,用于创立基于 Web 的地球浏览器应用程序。它应用 WebGL 进行硬件加速,并应用大量的凋谢数据规范,如 WMS、WFS、GeoJSON、KML 等。
网址:https://cesium.com/
Babylon.js
Babylon 是一个功能强大的三维引擎,专门用于创立基于 WebGL 的游戏和应用程序,可在浏览器、挪动设施和桌面上运行。
网址:https://www.babylonjs.com/