vue2.x搭建saas项目系列之一：架构简介

前言

• vue2.x搭建saas项目系列之一：架构简介
• vue2.x搭建saas项目系列之二：项目目录结构介绍
• vue2.x搭建saas项目系列之三：router配置相关
• vue2.x搭建saas项目系列之四：styles统一管理
• vue2.x搭建saas项目系列之五：svg icon的使用
• vue2.x搭建saas项目系列之六：component统一注册(目前正在搭建UI组件库，后续会考虑使用npm i ui)
• vue2.x搭建saas项目系列之七：API接口及常量统一维护
• vue2.x搭建saas项目系列之八：mixins在大型项目中的使用之道
• vue2.x搭建saas项目系列之九：utils、directives、filters、store、types
• vue2.x搭建saas项目系列之十：使用到的库总结
• vue2.x搭建saas项目系列之十一：踩坑填坑总结

 

一、SaaS介绍

SaaS，是Software-as-a-Service的缩写名称，意思为软件即服务，即通过网络提供软件服务。 SaaS平台供应商将应用软件统一部署在自己的服务器上，客户可以根据工作实际需求，通过互联网向厂商定购所需的应用软件服务，按定购的服务多少和时间长短向厂商支付费用，并通过互联网获得Saas平台供应商提供的服务。 SaaS 应用软件有免费、付费和增值三种模式。付费通常为“全包”费用，囊括了通常的应用软件许可证费、软件维护费以及技术支持费，将其统一为每个用户的月度租用费。 SaaS不仅适用于中小型企业，所有规模企业都可以从SaaS中获利。        ————  摘自百度百科

二、项目简介

此项目为公司核心项目，涉及到公司机密，不会分享任何业务相关，只会分享个人经验、实践方案，希望能对新人有所帮助，对大家有所帮助。

三、前序准备

你需要在本地安装Node：v12.16.2 和 Git。本项目技术栈版本如下： TypeScript：~3.9.3、Vue：^2.6.11、Vuex：^3.4.0、Vue-router：^3.2.0、Vue-CLI：4.3.1 、Axios：^0.19.2 和 Element-UI：^2.13.2

提前了解和学习这些知识会对使用本项目有很大的帮助

四、技术栈

• 考虑到后续招人和现有人员的技术栈，选择 Vue 作为框架

• 由于是中大型系统，故选择了TypeScript

• UI组件库选择了 Element UI

• 工具库选择 lodash

• CSS 预处理器的选择 Less 

五、建立脚手架

• 在树莓派上搭建 NPM 私服

• 基于 @vue/cli 搭建基础的模板

• 根据业务需求定义各种开发中可能用到的功能（组件库、状态管理、过滤器、指令、CSS内置变量、CSS Mixins、表单验证、工具函数等）。

• 性能优化

六、开发规范

• 对代码风格、命名规则、目录结构进行统一规范（README-branch.md、README-standard.md、README-zh.md）

• 静态资源的使用规范

• Git 提交记录和多人协作规范以及权限划分

• Jenkins一键构建项目的权限划分