前言
最近在做公司中后台管理系统后端框架的搭建。 尽管公司已经有现成的中后端框架可供选择，而且不太适合我们部门的项目，所以在参考原有框架的基础上融入了一些我个人的看法和想法在上面。 这篇文章主要是讲一下我在搭建一个中后端系统后端部分的实践点。
技术选型
无论是后端还是前端，从头开始一个新项目都无法避免技术选型，这应该是首先考虑的，然后一切都建立在它之上。
1.JS框架
考虑到公司和部门的主流技术栈以及班委会的技术能力，我们选择的主要后端技术栈是Vue。 虽然这个选择并不困难，但是接下来需要考虑的是围绕这个技术栈选择一个子技术栈。
既然使用了Vue，那么为了快速构建项目，我们必须选择使用它的脚手架工具（最新版本是VueCLI3）来构建基础项目。 另外，Vue的路由库VueRouter和状态管理工具Vuex也是必不可少的，在Vue项目中基本都会用到。 据悉，考虑到项目将具有国际化功能，我们还添加了官方库vue-i18n用于国际化配置。
2. 界面框架
因为我们要构建的是一个中后端系统，所以必须使用一套UI框架来负责我们视口的开发。 排除不太流行的，目前PC端主流的VueUI框架都要优于ElementUI和iView。 公司现有框架使用ElementUI。 为了突出区别，我们选择了iView（虽然它也有iView-admin这样的中后台框架）。
3. 节点框架
考虑到后端和前端分离后，后端需要启用自己的服务来运行打包的资源，所以即使我们可以在本地使用webpack的devServer，并将其发布到节点服务器上elementui后台框架，我们也需要一个脚本来启动服务，这里我们选择精致且可配置的Koa2框架来实现（后续会逐步扩展实现node中间层）。
4、其他
当JS框架、UI框架、服务器端框架选定之后elementui后台框架，我们还需要考虑框架本身之外的其他技术。 比如我们选择axios来实现socket请求，使用less来预处理css样式，使用mockjs来实现Socket数据模拟等。
最后用一个图例总结一下项目技术栈，如下：
目录结构
根据上面的技术栈，我们实现了如下目录结构的构建，以下是整个项目的目录结构概要：
├── /build/ # vue cli 所需编译配置 │ ├── /lib/ # 编译工具库 | └── pro-server.js # 跑静态资源包的 node 服务 ├── /config/ # webpack 环境配置 ├── /dist/ # 打包的资源 ├── /public/ # html 模版等公共资源 | └──index.html # html 模版文件 ├── /docs/ # 项目文档资源 ├── /src/ # 项目工作区域 │ ├── /assets/ # 项目图片资源文件 │ ├── /common/ # 项目公共方法 脚本文件 | | ├── /libs/ # 依赖js库 | | ├── utils.js # 项目工具集 | | └── variable.js # 项目常量管理 │ ├── /components/ # 项目公共组件 │ ├── /config/ # 项目配置文件 全局配置数据 | | ├── global.js # 全局数据 | | └── apiUriConf.js # api 接口配置文件 │ ├── /lang/ # 项目国际化配置 │ ├── /mock/ # 接口 mock 配置文件 │ ├── /router/ # 路由配置文件 │ ├── /services/ # 接口封装 地址文件 │ ├── /store/ # vuex 配置文件 │ ├── /views/ # 页面组件 │ ├── App.vue # 全局父组件 │ ├── index.less # 全局样式 │ └── main.js # 项目入口文件 ├── .browserslistrc # 浏览器支持配置 ├── babel.config.js # 用来设置转码的规则（babel）和插件(环境调用) ├── .editorConfig # 代码编辑工具默认格式 ├── .eslintignore # eslint不处理，忽略路径配置 ├── .eslintrc.js # eslint详细规则配置 ├── postcss.config.js # postcss 配置文件 ├── .gitignore # git忽略上传的文件 ├── .npmrc # npm 源配置文件 ├── package-lock.json # 安装高版本npm才会有 ├── .prettierrc.json # 代码风格配置 ├── package.json # 项目依赖 ├── README.md # 项目安装启动介绍 ├── vue.config.js # vue cli3 入口配置文件 └── yarn.lock # yarn 依赖
