knockoutjs更换为Vue架构-计划采用方案

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

本文写于2018年5月底，2018年9月完成与实施。笔者在写本文时还不知道有vue cli3，之前版本的vue配置项还比较复杂，到8月份在一篇文章上看到cli3正式发布，解决了计划中遇到的大部分问题，这时才感觉时机成熟，正式在团队中推行新架构，这里是当时设计架构所考虑的内容。

技术栈与背景

整体参考vue-cli，根据实际情况做一些调整，需要将npm仓库指向企业级包管理器，方便管理和个性化。

计划采用多SPA模式（多个单页面应用），内部流转功能采用页面级路由，模块区分以及弹窗页面等小功能独立成各个页面，鉴于目前部署方式，不使用SSR（服务端渲染），打包成静态页面，独立部署

更好的用户体验，首屏加载-骨架屏（低优先级，需要预留出切入点以便后续增加）每个页面首屏加载考虑自动生成骨架屏（参考 饿了么罗冉大大【自动化生成H5骨架页面】思路）提高体验，内部数据加载还使用过渡动画转圈圈等

• 构建工具 ：npm-scripts 这个比较常用，需研究npm自动化构建  搭建本地npm服务器

• 打包工具：webpack，学习配置，多SPA的同时公共资源复用

• 高版本js兼容：babel（在转换过程中间做手脚更深入的标准化代码风格？源于王络菲大大，需研究babel原理，可以后期加入）

• 浏览器支持：browserslist

• css：照抄vue-cli，support for PostCSS, CSS Modules and pre-processors including Sass, Less and Stylus.

• 代码风格统一：ESLint

• 开发环境应用服务器  用于指定静态文件目录和代理服务器，代理服务器，沿用vue-cli 的Dev Server Proxy

• 开发框架vue，较低的学习成本，快速上手

• 样式编写采用less，已经有了技术积累，不用重新学习

• 避免重复造轮子-计划引入element，同样提供了产品设计工具，可能需要接入sass修改其风格为公司UI规范

• 数据交互方式，使用axios替代原来使用的$.ajax

• 考虑不再引入额外的工具包，使用原生方法处理es 6\7\8....

• 考虑使用svg图标库来代替icon font？

• 自动化测试方案（暂不实施），开启录制模式后根据用户操作自动录制测试脚本，而且可监控状态，完整回滚，参考支付宝大佬侯振宇www.cnblogs.com/sskyy/p/700…

现状与拟解决方案

• 公共资源部分

• 通用组件-目前的现状是多分支多项目，而基础元素大致相同，绝大部分通用组件都相同却分布在各个项目内，每次出现问题需要修改多处，很容易漏掉，导致同一个问题反复出现。
  拟采用解决方案：将公共部分独立出来，建设成通用组件库，使用公司本地服务器npm包管理，加入key/版本号来处理各项目中组件性之处

• 而通用样式大部分基础元素相同，针对项目具体情况，可能颜色风格有差异，也有一些个性的样式表
  拟采用解决方案：通用样式一套（拥有全局变量定义、样式定义、以及混入等）；各项目独立部分：2个文件根据项目个性化（主题颜色变量定义、个性化样式表）。同样使用npm管理，组件依赖于样式（npm是否能根据参数控制引入不同的less？）

• 通用方法大部分相同，也有很多是个性化的部分
  拟采用解决方案：将全局通用处理方法使用npm包管理处理，项目内也存在一个通用方法以及网络请求过滤器拦截，方便统一处理。

• 页面部分

• 按模块分包-目前是根据模块分包去管理页面，很多地方用到，保留。vue推荐是SPA需要修改其原有配置
  拟采用解决方案：调整目录结构 pages/{module-name}/{page-name}/main.js + app.vue + components，components页面级组件+路由   （是否需要有module级别的components？）

• 模板页面复用-vue使用模板页面，采用loader后续渲染，因而模板页面可能大部分都是相同的，多SPA中title需要变化
  拟采用解决方案：index.html复用，使用html-webpack-plugin，使用webpack多个entry配置变量写入到各个文件中替换title。参考资料

• 页面模板-由于多数页面整体风格相似，目前使用ejs的include去将公共头部、脚部、菜单导航 公用并引入到各页面中，每次新建页面时布局都要重新拷贝，多是重复工作且不可靠
  拟采用解决方案：1、接入pug（jade）模板语言 继承layout （优点：书写更简洁，模板定义方便；缺点：需额外接入解析器，需额外学习，不过成本不高） 2、采用组件mixins或extends（优点：vue原生支持；缺点：样式冲突、污染问题，组件嵌套，内部传值）建议pug，需讨论

• ajax请求拦截-目前采用改写$.ajax实现此方案，便于请求通用处理
  拟采用解决方案：需调查axios如何实现，生命周期？增加事件？

• 打包

• 静态资源部分-目前是根据页面需要引用不同的库，图片也是各自引用，整体未压缩和合并，由于每次打包引用资源路径均相同，存在因为缓存而无法实时更新的问题，另外页面一次加载了过多的资源，性能较差
  拟采用解决方案：精简js库，充分利用原生js优势；使用webpack将通用资源合并压缩到公共目录，在打包时以文件哈希值命名，解决缓存问题；页面级资源js/css文件合并压缩到对应页面的目录；本地图片考虑自动合并成雪碧图

• 组件部分-目前使用ko的组件是在打包时遍历页面html找出组件定义，从组件库中引用对应的组件打包成js和css在页面引用，按需引用思路，需保留
  拟采用解决方案：从组件库中按需引入所需要组件的模块，webpack打包自动处理

• 在打包过程中参数传递-目前使用ejs模板可以在过程中传递参数，方便特殊处理，需要保留
  拟采用解决方案：需研究webpack的参数传值，web应用服务器实现过程，增加参数传值，pug模板参数传值？？

• 移动端页面发包-目前是打包完自行压缩和上传ftp，较繁琐，易出错
  拟采用解决方案：尝试自动压缩，根据配置自动上传到对应的测试服务器，生产服务器禁用。实现手段需调查？

• 要打包哪些页面-目前根据数组配置项控制，建议保留
  拟采用解决方案：webpack打包多页面，添加多个entry。根据文件目录自动打包？根据配置项生成对应的entry去打包（建议）？需调查

开发要求

整理此架构下上手开发的基础要求，学习成本规划（什么水平的人员，花多少时间，能做什么事），学习路线规划（逐步形成此架构下上手项目的学习路线，考虑类游戏闯关，任务1、2、3...指定项目审阅标准和建议时间，便于能力考核）

• 基础要求-业务开发

• js\css\html编程基础

• vuejs使用，以及组件开发

• less使用

• pug使用 取消pug使用

• npm命令基础

• 进阶要求-基础组件开发

• 深入了解js，性能、健壮性

• 了解组件规划思想，通用，减少配置，轻便或针对特殊情况重度应用...

• npm包管理

预期目标

在此列出规划时期望达到的目标，以便后期检查

• 类似JAVA的maven，搭建内网的npm仓库，加快外部包下载速度，将公用部分做成npm包，方便内部资源管理
• 建设公共资源库（样式、组件、通用方法包），发布到内网npm仓库，开发环境将npm仓库指向内网仓库，能直接使用命令升级包
  参考产品、UI设计师意见，标准化基础样式库
  标准化功能组件库
  根据以往经验，整理通用工具方法库
• 进一步完善编码规范，以此为基础形成ESLint配置，标准化代码风格
• 建设合适的自动化构建工具，自动化构建基础工程
• 能使用pug模板和vue组件方便灵活的处理可复用元素，基本上杜绝代码拷贝
• 使用less+pug模板，能够低成本更换界面风格  取消pug使用
• 形成平缓的学习路线规划，完成所有学习任务后就可以上手项目，解放初期的带人工作，降低学习门槛。
  （实验）根据任务完成情况给出相应得分（自动化测试方案？系统给分），采用游戏化评分的方式来进行绩效考核
• 进一步提高开发效率，降低学习成本，达到有些前端基础的新人，可以在无人带的情况下，半个月至一个月内上手业务开发
• 更优的前端性能，减少加载时间，平滑过渡动画，（后期）骨架屏
• （后期）自动化测试

需要完成的任务

• - 使用verdaccio搭建内部npm仓库  --已搭好  访问地址 http://192.168.0.11:4873
• - 利用 .npmrc配置指定npm仓库位置，直接从本地仓库获取资源与更新   --已验证可用 ，项目根目录建一个 .npmrc文件，里面写上 registry=http://192.168.0.11:4873
• - 研究npm-scripts，vue-cli自动化构建方案，定制化配置
• - 整理需要用到的三方库，形成package.json，
• - 根据内部编码规范整理ESLint配置
• - 建设基础组件、样式库项目，上传至本地npm，并尝试从外部拉取更新，在项目中尝试使用已建设的组件

  • 1、引入element，并建设其缺少的要使用的组件，组件规划，组件建设
    2、组件版本管理
    3、组件根据传入参数拉取对应不同项目的版本或动态配置
    4、通用样式库建设         
    

• - 整理业务开发使用的目录结构，配置项，按规划搭建开发环境（vue+pug+less+webpack），确定开发方式，打包成静态页面，部署至服务器访问，确定可行性
• - 开发cli或者webstrom插件，自动生成基于已规划好的目录结构的基础文件
• - 基于vue-cli和已整理好的开发环境形成一套自动化构建工具
• - 利用自动化构建项目，快速上手开发（svn仅需保存src目录以及自动化构建生成的配置项，node-modules无需提交，方便更新资源）
• - 整理开发方式的学习曲线，上手开发的先期基础与学习资料，可设置一些挑战任务，由易及难完成项目1，2，3，...快速入门
• - （规划）更换更优的三方库，富文本（支持md?）、文档播放器、文件上传...
• - （规划）自动生成骨架屏方案
• - （规划）自动化测试方案，事件驱动？
• - （规划）CDN?
• - （规划）SPA方案支持
• - （规划）SSR方案支持
• - （规划）开源项目架构以及自动化构建工具
• - ...