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

柔情只为你懂 2023-01-08 05:19 230阅读 0赞

## 前言 ##

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

## 一、SaaS介绍 ##

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

## 二、项目简介 ##

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

## 三、前序准备 ##

> 你需要在本地安装[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-tslint.md、README.md）
>  *  静态资源的使用规范
>  *  Git 提交记录和多人协作规范以及权限划分
>  *  Jenkins一键构建项目的权限划分

有什么问题的可以评论交流。

感觉有用的或者帮助到你的可以收藏、点赞、关注 一键三连。

（有问题需要交流可以加QQ245602951）

[vue2.x_saas]: https://blog.csdn.net/wz_coming/article/details/112799387
[vue2.x_saas 1]: https://blog.csdn.net/wz_coming/article/details/112863293
[vue2.x_saas_router]: https://blog.csdn.net/wz_coming/article/details/112917058
[vue2.x_saas_styles]: https://blog.csdn.net/wz_coming/article/details/112985435
[vue2.x_saas_svg icon]: https://blog.csdn.net/wz_coming/article/details/113571633
[vue2.x_saas_component_UI_npm i ui]: https://blog.csdn.net/wz_coming/article/details/113584032
[vue2.x_saas_API]: https://blog.csdn.net/wz_coming/article/details/113739584
[vue2.x_saas_mixins]: https://blog.csdn.net/wz_coming/article/details/113998263
[vue2.x_saas_utils_directives_filters_types]: https://blog.csdn.net/wz_coming/article/details/114691120
[Link 1]: https://baike.baidu.com/item/%E8%BD%AF%E4%BB%B6%E5%8D%B3%E6%9C%8D%E5%8A%A1/2090193
[Link 2]: https://baike.baidu.com/item/%E5%BA%94%E7%94%A8%E8%BD%AF%E4%BB%B6/216367
[Link 3]: https://baike.baidu.com/item/%E9%9C%80%E6%B1%82/3543925
[Link 4]: https://baike.baidu.com/item/%E5%AE%9A%E8%B4%AD/7139005
[Link 5]: https://baike.baidu.com/item/%E5%85%8D%E8%B4%B9/131326
[Link 6]: https://baike.baidu.com/item/%E5%A2%9E%E5%80%BC/7109154
[Link 7]: https://baike.baidu.com/item/%E4%B8%AD%E5%B0%8F%E5%9E%8B%E4%BC%81%E4%B8%9A/107327
[Link 8]: https://baike.baidu.com/item/saas/6703273?fr=aladdin
[Node]: http://nodejs.org/
[Git]: https://git-scm.com/
[TypeScript]: https://www.typescriptlang.org/
[Vue]: https://cn.vuejs.org/index.html
[Vuex]: https://vuex.vuejs.org/zh-cn/
[Vue-router]: https://router.vuejs.org/zh-cn/
[Vue-CLI]: https://github.com/vuejs/vue-cli
[Axios]: https://github.com/axios/axios
[Element-UI]: https://github.com/ElemeFE/element