此文并不是引见项目的功用的如何优化，而是引见本人在任务中总结出来的一些开发阅历，旨在经过改善开发习气，来提升任务效率。
西南人有个词儿特别有意思，叫埋汰。哈哈，不知道诸位老铁们有没有听你们身边的冤家说过。生活上，我们一定是不想让别人厌弃我们埋汰。异样，我们的项目也不应该“埋汰”。制定一个优秀的项目结构，不只能让我们本人看的舒适，在日常的代码维护也可以给我提供极大的便利。所以，任务中总结了一些前端项目结构的优化小建议，献给诸君。
1.项目目录优化
这个能够是很多人最不在意的中央了，但这里是影响你开发视觉效果的关键。
正确应用static文件夹
static，意为静态的，就是应该将一些固定的资源放入static，比如vue-cli提供的static文件夹，将一些固定的资源，例如404图片等图片资源，寄存地域码的.js文件等。这些资源放在static中，不只引入起来方便，而且static中的文件并不会被webpack处置，可以进一步节省打包时间。
应该有一个util工具箱
util，工具，望文生义这便是一个寄存各种工具函数的文件夹。项目中难免会用到重复的处置函数，deepClone、floatCheck、moneyFormat等等。用的中央多了，我们每个页面都复制一遍这些函数，显然是不合理的。所以，我们就将这些公共的工具类函数，一致放到util文件夹下，这样用的时分，直接引入即可，修正某一个函数的时分即可一致修正，又可以依据参数停止特殊处置。
留意，util外面也应该依据函数功用，停止合理分类。所以你的util应该是一个工具箱，而不是一个工具栏。
注重用文件夹停止合理分类
我觉得阅读我这篇分享的，一定有而且还有不少人，在处置文件上存在下面这样的成绩
能够下面这个例子还不算太蹩脚，文件数量不多，并且命名格式分歧。但假设文件数量很多，并且命名又不分歧的话，可以想象到在停止代码维护时，光找目的代码都能够会花上一段时间。
所以，建议对文件像下面这样按功用停止细分(但要留意联系的细粒度，适可而止，不能划分的过于细节)，这样我们在回过头来review代码时，依据文件夹就能锁定我们的目的文件的位置，快速的定位到目的。不要怕文件夹多，能提高任务效率才是我们的最终目的。
将央求和接口停止一致管理
在每个项目里，我都会专门分出来一个这样的文件夹。仅仅从名字也可以看出来，这是一个用来管理央求的文件夹。
我会将一切触及到http央求的处置，一致放入到http.js中来管理。比如说像下面这样，将参数的处置，央求方式的处置等等，封装在外部。暴显露来一个办法，运用时只需求传入相关接口、参数、央求方式即可，其他逻辑处置统统不需求思索。
关于央求接口的管理，我觉得也有必要提一下。由于我有一次在接一个项目的时分，发现一切央求的api统统硬编码写在了央求办法里。这真的是写时一时爽，修正找半天，费了九牛二虎之力才完成了任务。
目前，我对央求接口的管理呢，是将一切接口都放到了一个一致的文件中。在调用相关接口的时分，直接从这个request.js文件中获取，这样做的益处首先就是避免了硬编码这种很让人忌讳的方式，同时在一个接口多出调用时，只需求引入一下就可以获取到，再者就是维护起来特别的方便。
实践上，说是维护起来方便，但这也是相对来说的。当接口数量到达某一个量时，将一切接口放到一个文件内，就显得有些臃肿(下面图片的右侧，可以看到密密层层的接口)，但这个成绩貌似也并不是那么关键。所以，这里详细怎样权衡可以参考一下下面的第3点。
config文件夹，将你的配置操作搬到这里
(注：下面说的config文件夹泛指配置，并不是详细称号，由于运用config这个称号，很有能够会跟一些脚手架命名抵触)
无论运用大小，项目的初始化总不能少吧。假设你需求配置很多的选项，像Vue中axios的初始化、央求阻拦器、相应阻拦器，路由的初始化、全局钩子设置，还有其他一些基础的配置等等，我们总不能将这些东西统统放到main.js外面来吧。所以，就有了下面这个结构
将初始化操作、固定的枚举值或许其他配置内容，放到一个一致的位置中。这样会方便我们在修正配置内容，尤其是添加新配置的时分，我们直接就会有目的的去添加相应的内容。
这里有一个点，比如项目中两个文件都需求引入Vue，那么在每个文件中都写import Vue from 'vue'，这就会招致项目在打包时，会多引入一次Vue，添加了项目的体积。所以，引荐引入Vue时，暴显露来一个对Vue的援用export let _Vue = Vue，而不是重复运用import语法。
2.代码习气
组件命名:/area-selector/area-selector.vue比照/area-selector/index.vue
(责任编辑：admin)