- 命名遵循驼峰规则：demoUser
- 配置文件均按照xxConfig，数据配置均按照xxOption/xxData：
- 封装的函数均按照export const FN = () => {}，内部调用函数用普通的function FN() {}
- Store中对外函数命名均为useXx
- interface尽量抽取出来，且抽取到最小粒度
| 接口 | 前端 | 后端 | 前端API示例 | 后端API示例 |
|---|---|---|---|---|
| 读取 | search / get | read / select | searchDemo / getDemo | readDemo / selectDemo |
| 写入 | save / add | create | saveDemo / addDemo | createDemo |
| 编辑 | edit / update | update | editDemo | updateDemo |
| 删除 | remove / delete | delete | removeDemo | deleteDemo |
| 上传 | upload | import | uploadDemo | importDemo |
| 下载 | download | export | downloadDemo | exportDemo |
| 实体 | get / set | getDemo / setDemo |
| 插件网站 |
|---|
| Vite 官方推荐插件 |
| vue3js |
| vue3-resource |
| JS 引擎 |
|---|
| bun 下一代 |
| nodejs |
| deno |
| 包管理 |
|---|
| pnpm 综合实用性最佳 |
| yarn next |
| npm |
| 构建工具 |
|---|
| 👍 Vite 开发环境极速启动（ESM 原生加载） |
| 👍 Vite Plus 下一代 未上线 |
| Webpack 插件生态丰富，支持代码分割、热更新 笨重 |
| Turborepo 下一代 Webpack |
| Parcel |
| SWC |
| esbuild 极速构建（Go 语言编写，并行处理） |
| Rollup 生成更小的库代码，Tree-shaking 高效 |
| Rspack |
| 语法糖 |
|---|
| vue3 官网 |
| 👍 svelte 官网 |
| react 官网 |
| vue2 官网 |
| TS |
|---|
| typescript 官网 |
| 路由管理 |
|---|
| 👍 vue-router 官网 |
| 👍 react-router 官网 |
| 根据文件自动生成路由 |
| 状态管理 |
|---|
| 👍 Pinia 官网 |
| mitt 官网 |
| vuex 官网 |
| JavaScript标准库 |
|---|
| core-js |
| 网络请求 |
|---|
| axios 官网 |
| ws 官网 ts 需安装 @types/ws |
| socket.io socket.io-client |
| qs 序列化参数，并非网络请求 |
| 样式组件 -D 注意重写组件样式的引用 |
|---|
| sass |
| sass-loader |
| less |
| less-loader |
| vue-style-loader |
| vue-template-compiler |
| postcss必装，自动添加浏览器适配前缀 |
| postcss |
| postcss-preset-env |
| autoprefixer |
| postcss-loader |
| 快速样式CSS 并不推荐，建议大家自行封装 |
| unocss |
| tailwindcss doc |
| windicss |
| 语法检查 -D |
|---|
| eslint doc |
| 👍 prettier doc |
| eslint-plugin-prettier |
| 代码提交信息校验 -D |
|---|
| husky |
| commitlint |
| commitizen |
| cz-conventional-changelog |
| cz-customizable |
| 节点和浏览器的BDD / TDD断言库 |
|---|
| chai |
| 环境配置获取 |
|---|
| dotenv |
| 日志 |
|---|
| eruda |
| vconsole |
| vue-vconsole-devtools |
| mock API -D |
|---|
| better-mock |
| axios-mock-adapter 只拦截 axios |
| node-mocks-http |
| vite-plugin-mock |
| mockjs 安全 bug 未解决请勿使用 |
| 文档 |
|---|
| doczjs |
| 无头单组件 |
|---|
| 👍 Vue shadcn 👍 React shadcn |
| React |
|---|
| bootstrap 官网 |
| mui 官网 |
| ant-design 官网 |
| chakra-ui 官网 |
| semi 官网 |
| rsuitejs 官网 |
| chakra 官网 |
| 移动端 |
|---|
| 👍vant |
| 👍ionic-framework 官网 VRA |
| 👍nutui @nutui/nutui@next 官网 |
| Tencent |
| vux |
| varlet 官网 |
| onsen 官网 |
| uvui 官网 |
| wave 官网 |
| 小程序 图表 |
|---|
| uCharts uCharts 官网 |
| echarts-for-weixin |
| UI 单一组件 |
|---|
| 表格 vxe-table 官网 |
| 表格 tanstack 官网 |
| 布局 vue-grid-layout |
| UI 进度条-滑动条 |
|---|
| vuejs-progress-bar |
| vue-slider-component |
| UI JS |
|---|
| 👍 Bootstrap |
| 👍 layui 官方！！！ |
| H5 zeptojs |
| PC javascript |
| Framework7 |
| Foundation |
| Onsen UI |
| heyui |
| varletjs varletjs |
| VUE2 UI |
|---|
| elementUI 官网 |
| mint-ui 官网 |
| buefy 官网 |
| 轮播图 |
|---|
| swiper 支持PC、H5 |
| @splidejs/vue-splide |
| slidev 演示文稿 |
| vue3 seamless 无缝滚动 |
| vue2 seamless 无缝滚动 |
| vue3 infinite 无限滚动 |
| 滚动 |
|---|
| better-scroll |
| 日历 |
|---|
| vue-functional-calendar |
| vuejs-heatmap |
| mpvue-calendar |
| 图标 |
|---|
| iconfont 官网 |
| iconify 官网 |
| iconpark 官网 |
| iconbox 官网 |
| 安装包 |
| unplugin-icons 官网 官网 |
| xicons 官网 官网 |
| boxicons 官网 官网 |
| 无字体库 |
| flaticon 官网 |
| icons8 官网 |
| iconfinder 官网 |
| svg |
|---|
| vite-svg-loader |
| svg-sprite-loader |
| 加载 loading |
|---|
| nprogress |
| vue-simple-spinner |
| vue-loading-overlay |
| vue-progressbar |
| vue-spinner |
| vue-blockui |
| 营销组件 |
|---|
| 抽奖转盘/九宫格/老虎机 |
| 拖拽 |
|---|
| Sortable |
| vue3-dnd |
| vue3 vue.draggable.next |
| vue-draggable-plus |
| revue-draggable |
| vue3 draggable-resizable |
| vue-drag-resize |
| vue2 Vue.Draggable |
| vue2 vue-grid-layout |
| 二维码 |
|---|
| qrcode |
| vue-qr |
| qrcode.vue |
| qrcodejs2 |
| 全屏 |
|---|
| screenfull |
| vue-fullscreen |
| html2canvas，页面截图 |
|---|
| html2canvas |
| 裁剪图片 |
|---|
| vue-cropper |
| viewerjs |
| v-viewer |
| Markdown编辑器 |
|---|
| Vditor 官网 |
| Vue-markdown-editor 官网 |
| Md-editor-v3 官网 |
| markdown-exit 官网 |
| vue-markdown-renderer 官网 |
| 流程图 |
|---|
| bpmn |
| logic-flow |
| vue3-bpmn |
| vue3-tsx-bpmn |
| vue2-bpmn |
| vue2-bpmn |
| bpmn 中文文档 |
| mermaid |
| xyflow 没有vue版 |
| gojs |
| 工作流 框架 |
|---|
| NodeJS n8n |
| 地图 |
|---|
| vue-amap 高德 |
| vue-baidu-map 百度 |
| 数据屏 |
|---|
| DataV |
| 工具合集 |
|---|
| vuepress |
| 工具集合 |
| cookie管理 |
|---|
| cookie |
| js-cookie |
| 日期格式化 |
|---|
| dayjs |
| date-fns |
| luxon |
| date-fns-tz |
| ~~~moment~~~ |
| 剪切板 |
|---|
| vue-clipboard2 |
| clipboard.js |
| 打印 |
|---|
| print-js |
| vue-plugin-hiprint |
| vue3-print-nb |
| 加密解密 |
|---|
| crypto-js |
| md5 |
| bcryptjs |
| jsencrypt |
| jsrsasign |
| base64-js |
| js-base64 |
| ua |
|---|
| ua-parser-js |
| isbot |
| ua-regexes-lite |
| bowser |
| 本地数据存储 |
|---|
| lodash |
| lowdb |
| 国际化 |
|---|
| i18n-next 不限制环境 官网 |
| vue-i18n 官网 |
| vue-i18n + @intlify/unplugin-vue-i18n |
| 三方授权登录集成库 |
|---|
| next-auth |
| @okta/okta-auth-js |
| hellojs |
| telegram vue3-telegram-login |
| telegram vue-tg |
| 分享插件 |
|---|
| vue-social-sharing |
| vue-socialmedia-share |
| nativeshare 唤起浏览器自身分享组件 |
| 文件上传、解析、保存，office 预览、上传、导出、导入 包含：xls，xlsx，doc，docx，pdf，csv |
|---|
| 图片上传 |
| exceljs |
| sheetjs |
| csv |
| papaparse |
| xlsx 不建议使用有高危漏洞 |
| 文件类型判断 file-type |
| Office Excel handsontable |
| Office Word mammoth |
| PDF pdfjs-dist |
| PDF vue-pdf vue2 |
| @vue-office docx excel pdf v2需要安装依赖 vue-demi |
| 文件保存 file-saver |
| Uppy 官网 |
| Vue-filepond 官网 |
| sharp 图片转换 官网 |
| 支付 |
|---|
| stripejs 官网 |
| vue-stripe 官网 |
| 视频播放 |
|---|
| dplayer 支持弹幕 |
| vue-video-player |
| vue-core-video-player |
| 3D |
|---|
| WebGL |
| threejs 官网 GitHub |
| babylonjs 官网 |
| AR model-viewer |
| 浏览器相关的插件 |
|---|
| devtools-detector 判断浏览器是否打开了控制台 |
| 动画 |
|---|
| auto-animate |
| tsparticles 粒子动画 |
| lottiefiles 表情动画 |
| angrytools 生成 css |
| cssanimation |
| 动画 滚动视觉差 |
|---|
| scrollrevealjs |
| lax.js |
| rellax.js |
| vue-prlx 滚动视觉差 |
| scrolly 滚动视觉差 |
| fullPage.js 付费 |
| 动画 鼠标 |
|---|
| Hover css库 官网 |
| v-wave 指令库 官网 |
| elrumordelaluz 鼠标放上效果 |
| csshake 抖动效果 |
| 动画 Loading |
|---|
| three-dots 等待效果 |
| http://k21vin.gitee.io/front-end-data-visualization/#/native/pureCSS/loading |
| https://juejin.cn/post/7037036742985121800 |
| 动画 文字 |
|---|
| typed 打字机效果 |
| vue-textra |
| 动画 |
|---|
| vivus |
| mojs |
| webcode |
| 动画 渐变 |
|---|
| granim |
| particles 背景图 |
| 本项目并没有测试用例，如果大家需要的话请自行添加，以下是测试集成依赖 |
|---|
| eruda 调试 |
| @vue/test-utils 推荐 这个可以作为核心 配合jest使用更好 |
| jestjs |
| mochajs webpack |
| 适配移动端 -D |
|---|
| vw方案 需要依赖style-loader 且需要删除@vue/cli-plugin-eslint |
| postcss-px-to-viewport |
| postcss-px-to-viewport-8-plugin TS 请用这个 |
| rem方案 |
| postcss-pxtorem |
| amfe-flexible |
| 框架（✅支持 ❌不支持 - 部分支持） | 小程序 | Web | Mobile | PC |
|---|---|---|---|---|
| uni-app 官网 小程序首选 | ✅ | ✅ | ✅ | ❌ |
| taro 官网 京东系首选 | ✅ | ✅ | ✅ | - |
| flutter 官网 👍性能优先 | ❌ | - | ✅ | ✅ |
| React Native 官网 | ❌ | - | ✅ | ✅ |
| hippy 官网 | ❌ | ✅ | ✅ | ❌ |
| ionic | ❌ | ❌ | ✅ | ✅ |
| ionic 官网 | ❌ | ❌ | ✅ | ✅ |
| Native Script 官网 | ❌ | ✅ | ✅ | ✅ |
| lynxjs 官网 React | ❌ | ✅ | ✅ | ❌ |
| tauri 官网 Vue | ❌ | ✅ | ✅ | ✅ |
| electronjs 官网 | ❌ | ❌ | ✅ | ✅ |
| nativescript-vue 官网 | ❌ | ❌ | ✅ | ✅ |
| api |
|---|
| hoppscotch |
| bruno |
| insomnia |
| yapi 支持本地部署 |
| apifox |
| apipost |
| code |
|---|
| codepen |
| css 在线 |
| 框架 |
|---|
| NuxtJS vue |
| NuxtJS ui |
| NextJS Next.js |
| astro |
| quasar 官网 组件一体 |
| vite ssr-vue |
| vite-plugin-ssr |
| Hugo |
| Docusaurus |
| Jekyll |
| Gatsby |
| 框架 |
|---|
| expressjs |
| nest |
| socket.io |
| meteor |
| koajs |
| fastify |
| sails |
| egg |
| midwayjs |
| 节省资源，请使用这个 |
|---|
| 字体 CDN |
| cdnjs |
| 字体下载 |
| fonts2u |
| font download |
| maisfontes |
| CMS |
|---|
| strapi |
| hexo 博客 |
| Web3 |
|---|
| @web3auth/auth |
| 游戏 |
|---|
| Eva.js |
| Unity 3D(C/JS) 3D大佬！ |
| Cocos(C/TS) 2D、2.5大佬！ |
| Unreal(C++) 这是一个追求画质的游戏引擎 |
| 小游戏 createjs |
| AI |
|---|
| open-webui |
| OCR tesseract.js |
| OCR tesseract.c++ |
| 低代码 |
|---|
| penpot |
| formily 官网 阿里巴巴 |
| form-generator 官网 |
| mitosis |
| 项目及插件示例 |
|---|
| 小插件合集 |
| 项目示例 |
|---|
| uiverse 开源组件合集 |
| hyperui 开源组件合集 |
| hyperui 开源组件合集 |
| slidev 演示文稿工具 |
| nodejs 开源插件合集 |
| 组件 |
| vue3 优秀组件收集 |
| 项目示例 |
|---|
| 聊天室 |
| 聊天悬浮 |
| 项目模板 |
| 项目模板 |
| Admin server & Web |
|---|
| https://github.com/jeecgboot |
| https://gitee.com/likeadmin |
| https://github.com/yangzongzhuan |
| ant-simple-pro |
| 公共 API 调用 |
|---|
| https://github.com/public-apis/public-apis |
言外
本项目的 TS 单纯的用来学习，内部大部分文件使用的是 any js 写法
TS 的优缺点不在这里一一赘述，给大家的建议是：个人或者小型项目直接用 js，大型项目根据人员选，超大型或者基础库使用 ts。