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示例 |
---|---|---|---|---|
读取 | 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 |
核心依赖 |
---|
👍 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 官网 |
样式组件 -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 |
数据屏 |
---|
DataV |
营销组件 |
---|
抽奖转盘/九宫格/老虎机 |
图标 |
---|
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 |
mpvue-calendar |
滚动 |
---|
better-scroll |
裁剪图片 |
---|
vue-cropper |
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 |
telegram vue3-telegram-login |
telegram vue-tg |
分享插件 |
---|
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 官网 |
视频播放 |
---|
dplayer 支持弹幕 |
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 |
图片上传 |
工具集合 |
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 |
mock API -D |
---|
vite-plugin-mock |
vite-plugin-mock-dev-server |
vite-plugin-mock-server |
本项目并没有测试用例,如果大家需要的话请自行添加,以下是测试集成依赖 |
---|
@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 |
maisfontes |
strapi |
hexo 博客 |
框架 |
---|
NodeJS n8n |
游戏开发框架 |
---|
Unity 3D(C/JS) 3D大佬! |
Cocos(C/TS) 2D、2.5大佬! |
Unreal(C++) 这是一个追求画质的游戏引擎 |
小游戏 createjs |
slidev 演示文稿工具 |
uiverse 开源组件合集 |
vite 开源插件合集 |
nodejs 开源插件合集 |
组件 |
vue3 优秀组件收集 |
项目示例 |
---|
聊天室 |
聊天悬浮 |
项目模板 |
项目模板 |
Admin server & Web |
---|
https://github.com/jeecgboot |
https://gitee.com/likeadmin |
https://github.com/yangzongzhuan |
ant-simple-pro |
言外
本项目的 TS 单纯的用来学习,内部大部分文件使用的是 any js 写法
TS 的优缺点不在这里一一赘述,给大家的建议是:个人或者小型项目直接用 js,大型项目根据人员选,超大型或者基础库使用 ts。