如何构建小中型vue前端项目？

以vue项目为例:
1.搭建好项目的脚手架

• vue-cli 脚手架
• 可以根据脚手架定制自己所需要的功能(优化)
  • 调整测试环境和线上环境区别
  • 提高代码质量和规范
  • 加快打包和测试速度
  • 数据模拟mock

2.定义好项目的目录结构

• 归类业务代码的结构分清模块
• 代码避免耦合可拓展,模块之间保持明显的界限,方便拓展
• 规范和定义好团队的代码风格,并且在编辑器中做好拓展
• 部分静态资源应放置至CDN,或者放置统一协商好的代码目录.

3.做好项目的组件化

• 根据业务的需求,并且结合现成的组件结构,初步确定团队组件库的组件类型跟组件底层的逻辑架构。
• 组件应抽离开来,确定公用部分和拓展部分,避免项目后期出现代码耦合.
• 组件应该在熟悉业务和UI逻辑的基础上做好统一,而可拓展的组件需要保持相对强的拓展型。

4.封装团队的构建工具(定义配置文件)

• 团队可持续化集成的重要部分,需要跟运维核实配置文件的路径和可替换的代码片段
• 配置文件一经确认结构和路径规范就很难修改(请谨慎确认)

5.选好基础js 框架,ui 框架,页面模版

• 选择好合适的UI框架,可以节省很大部分的开发时间
• 使用UI框架的同时,一定要结合现成项目的特点和UI要求定制化程度,还有复用组件的使用

6.测试

• 单元测试
• 功能测试

7.持续集成和测试

• jenkins 是通用型的工具，可以与 github、bitbucket、gitlab 等代码托管服务配合使用，优点是功能强大、插件多、社区活跃，但缺点是配置复杂、使用难度较高。

• gitlab ci 是 gitlab 内部自带的持续集成功能，优点是使用简单、配置简单，但缺点是不及 jenkins 功能强大、绑定 gitlab 才能使用。

8.错误监听

• 异常监控sentry 进行日志监听