前言
由于历史原因web端项目是纯node渲染并且历史悠久不好维护(6年前)一代目已离职,公司前端技术选型上是转到vue(ssr),所以需要将web端重构到达可维护性,提升品牌形象吸引更多用户访问体验提升,技术选型五年来不会过时
要点
- 响应式适配电脑端(PC)/移动端(M),可参考热门框架Bootstrap(只参考)
- 响应式(@media)不支持ie,神策pv打点ie访问量几乎没有所以不考虑在内
- H5/C3/JS新特性注意兼容,可以通过caniuse和MDN查询,使用语义化标签(seo)
重构方案
Nuxt v3(Vue3)
Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性官网地址
Ant Design of Vue(ui库)
Ant Design 的 Vue 实现,开发和服务于企业级后台产品。虽然官网说明是用于后台其实官网也适合用并且设计风格是跟着Ant Design来规划 官网地址
约束风格
- Eslint
- Prettier
- Git Hook
- Nuxt
清单
- Webpack
- Nuxt(vue)
- Ant Design
- Less
阶段一
- 设计/前端/后端各一人,由于使用旧接口所以后端需要配合,接口不做迁移
- 前端梳理页面以及功能要点整理一份大体清单给到设计,区分高中低(pv)
- 设计好交由产品确定后再交付给前端进行开发
阶段二
- 时间安排为45天,前端/设计同步进行
- 先设计开发高中低依次进行
- 交互给产品高质量高保真体验交互流畅交付(75%)
阶段三
- 进行收尾工作功能点为低
最终以产品交付确定为准为收货