如何架构一个中后台项目的前端部分（技术选型篇）

前言

最近我正在公司做一个中后台管理系统的前端框架搭建工作，虽然说公司已经有现成的中后台框架可供选择，但是并不特别适合我们部门的项目，因此在借鉴原有框架的基础上融入了我的一些个人想法和思考在里面。这篇文章便主要来谈谈在架构一个中后台系统的前端部分上我的实践点。

技术选型

不管是前端抑或后端，从零开始做一个新项目避免不了技术选型这一块，其应该也是最先需要考虑的内容，之后的一切都会建立在这之上。

1. JS 框架

考虑到公司和部门的主流技术栈及组员的技术能力，我们选择的主要前端技术栈是 Vue。这一选择其实不难，接下来需要考虑的便是围绕这一技术栈，选出子技术栈。

既然用到 Vue，那么为了快速构建项目，我们必然会选择使用其脚手架工具（最新版本是 Vue CLI 3）来构建基础的工程。另外不可或缺的还有 Vue 的路由库 Vue Router 和 状态管理工具 Vuex，这在 Vue 项目中基本都会用到。此外，考虑到项目会做国际化功能，我们还加入了 vue-i18n 这一官方库做国际化配置。

2. UI 框架

由于我们所要架构的是一个中后台系统，因此采用一套 UI 框架来负责我们视图层面的开发是必不可少的。把比较小众的排除在外，目前在 PC 端主流的 Vue UI 框架莫过于 Element UI 和 iView 做的比较好。而公司现有框架采用的是 Element UI，为了体现不同之处，我们选择了 iView（毕竟其也有 iView-admin 这样的中后台框架）。

3. Node 框架

考虑到前端后端分离后，前端需要启用自己的服务来跑打包后的资源，因此虽然我们本地可以使用 webpack