vue后台项目中遇到的技术难点以及解决方案

其实这个问题旨在了解你在遇到问题的时候的解决方法，毕竟现在前端技术领域广，各种框架和组件库层出不穷，而业务需求上有时纷繁复杂，观察一个程序员在面对未知问题时是如何处理的，这个过程相对于只出一些面试题来考面试者更能了解面试者实际解决问题的能力

而很多人会说我的项目不大，并没有什么难点，或者说并不算难点，只能说是一些坑，只要google一下就能解决，实在不行请教我同事，这些问题并没有困扰我很久。其实我也遇到过相同的情况，和面试官说如何通过搜索引擎解决这些坑的吧不太好，让面试官认为你只是一个API Caller，但是又没有什么值得一谈的项目难点

我的建议是，如果没有什么可以深聊的技术难点，不妨在日常开发过程中，试着封装几个常用的组件，同时尝试分析项目的性能瓶颈，寻找一些优化的方案，同样也能让面试官对你有一个整体的了解

在这篇文章中，我会分享在我目前公司的项目里，是如何在满足业务需求的基础上，让整个系统焕然一新的过程

技术栈是Vue + Element的单页面应用

起源

==

在我刚入职的那会，编码能力不怎么好，加上之前离职的前端技术栈是React，接手这个Vue项目的时候，代码高度的耦合，而那个时候因为能力有限，也只是在他的基础上继续开发，好在接手的时候开发进度也只是刚刚开始，因此在几个月后的某一天，我做了一个决定：准备把整个项目重写

得益于整个后台管理系统都是我独立开发的，项目的不足点我都深有体会，并且修改的时候能够更加的自由，恰好在那段时间看了花裤衩的vue-element-admin，我决定新开一个工程把之前的代码全部重写

项目结构

====

之前我有打算基于Webpack4自己写个脚手架用来打包文件，但是那段时间刚好Vue-cli3刚刚发布正式版并且也是基于Webpack4封装的，于是想了一下还决定使用新的Vue-cli3脚手架搭建，最后我将项目分为以下层级

├─api                                 //api接口

├─assets                              //项目运行时使用到的图片和静态资源

├─components                          //组件

│  ├─BaseEllipsis                     //业务组件 (Base开头都是全局组件)

│  ├─BasePagination                   //分页器组件

│  ├─BaseIcon                         //svg图标组件

│  ├─BaseToggle                       //业务组件

│  ├─BaseTable                        //表格组件

│  ├─FormPanel                        //业务组件(Form开头是围绕表单相关的小组件)

│  ├─TableOptions                     //业务组件(Table开头是围绕表格相关的小组件)

│  ├─TheBreadcrumb                    //面包屑组件(The开头是每个页面组件只会引入一次的无状态组件)

|  ├─TheSidebar                       //侧边栏组件

│  ├─TransitionSildeDown              //业务组件(Transition开头是动画组件)

│  └─index.js                         //全局组件自动注册的脚本

│

├─directives                          //自定义指令

├─element                             //elementui

├─errorLog                            //错误捕获

├─filters                             //全局过滤器

├─icons                               //svg图标存放文件夹

├─interface                           //TypeScript接口

├─mixins                              //局部混入

├─router                              //vue-router

│  ├─modules

│  └─index.js

├─store                                //vuex

│  ├─modules

│  └─index.js

├─style                                //全局样式/局部页面可复用的样式

├─util                                //公共的模块(axios,cookie封装,工具函数)

├─vendor                              //类库文件

└─views                               //页面组件(所有给用户显示的页面)

一个良好的项目分层在业务迭代的时候能够快速找到对应的模块进行修改，而不是在茫茫的代码海中找到其中的某一行代码

性能优化

====

在我重写整个系统之前，每次打包都会花费好几分钟的时间，并且打包后的项目超过了17M

然而在我优化系统之后，打包后的体积只有2M，缩小了8倍