Nuxt v3(Vue3) Web端重构

676 阅读2分钟

前言

由于历史原因web端项目是纯node渲染并且历史悠久不好维护(6年前)一代目已离职,公司前端技术选型上是转到vue(ssr),所以需要将web端重构到达可维护性,提升品牌形象吸引更多用户访问体验提升,技术选型五年来不会过时

要点

  • 响应式适配电脑端(PC)/移动端(M),可参考热门框架Bootstrap(只参考)
  • 响应式(@media)不支持ie,神策pv打点ie访问量几乎没有所以不考虑在内
  • H5/C3/JS新特性注意兼容,可以通过caniuseMDN查询,使用语义化标签(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%)

阶段三

  • 进行收尾工作功能点为低

最终以产品交付确定为准为收货