1. 如果build失败或者运行异常请执行 pnpx mrm@2 lint-staged
2. husky + lint-staged + @commitlint/cli 规范提交格式（提交代码前自检）
3. 如果有条件，请将 font 文件存入 CDN 否则将会在本地文件占用很大一部分资源，图片尽可能压缩
- 三方包引入尽可能小写，自定义尽可能大写
- cjs在不久的未来将不再支持，后续尽可能使用mjs，由于现在某些包暂不支持，所以使用js+ts+mjs混用的方式
- 推荐使用pnpm(curl -fsSL https://get.pnpm.io/install.sh | sh -)安装依赖，其次yarn或者npm
- 更新升级包版本使用 pnpm 不再安装 ncu，直接执行 pnpm update
- 注意所有配置菜单的数据，均由前端提供
- 项目本身配置99%都在vite.config.ts里面，参数设置都在根目录下，而非src下
- src下的config目录是系统默认参数，及部分数据配置
- 使用 reactive 请使用 let，使用 ref 请使用const
- ！！！注意VUE3中的reactive使用，如果需要更新视图需要抽出interface。！！！
- 开发问题 Typescript 和 TSX TS的泛型 在结合 tsx 的时候使用as形式(兼容jsx)
- 如果你觉得你的package.json乱糟糟，那么使用 npx sort-package-json 来解决吧
关于手机端适配（脱离业务场景谈解决方案都是耍流氓）解决方案
- 稳定解决方案：使用媒体查询，但建议企业官网等页面较少的网站，且对网站设计者和开发者水平有一定的要求，开发调试比较麻烦
- 切换URL改变页面呈现方式：通过监听获取当前是否是移动端，然后改变对应的URL。需要设计两套UI，开发者需要写两套页面及样式。优点是灵活，缺点是开发周期长
- rem 计算：目前最多的，通过对根字体的设置，自动换算
- vw 计算：当下及以后的趋势，本项目就是采用的此计算方式，不打算采用和rem混用的方式了
我们实际的需求一般很少拿着网站在一个超大屏展示，部分均为正常屏幕所以vw模式基本上满足80%的要求
一套UI同时适配PC与Mobile的话，尽可能使用媒体查询，且UI慎重选择，最好自己单独写
如果PC和Mobile呈现不同的内容，那么最好写两套UI
单独的PC和Mobile大家直接单独写，但是尽量根据设备判断不要在不适配的设备上展示
- 命名遵循驼峰规则：demoUser
- 配置文件均按照xxConfig，数据配置均按照xxOption/xxData：
- 封装的函数均按照export const FN = () => {}，内部调用函数用普通的function FN() {}
- Store中对外函数命名均为useXx
- interface尽量抽取出来，且抽取到最小粒度
| 接口 | 前端 | 后端 | 前端API示例 | 后端API示例 |
|---|---|---|---|---|
| 读取 | query / get | read / select | queryDemo / getDemo | readDemo / selectDemo |
| 写入 | save / add | create | saveDemo / addDemo | createDemo |
| 编辑 | edit | update | editDemo | updateDemo |
| 删除 | remove | delete | removeDemo | deleteDemo |
| 上传 | upload | import | uploadDemo | importDemo |
| 下载 | download | export | downloadDemo | exportDemo |
| 实体 | get / set | getDemo / setDemo |
| 插件网站 |
|---|
| Vite 官方推荐插件 |
| vue3-resource |
| vue3js |
| 核心依赖 |
|---|
| 👍 vite 官网 |
| vue-cli |
| vue |
| vue3 官网 |
| vue2 官网 |
| 路由管理 |
| 👍 vue-router 官网 |
| 状态管理 |
| 👍 Pinia 官网 |
| vuex 官网 |
| JavaScript标准库 |
|---|
| core-js |
| 网络请求 |
|---|
| axios 官网 |
| ws 官网 ts 需安装 @types/ws |
| socket.io socket.io-client |
| qs 序列化参数，并非网络请求 |
| TS |
|---|
| typescript 官网 |
| ts-node 官网 ts-node **.ts |
| 样式组件 -D 注意重写组件样式的引用 |
|---|
| sass |
| sass-loader |
| node-sass |
| less |
| less-loader |
| style-resources-loader |
| svg-sprite-loader |
| text-loader |
| vue-style-loader |
| vue-template-compiler |
| postcss必装，自动添加浏览器适配前缀 |
| postcss |
| autoprefixer |
| postcss-loader |
| 快速样式CSS 并不推荐，建议大家自行封装 |
| unocss |
| tailwindcss doc |
| windicss |
| 语法检查 -D |
|---|
| eslint |
| 👍 prettier |
| eslint-plugin-prettier |
| VUE2 UI PC 官方 |
|---|
| elementUI 官网 |
| mint-ui 官网 |
| buefy 官网 |
| 含商业收费版 |
|---|
| 低代码 |
|---|
| formily 官网 阿里巴巴 |
| form-generator 官网 |
| mitosis |
| 项目及插件示例 |
|---|
| reactiveapps 官网 |
| 小插件合集 |
| 单一UI组件 |
|---|
| 表格 vxe-table 官网 |
| 表格 tanstack 官网 |
| 布局 vue-grid-layout |
| 树 vue-treeselect |
| 静态UI JS PC H5 |
|---|
| 👍 Bootstrap |
| 👍 layui 官方！！！ |
| H5 zeptojs |
| PC javascript |
| Framework7 |
| Foundation |
| Onsen UI |
| heyui |
| varletjs varletjs |
| 营销组件 |
|---|
| 抽奖转盘/九宫格/老虎机 |
| 图标 |
|---|
| iconfont 官网 |
| iconify 官网 |
| iconpark 官网 |
| 无字体库 |
| flaticon 官网 |
| icons8 官网 |
| iconfinder 官网 |
| 加载 loading |
|---|
| nprogress |
| vue-simple-spinner |
| vue-loading-overlay |
| vue-progressbar |
| vue-spinner |
| vue-blockui |
| 进度条-滑动条 |
|---|
| vuejs-progress-bar |
| vue-slider-component |
| vue-radial-progress |
| 轮播图 |
|---|
| swiper 支持PC、H5 结合 vue-awesome-swiper 使用 |
| vue-concise-slider |
| @splidejs/vue-splide |
| vue2 seamless 无缝滚动 |
| vue3 seamless 无缝滚动 |
| vue3 infinite 无限滚动 |
| 拖拽 |
|---|
| vue3-dnd |
| vue3 vue.draggable.next |
| vue-draggable-plus |
| revue-draggable |
| vue3 draggable-resizable |
| vue2 Vue.Draggable |
| vue2 vue-grid-layout |
| vue2 vue-drag-resize |
| 全屏 |
|---|
| screenfull |
| html2canvas，页面截图 |
|---|
| html2canvas |
| 二维码 |
|---|
| qrcode |
| vue-qr |
| qrcode.vue |
| qrcodejs2 |
| 日历 |
|---|
| vue-functional-calendar |
| vuejs-heatmap |
| 滚动 |
|---|
| better-scroll |
| 裁剪图片 |
|---|
| vue-cropper |
| 富文本编辑器 |
|---|
| tiptap 官网 |
| vue3 wangeditor 官网 |
| vue2 wangeditor 官网 |
| react wangeditor 官网 |
| js wangeditor 官网 |
| Quill |
| vue-quill-editor |
| ckeditor5-vue |
| TinyMCE 6 官网 |
| TinyMCE 官网 |
| Froala |
| Trumbowyg |
| slate |
| squire |
| summernote |
| Markdown编辑器 |
|---|
| Vditor 官网 |
| Vue-markdown-editor 官网 |
| Md-editor-v3 官网 |
| 流程图 |
|---|
| bpmn |
| logic-flow |
| vue3-bpmn |
| vue3-tsx-bpmn |
| vue2-bpmn |
| vue2-bpmn |
| bpmn 中文文档 |
| mermaid |
| xyflow 没有vue版 |
| gojs |
| 地图 |
|---|
| vue-amap 高德 |
| vue-baidu-map 百度 |
| 剪切板 |
|---|
| vue-clipboard2 |
| cookie管理 |
|---|
| js-cookie |
| 日期格式化 |
|---|
| date-fns |
| dayjs |
| ~~~moment~~~ 不再推荐 |
| 打印 |
|---|
| vue3-print-nb |
| print-js |
| vue-plugin-hiprint |
| 加密解密 |
|---|
| crypto-js |
| md5 |
| bcryptjs |
| jsencrypt |
| jsrsasign |
| base64-js |
| js-base64 |
| ua |
|---|
| ua-parser-js |
| isbot |
| ua-regexes-lite |
| bowser |
| 本地数据存储 |
|---|
| lodash |
| lowdb |
| 国际化 |
|---|
| i18n-next 支持VUE/React/Server...... |
| vue-i18n |
| 复制粘贴 |
|---|
| clipboard |
| 三方授权登录集成库 |
|---|
| next-auth |
| @okta/okta-auth-js |
| hellojs |
| 分享插件 |
|---|
| vue-social-sharing |
| vue-socialmedia-share |
| @vue/shared |
| @vue/cli-shared-utils |
| 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 官网 |
| 支付 |
|---|
| stripejs 官网 |
| vue-stripe-elements-plus 官网 |
| vue-stripe 官网 |
| 视频播放 |
|---|
| vue-video-player |
| vue-core-video-player |
| 绘图 3D |
|---|
| three.js |
| 3D |
|---|
| WebGL |
| threejs 官网 GitHub |
| babylonjs 官网 |
| AR model-viewer |
| 游戏 |
|---|
| Eva.js |
| Eva-plugin-renderer |
| Eva-plugin-renderer-img 官网 |
| 浏览器相关的插件 |
|---|
| devtools-detector 判断浏览器是否打开了控制台 |
| Other |
|---|
| vuepress |
| https://github.com/Molunerfinn/PicGo |
| auto-animate |
| tsparticles 粒子动画 |
| lottiefiles 表情动画 |
| angrytools 生成 css |
| cssanimation |
| 动画 滚动视觉差 |
|---|
| scrollrevealjs |
| lax.js |
| rellax.js |
| vue-prlx 滚动视觉差 |
| scrolly 滚动视觉差 |
| 动画 鼠标 |
|---|
| 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 |
| 动画 SVG |
|---|
| vivus |
| mojs |
| 动画 渐变 |
|---|
| granim |
| particles 背景图 |
| 节点和浏览器的BDD / TDD断言库 |
|---|
| chai |
| cross-env |
| 环境配置获取 |
|---|
| dotenv |
| 日志 |
|---|
| eruda |
| vconsole |
| vue-vconsole-devtools |
| 代码提交信息校验 -D |
|---|
| husky |
| commitlint |
| commitizen |
| cz-conventional-changelog |
| cz-customizable |
| 本项目并没有测试用例，如果大家需要的话请自行添加，以下是测试集成依赖 |
|---|
| @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 |
| 跨端框架推荐：包含小程序啥的 |
|---|
| uni-app 官网 全平台跨端含APP等等 |
| taro 官网 3.x已支持vue |
| hippy 官网 3.x已支持vue |
| APP开发 |
|---|
| flutter 官网 |
| ionic 官网 ionic |
| cordova 官网 |
| Native Script 官网 |
| React Native 官网 |
| api |
|---|
| apifox |
| yapi |
| hoppscotch |
| code |
|---|
| codepen |
| css 在线 |
| 框架 |
|---|
| NuxtJS vue |
| NuxtJS ui |
| Next.js react |
| astro |
| quasar 官网 组件一体 |
| vite ssr-vue |
| vite-plugin-ssr |
| Next.js |
| Hugo |
| Docusaurus |
| Jekyll |
| Gatsby |
| 框架 |
|---|
| expressjs |
| nest |
| socket.io |
| meteor |
| koajs |
| fastify |
| sails |
| egg |
| midwayjs |
| 节省资源，请使用这个 |
|---|
| 字体 CDN |
| cdnjs |
| 字体下载 |
| fonts2u |
| font download |
| strapi |
| hexo 博客 |
| 框架 |
|---|
| NodeJS n8n |
| 游戏开发框架 |
|---|
| Unity 3D(C/JS) 3D大佬！ |
| Cocos(C/TS) 2D、2.5大佬！ |
| Unreal(C++) 这是一个追求画质的游戏引擎 |
| 小游戏 createjs |
| slidev 演示文稿工具 |
| 项目示例 |
|---|
| 水墨文档 vue2 停更 |
| 聊天室 |
| 聊天悬浮 |
| vite doc |
|---|
| https://github.com/sl1673495/blogs |
| https://github.com/antfu/vitesse |
| https://github.com/vuejs/vitepress |
| 各种插件 |
|---|
| 组件 |
| https://github.com/sindresorhus/awesome-nodejs |
| https://github.com/vitejs/awesome-vite |
| https://github.com/nekobc1998923/vitecamp |
| https://hu-snail.github.io/vue3-resource/ |
| Admin server & Web |
|---|
| https://github.com/jeecgboot |
| https://gitee.com/likeadmin |
| https://github.com/yangzongzhuan |
| ant-simple-pro |
言外
本项目的 TS 单纯的用来学习，内部大部分文件使用的是 any js 写法
TS 的优缺点不在这里一一赘述，给大家的建议是：个人或者小型项目直接用 js，大型项目根据人员选，超大型或者基础库使用 ts。