跳到主要内容

各种文档

名称链接备注
Vue.js 3https://staging-cn.vuejs.org/不要看旧的
Vitehttps://cn.vitejs.dev/不要看旧的
Web开发技术https://developer.mozilla.org/zh-CN/docs/Web面向 Web 开发者的文档
Piniahttps://pinia.vuejs.org/The Vue Store that you will enjoy using
Vue Routerhttps://router.vuejs.org/zh/Vue.js 的官方路由
Vue.js challengeshttps://cn-vuejs-challenges.netlify.app/Vue.js 挑战集合

CSS 相关

名称链接备注
css-border特效https://blog.csdn.net/qq_39370934/article/details/118439096css边框特效

可能有用的库

名称链接备注
WOWhttps://wowjs.uk/滚动动画
Typed.jshttps://mattboldt.com/demos/typed-js/打字机效果
Granim.jshttps://sarcadass.github.io/granim.js/index.html渐变动画
Canvas Confettihttps://www.kirilv.com/canvas-confetti/纸屑动画
CSShakehttps://elrumordelaluz.github.io/csshake/摇晃动画
Mitthttps://github.com/developit/mitt事件订阅/发布库
PageSpyhttps://www.pagespy.org/远程调试工具
Hammer.JShttps://hammerjs.github.io/触摸手势
Shikihttps://github.com/shikijs/shiki代码高亮
Vue Minihttps://vuemini.org/Vue 小程序框架
Simple mind maphttps://github.com/wanglin2/mind-map思维导图
Radashhttps://github.com/sodiray/radashJavaScript 工具库
Day.jshttps://day.js.org/日期处理
timeago.jshttps://github.com/hustcc/timeago.js已过时间处理
filesize.jshttps://filesizejs.com/文件大小处理
web-tracinghttps://github.com/M-cheng-web/web-tracing前端埋点
pinyin-prohttps://pinyin-pro.cn/拼音转换工具
Intro.jshttps://introjs.com/引导工具
SQLite Wasmhttps://github.com/sqlite/sqlite-wasmSQLite
Dexie.jshttps://dexie.orgIndexedDB封装
https://github.com/atlassian/pragmatic-drag-and-drop拖拽
Vue I18nhttps://vue-i18n.intlify.dev/
React Hooks Libraryhttps://react-hooks-library.vercel.app/React Hooks
useHookshttps://usehooks.com/React Hooks
ahookshttps://ahooks.js.org/React Hooks
swuphttps://swup.js.org/让SSR页面切换像SPA
Lenishttps://lenis.darkroom.engineering/滚动动效
dnd kithttps://dndkit.com/拖拽
vis.jshttps://visjs.org/数据可视化
AutoAnimatehttps://auto-animate.formkit.com/自动动画

可能有用的组件

名称链接备注
Chart.jshttps://www.chartjs.org/图表
wangEditor 5https://www.wangeditor.com/开源 Web 富文本编辑器,开箱即用,配置简单
Monacohttps://microsoft.github.io/monaco-editor/VS Code 样式的代码编辑器
shiki-magic-movehttps://shiki-magic-move.netlify.app/代码动效
LogicFlowhttps://site.logic-flow.cn/流程图
ByteMDhttps://github.com/bytedance/bytemd字节跳动 Markdown 编辑器
sweetalert2https://sweetalert2.github.io/弹窗组件
Textbushttps://textbus.io/富文本多人协作编辑器
canvas-editorhttps://github.com/Hufe921/canvas-editor富文本编辑器
UEditor Plushttps://github.com/modstart-lib/ueditor-plus富文本编辑器
OrgCharthttps://github.com/dabeng/OrgChart树状图

Vue组件

名称链接备注
VueDraggablePlushttps://alfred-skyblue.github.io/vue-draggable-plus/支持 Vue2 和 Vue3 的拖拽组件
NES Vuehttps://taiyuuki.gitee.io/nes-vue-docs/zh/用于Vue 3的NES模拟器组件
vue-officehttps://501351981.github.io/vue-office/examples/docs/更易用的文件预览
vis-networkhttps://github.com/visjs/vis-network网络图可视化
VueHook Plushttps://inhiblabcore.github.io/docs/hooks/工具类
Vue Text Highlighthttps://github.com/AlbertLucianto/vue-text-highlight文本高亮
Vue Slicksorthttps://vue-slicksort.netlify.app/拖拽排序
Vue3 DnDhttps://www.vue3-dnd.com/拖拽组件
Vue Flowhttps://vueflow.dev/Vue 3 流程图组件
Flowcharthttps://github.com/joyceworks/flowchart-vue流程图组件
Vxe Tablehttps://vxetable.cn/表格
Vue3 BaiduMap Glhttps://github.com/yue1123/vue3-baidu-map-gl百度地图
Vue Json Prettyhttps://github.com/leezng/vue-json-prettyJSON展示
Vue Starporthttps://github.com/antfu/vue-starport跨路由动画

React组件

名称链接备注
Sonnerhttps://sonner.emilkowal.ski/Toast 组件
头像Avvvatarshttps://github.com/nusu/avvvatars
富文本编辑器Platehttps://platejs.org/

组件库

名称链接备注
Fomantic-UIhttps://fomantic-ui.com/A community fork of Semantic-UI
TOAST UIhttps://ui.toast.com/数据展示类组件库
shadcn/uihttps://ui.shadcn.com/-
Preline UIhttps://preline.co/index.html

Vue组件库

名称链接备注
Naïve UIhttps://www.naiveui.com/zh-CN/一个 Vue 3 组件库
Vexip UIhttps://www.vexipui.com/zh-CN一个 Vue 3 组件库
Element Plushttps://element-plus.org/zh-CN/一个 Vue 3 组件库
Varlethttps://varlet.gitee.io/varlet-ui/Vue 3 Material Design 3 组件库
Yike Designhttps://www.huohuo90.com:3005/Vue 组件库
made with vue.jshttps://madewithvuejs.com/Vue 组件库合集
Vue Data UIhttps://vue-data-ui.graphieros.com/Vue 3 数据可视化组件库

React组件库

名称链接备注
Arco Desaignhttps://arco.design/字节跳动
Chakra UIhttps://chakra-ui.com/一个 React 组件库
Radix UIhttps://www.radix-ui.com/

图标库

名称链接备注
Simple Iconshttps://simpleicons.org/?q=apacheechartsSVG 图标库
iconiFy.DESiGNhttps://icon-sets.iconify.design/SVG 图标库
LottieFileshttps://lottiefiles.com/动画库
Vue Uniconshttps://antonreshetov.github.io/vue-unicons/Vue 图标库
Font Awesomehttps://fontawesome.com/图标库
Flaticonhttps://www.flaticon.com/-
Remix Iconhttps://remixicon.com/

技术笔记

名称链接备注
使用Vite插件自动生成路由,解放生产力https://juejin.cn/post/7062613578200645640掘金
前端反调试初探https://juejin.cn/post/6974655702572908557掘金
前端反调试,大家来看看能否用到生产环境https://juejin.cn/post/6885336395070750734掘金
突破前端反调试--阻止页面不断debuggerhttps://segmentfault.com/a/1190000012359015segmentfault
自己造轮子实现的Electron热更新https://edgeless.top/%E8%87%AA%E5%B7%B1%E9%80%A0%E8%BD%AE%E5%AD%90%E5%AE%9E%E7%8E%B0%E7%9A%84Electron%E7%83%AD%E6%9B%B4%E6%96%B0/-
微信小程序wx:key以及wx:key=" *this"详解https://www.cnblogs.com/taohuaya/p/11311012.html博客园
前端数据库indexedDB入门https://blog.csdn.net/qq_39958056/article/details/125524904CSDN
Web 终极拦截技巧(全是骚操作)https://www.bilibili.com/read/cv30898328/哔哩哔哩
在package.json添加注释https://stackoverflow.com/questions/14221579/how-do-i-add-comments-to-package-json-for-npm-installStackOverflow
dependencies和devDependencies的区别https://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencieStackOverflow
Vue开发中所有依赖项都应该是devDependencies吗https://stackoverflow.com/questions/49467408/vuejs-npm-should-all-dependencies-be-devdependenciesStackOverflow

工具

名称链接备注
JavaScript框架语法特性对比https://component-party.jason-liang.com/-
UI Lib Pickerhttps://ui-libs.vercel.app/Vue3 Nuxt3 UI库介绍
CSS Dinerhttps://flukeout.github.io/CSS选择器练习
CSS Grid Gardenhttps://cssgridgarden.com/CSS Grid练习
Flexbox Froggyhttps://flexboxfroggy.com/Flexbox练习
Can I usehttps://caniuse.com/浏览器兼容性查询
JSRobothttps://www.jsrobot.net/JavaScript练习
Animationshttps://css-animations.io/CSS动画练习
Flat UI Colorshttps://flatuicolors.com/配色参考
transition.csshttps://www.transition.style/CSS动画库
响应式应用工具Responsively Apphttps://responsively.app/
字号对比Typescalehttps://typescale.com/
Fancy Border Radius Generatorhttps://9elements.github.io/fancy-border-radiusborder-radius值可视化生成
新拟物CSS生成Neumorphism.iohttps://neumorphism.io/