前端技术架构⽂档_如何架构⼀个中后台项⽬的前端部分（技
术选型篇）
前⾔
最近我正在公司做⼀个中后台管理系统的前端框架搭建⼯作，虽然说公司已经有现成的中后台框架可供选择，但是并不特别适合我们部门的
项⽬，因此在借鉴原有框架的基础上融⼊了我的⼀些个⼈想法和思考在⾥⾯。这篇⽂章便主要来谈谈在架构⼀个中后台系统的前端部分上我
的实践点。
技术选型
不管是前端抑或后端，从零开始做⼀个新项⽬避免不了技术选型这⼀块，其应该也是最先需要考虑的内容，之后的⼀切都会建⽴在这之上。
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 的 devServer 来实现，但是
发布到 node 服务器上则需要有⼀个脚本来启动服务，这⾥我们选择⼩巧可配置的 Koa2 框架来实现(后期会逐渐拓展，实现 node 中间
层)。
4. 其他
JS 框架、UI 框架及服务端框架选型都落实之后，我们还需要考虑除框架本⾝外的其他技术，⽐如我们选择了 axios 来实现接⼝的请求，使
⽤ less 来预处理 css 样式，使⽤ mockjs 来实现接⼝的数据模拟等。
最后⽤⼀张图例来概括项⽬技术栈，如下：
⽬录结构
根据上述技术栈，我们实现了以下⽬录结构的搭建，下⾯是整个项⽬的⽬录结构⼤纲：
├── /build/ # vue cli 所需编译配置│├── /lib/ # 编译⼯具库| └── pro-server.js # 跑静态资源包的 node 服务├── /config/ # webpack 环境配置├── /dist/ # 打包的资源├─结语
技术选型是项⽬开发的前提条件，使⽤优秀稳定的技术才能保障整个系统开发的稳定和易维护。本⽂的技术选型⼤家可以⽤作参考，具体需要结合公司或部门项⽬的实际情况出发。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。