React#
| React | ||
|---|---|---|
| React 官方文档 | 用於構建 Web 和原生交互界面的庫。 | https://zh-hans.react.dev/ |
| ReactRouter 官方文檔 | 最流行的 React 路由選擇。 | https://reactrouter.com/en/main |
| Redux | JS 應用的狀態容器，提供可預測的狀態管理。 | https://cn.redux.js.org/ |
| MobX | 簡單，可擴展的狀態管理。 | https://zh.mobx.js.org/README.html |
| DvaJS | 基於 React 和 redux 的輕量級 elm 風格框架。 | https://dvajs.com/ |
| UmiJS | 插件化的企業級前端應用框架。 | https://v3.umijs.org/zh-CN |
Vue#
| Vue | ||
|---|---|---|
| Vue3 | 漸進式 JavaScript 框架。易學易用，性能出色，適用場景豐富的 Web 前端框架。 | https://cn.vuejs.org/ |
| Vue2 | 漸進式 JavaScript 框架。 | https://v2.cn.vuejs.org/ |
| Vue Router | 為 Vue.js 提供富有表現力、可配置的、方便的路由。 | https://router.vuejs.org/zh/ |
| Vuex | 一個專為 Vue.js 應用程序開發的狀態管理模式 + 庫。 | https://vuex.vuejs.org/zh/ |
| Pinia | 您將喜歡使用的 Vue 存儲庫 | https://pinia.web3doc.top/ |
| Nuxt | 易懂的 Web 框架 | https://nuxt.com.cn/ |
| create-vue | 啟動 Vue 項目的推薦方法。 | https://github.com/vuejs/create-vue |
| Vue CLI | Vue.js 開發的標準工具（現已處於維護模式！） | https://cli.vuejs.org/zh/ |
Nodejs#
| Nodejs | ||
|---|---|---|
| Nodejs 官方文檔 | Node.js 是一個開源的、跨平台的 JavaScript 運行時環境。 | https://nodejs.cn/ |
| Egg | 為企業級框架和應用而生。 | https://www.eggjs.org/zh-CN |
| Express | 基於 Node.js 平台，快速、開放、極簡的 Web 開發框架。 | https://express.nodejs.cn/ |
| Koa | Koa -- 基於 Node.js 平台的下一代 web 開發框架。 | https://koa.bootcss.com/ |
| Nest | 用於構建高效且可伸縮的服務端應用程序的漸進式 Node.js 框架。 | https://docs.nestjs.cn/ |
微信小程序#
| 微信小程序 | ||
|---|---|---|
| 微信小程序官網文檔 | 微信小程序官網文檔 | https://developers.weixin.qq.com/miniprogram/dev/framework/ |
| uni-app | 編寫一套代碼，可發布到 iOS、Android、Web（響應式）、以及各種小程序（微信 / 支付寶 / 百度 / 頭條 / 飛書 / QQ / 快手 / 釘釘 / 淘寶）、快應用等多個平台。 | https://uniapp.dcloud.net.cn/ |
| WePY | 讓小程序支持組件化開發的框架 | https://wepyjs.github.io/wepy-docs/ |
| Taro | 多端統一開發解決方案 | https://taro.js.org/ |
| WeUI | 為微信小程序量身定制。 | https://github.com/weui/weui-design |
UI 庫#
| UI 庫 | ||
|---|---|---|
| Ant Design | 助力設計開發者「更靈活」地搭建出「更美」的產品，讓用戶「快樂工作」~ | https://ant.design/index-cn |
| Ant Design Pro | 開箱即用的中台前端 / 設計解決方案 | https://pro.ant.design/zh-CN |
| Ant Design Mobile | 探索移動端 Web 的體驗極限 | https://mobile.ant.design/zh/ |
| Element Plus | 基於 Vue 3，面向設計師和開發者的組件庫 | https://element-plus.org/zh-CN/ |
| Element | 為開發者、設計師和產品經理準備的基於 Vue 2.0 的桌面端組件庫 | https://element.eleme.io/#/zh-CN |
| View Design | 基於 Vue.js 3 的企業級 UI 組件庫和中後台系統解決方案，為數萬開發者服務。 | https://www.iviewui.com/ |
| Ant Design of Vue | 這裡是 Ant Design 的 Vue 實現，開發和服務於企業級後台產品。 | https://www.antdv.com/docs/vue/introduce-cn/ |
| Material UI | 直觀的 React UI 工具。 | https://mui.com/ |
| Vant | 有讚團隊輕量、可定制的移動端 Vue 組件庫。 | https://vant-ui.github.io/vant/#/zh-CN |
| Cube UI | 滴滴團隊基於 Vue.js 實現的精緻移動端組件庫。 | https://didi.github.io/cube-ui/#/zh-CN |
| Mint UI | 餓了麼團隊基於 Vue.js 的移動端組件庫。 | http://mint-ui.github.io/#!/zh-cn |
| NutUI | 京東團隊的輕量級移動端組件庫。 | https://nutui.jd.com/#/ |
| Bootstrap | 簡潔、直觀、強悍的前端開發框架，讓 web 開發更迅速、簡單。 | https://www.bootcss.com/ |
| PaperCSS | 手繪風格的 css 框架。 | https://www.getpapercss.com/ |
編譯 & 構建 & 打包#
| 編譯 & 構建 & 打包 | ||
|---|---|---|
| Webpack | 用於現代 JavaScript 應用程序的靜態模塊打包工具 | https://www.webpackjs.com/ |
| Vite | 下一代的前端工具鏈，為開發提供極速響應 | https://cn.vitejs.dev/ |
| Rollup | JavaScript 打包器，將點滴代碼編織成錯綜複雜的程序。 | https://cn.rollupjs.org/ |
| Gulp | 用自動化構建工具增強你的工作流程！ | https://www.gulpjs.com.cn/ |
| Grunt | JavaScript 世界的構建工具 | https://www.gruntjs.cn/ |
| Babel | Babel 是一個 JavaScript 編譯器。 | https://www.babeljs.cn/ |
框架類庫#
| 框架類庫 | ||
|---|---|---|
| single-spa | 前端微服務的 javascript 框架 | https://zh-hans.single-spa.js.org/ |
| qiankun | 可能是你見過最完善的微前端解決方案 | https://qiankun.umijs.org/zh |
| 無界 | 極致的微前端框架。 | https://wujie-micro.github.io/doc/ |
| Flutter | 為任何設備構建應用程序 | https://flutter.dev/ |
| Electron | 使用 JavaScript、HTML 和 CSS 構建跨平台桌面應用程序 | https://www.electronjs.org/zh/ |
| Angular | 構建未來的 Web 開發框架 | https://angular.cn/ |
| React Native | 一次學習，隨處書寫。 | https://reactnative.dev/ |
| jQuery | Query 是一個快速、小巧、功能豐富的 JavaScript 庫。 | https://jquery.com/ |
| Zepto | Zepto 是一個極簡 JavaScript 庫，用於現代瀏覽器，具有大部分與 jquery 兼容的 API。 | https://zeptojs.com/ |
| Swiper | Swiper 是純 javascript 打造的滑動特效插件，面向手機、平板電腦等移動終端。 | https://swiper.com.cn/ |
| iSlider | iSlider 是一個表現出眾，無任何插件依賴的手機平台 javascript 滑動組件。它能夠處理任何元素，例如圖片或者 DOM 元素。 | http://eux.baidu.com/iSlider/demo/index_chinese.html |
JavaScript#
| JavaScript | ||
|---|---|---|
| MDN | 最權威的 web 技術查詢。 | https://developer.mozilla.org/zh-CN/ |
| ECMA-262 | js 標準查詢。 | https://tc39.es/ecma262/ |
| 阮一峰 ES6 入門教程 | 《ECMAScript 6 入門教程》是一本開源的 JavaScript 語言教程，全面介紹 ECMAScript 6 新引入的語法特性。 | https://es6.ruanyifeng.com/ |
| 廖雪峰 JavaScript 教程 | 這是小白的零基礎 JavaScript 全棧教程。 | https://www.liaoxuefeng.com/wiki/1022910821149312 |
| 现代 JavaScript 教程 | 以最新的 JavaScript 標準為基準。通過簡單但足夠詳細的內容，為你講解從基礎到高階的 JavaScript 相關知識。 | https://zh.javascript.info/ |
| freeCodeCamp | 互動式 web 技術教程。 | https://www.freecodecamp.org/chinese/learn |
| JavaScript 秘密花園 | 深入 JavaScript 某些特性。 | http://shamansir.github.io/JavaScript-Garden/zh/ |
| JavaScript 開發者應懂的 33 個概念 | 為了幫助開發者掌握 JavaScript 概念而創立的。 | https://github.com/stephentian/33-js-concepts/blob/master/README.md |
| 函數式編程 | 為了幫助開發者掌握 JavaScript 概念而創立的。 | https://llh911001.gitbook.io/mostly-adequate-guide-chinese/ |
| TypeScript | JavaScript 的超集。 | https://www.tslang.cn/ |
CSS#
| CSS | ||
|---|---|---|
| Sass | 世界上最成熟、最穩定、最強大的專業級 CSS 擴展語言！ | https://www.sass.hk/ |
| Less | 它是 CSS，只是多了一點東西。 | https://less.nodejs.cn/ |
| PostCSS | 是一個用 JavaScript 工具和插件轉換 CSS 代碼的工具。 | https://www.postcss.com.cn/ |
| stylus | 富於表現力、動態的、健壯的 CSS。 | https://www.stylus-lang.cn/ |
| Animate.css | CSS 動畫。 | https://animate.style/ |
| Autoprefixer | Autoprefixer 是一個 PostCSS 插件，它可以解析你的 CSS 並添加供應商前綴。 | https://autoprefixer.github.io/ |
可視化#
| 可視化 | ||
|---|---|---|
| ECharts | 一個基於 JavaScript 的開源可視化圖表庫 | https://echarts.apache.org/zh/index.html |
| Three.js | Web3D 可視化 | https://threejs.org/ |
| AntV | 蚂蚁集团全新一代數據可視化解決方案。 | https://antv.vision/ |
| DataV | Vue 大屏數據展示組件庫。 | http://datav.jiaminghi.com/ |
AI 工具#
| AI 工具 | ||
|---|---|---|
| ChatGPT | 世界上最成熟、最強大的對話交互 AI 模型 | https://chat.openai.com/ |
| ChatGPT 鏡像站點 | 這兒為你準備了眾多免費好用的 ChatGPT 鏡像站點 | https://github.com/xx025/carrot |
| chat-pdf | 上傳一個 PDF 文件，並詢問有關它的任何問題。 | https://damngood.tools/tools/chat-pdf |
| AmyMind | 打開即用，思維導圖的基本素養 | https://amymind.com/ |
| 寫作貓 | 集 AI 寫作、多人協作、文本校對、改寫潤色、自動配圖等功能為一體 | https://xiezuocat.com/ |
| StockAI.Trade | 基於 ChatGPT 的 AI 選股工具 | https://stockai.trade/ |
文字 & 圖標#
| 文字 & 圖標 | ||
|---|---|---|
| iconFont | 阿里媽媽 MUX 傾力打造的矢量圖標管理、交流平台。 | https://www.iconfont.cn/ |
| Bootstrap 官方圖標庫 | 包含 1800 多個圖標的免費、高質量的開源圖標庫 | https://icons.bootcss.com/ |
| Font Awesome | 網絡字體工具包 | https://fontawesome.com.cn/ |
| EMOJI 中文網 | EMOJI 中文網 | https://www.emojiall.com/zh-hans |
圖片 & 視頻處理#
| 圖片 & 視頻處理 | ||
|---|---|---|
| TinyPng | 智能 WebP, PNG 和 JPEG 壓縮 | https://tinypng.com/ |
| Final2x | 將圖像超分辨率到任意大小 | https://github.com/Tohrusky/Final2x |
| SM.MS | 免費圖床工具 | https://sm.ms/ |
| HandBrake | 轉換幾乎任何格式的視頻 | https://github.com/HandBrake/HandBrake |
| HiPDF | 一站式 PDF 轉換解決方案 | https://www.hipdf.cn/all-tools |
測試 & 優化工具#
| 測試 & 優化工具 | ||
|---|---|---|
| vConsole | 一個輕量、可拓展、針對手機網頁的前端開發者調試面板。 | https://github.com/Tencent/vConsole/blob/dev/README_CN.md |
| PageSpeed Insights | 使您的網頁在所有設備上都能快速加載 | https://pagespeed.web.dev/ |
| Responsinator | 主流移動設備顯示效果。 | http://www.responsinator.com/ |
| Can I use | 查詢瀏覽器支持的現代 web 技術 | https://caniuse.com/ |
| Optimizer | Windows 平台的優化器 | https://github.com/hellzerg/optimizer |
大牛博客#
| 大牛博客 | ||
|---|---|---|
| 阮一峰的個人網站 | 阮一峰的個人網站 | http://www.ruanyifeng.com/ |
| 網道 | 網道教程 | https://wangdoc.com/ |
| 張鑫旭的個人首頁 | 張鑫旭的個人首頁 | https://www.zhangxinxu.com/ |
| 周愛民的博客 | 周愛民的博客 | https://aimingoo.github.io/ |
| 技術胖的博客 | 15 年開發經驗，目前主做前端開發 | https://jspang.com/ |
內容管理#
| 內容管理 | ||
|---|---|---|
| VitePress | 簡單、強大、快速。滿足您一直想要的現代 SSG 框架。 | https://vitepress.dev/ |
| VuePress | Vue 驅動的靜態網站生成器 | https://vuepress.vuejs.org/ |
| docsify | 一個神奇的文檔網站生成器。 | https://docsify.js.org/#/zh-cn/ |
| Jekyll | 將純文本轉化為靜態網站和博客。 | https://www.jekyll.com.cn/ |