3.6 KiB
3.6 KiB
2026-07-25
visual-html 项目改造为 Vue3+TS+Vite
- 项目性质：可视化大屏模板集合导航页（66 个模板卡片、10 个分类），原为纯静态 HTML + jQuery + animate.css。
- 备份：原
index.html+static/已移入bak/目录。 - 新架构：
- Vue 3.5 + TypeScript + Vite 5（
vue-tsc类型检查 +vite build均通过） src/data/templates.ts：66 条卡片数据（从原 index.html 提取），类型见src/types.ts- 组件：
App.vue+components/NavBar.vue（锚点导航）+CategorySection.vue+TemplateCard.vue（hover 动画 rubberBand→shake 用 Vue class 绑定替代 jQuery） src/utils/device.ts：TS 重写 device.js 移动端检测；移动端访问隐藏导航并 alert- 样式：reset.css / animate.css / main.css 拷至
src/assets/styles/，背景图在src/assets/images/
- Vue 3.5 + TypeScript + Vite 5（
- 关键决策：
resource/（3000+ 文件的大屏模板库）整体移到public/resource/，保证卡片链接./resource/html/...不变、构建后可直接部署。 - 环境注意：本机
~/.npm缓存目录权限有问题，npm install 需加--cache /tmp/...绕过。 - dev server:
npm run dev（端口 5173），已验证首页/大屏子页/预览图/favicon 均 200。
resource 大屏全部改写为 Vue（进行中）
- 用户决策：monorepo 单仓多页；echarts 走 npm（装的是 echarts@4.9.0 + @types/echarts@4.9.22，兼容老模板
itemStyle.normal语法，原项目内置 echarts 4.0.4）；jQuery 用 Vue 重写；66 个页面一次性全改。 - 架构：vue-router，
/dashboard/<分类>/<编号>路由；每个大屏在src/dashboards/<分类>/<编号>/下自包含（index.vue + assets/ + components/），方便整目录拷贝。样式用 scoped，body 选择器改写到根类.dash-root。 - 通用模式：
initChart(id, option)收集实例 + onUnmounted dispose；window resize 统一 onResize；滚动列表用响应式数组 rotate + transition；rollNum 插件重写为RollNum.vue（CSS transition + tops 数组驱动，02/04 是 40px 变体）；高德地图用动态 script 注入（key 保留原样）；china.js转 ESM：perl 剥 UMD 壳 →assets/china.ts（@ts-nocheck）；高德点位 china.js →assets/points.ts（2.1MB，sed 改 export）。 - 已完成：01vehicles 全部 8 页（01 数字滚动+8图、02 高德聚合+预警滚动、03 中国地图流向+仪表盘、04 高德+进度条、05 Bootstrap 布局+地图、06/08 新能源孪生页、07 3D 相册 Carousel3D+文字滚动）。tsc 全过。
- 进度更新（第二次会话）：02agriculture(2)、03traffic(3)、04logistics(8 全)、05Ecommerce(4 全) 已完成。05Ecommerce/02 五屏用 jQuery 保真提取（mapIndex/mapSecond/mapTest.ts + initMap 返回清理函数包装 window.setInterval/setTimeout）；home.vue 用 iframe 指向子路由轮播。main.css 首页全局样式已限定
.home-page前缀防污染。新增依赖：jquery+@types/jquery、echarts-liquidfill@2.0.6（echarts4 兼容）。 - 踩坑记录：UMD 剥壳后地图文件顶层
return;需清除（13 个文件已修）；原 HTML 常见畸形标签（多余</ul>/缺</div>）会破坏 Vue 编译，用脚本统计 div 平衡修复；css 中游离*/、缺失字体文件引用、max-width: : 100%这类原站容错写法会被 vite/postcss 拒绝，需清理。 - 待做：06government(13，已完成 01+02 共 6 路由)、07universal(8)、08bigData(5)、09others(15)、10layout(11)；templates.ts 卡片链接改路由；预览图迁移；删 public/resource；全量 build。