vue项目的结构分析与总结

**

一、总结一下vue项目的总体结构以及vue项目常用的一些插件和一些项目技巧。

**
**         从现在做的几个vue项目上来看，总的来说，一次比一次有进步，项目的结构一次比一次更清晰和更有层次化。这当然是从很多的开源项目上学习到的，从中学习到他们在宏观上是怎样去策划项目的架构的，从微观上他们是如何去编写优质的代码。感谢这些作者的无私奉献。长话短说，现在我来总结一下个人的项目结构，如果有欠缺或者大家有更优美的解决方法的话，欢迎大家来探讨，感谢万分。**

（1）现在来分析一下用脚手架创建的 vue项目的目录结构以及每个结构的代表着什么？他们有着什么样的作用？

**

目录解析：

**
（1）build：构建脚本目录；配置了webpack的基本配置，开发环境配置，生产环境配置等。
（2）config：构建配置目录；配置路径端口值等；
（3）node_modules：依赖node的工具包目录，也就是我们口头说的依赖项；安装项目中可以用到的axios，stylus等模块。
（3）src：放置组件和项目入口文件；（几乎是项目中重要的开发目录）；
（4）assets：项目中的一些css，font，img等资源都存在这里。
（5）components：存放项目中的组件。
（6）router：路由的相关配置，路径指示。
（7）store：使用vuex时才建的这个文件夹，存放vuex相关文件。
（8）App.vue：页面级vue组件。
（9）main.js：项目的入口文件。
（10）static：静态文件目录；可以把一些mock数据放到这里。
（11）index.html：入口页面。
（12）package.json：项目描述文件。

以上大致就是利用脚手架创建vue项目的目录结构（文字没有描述到的就是我在项目中后加进去的）。
**

**

个人对前端项目的看法(如有不足，还请大家多多指教)：

**
**

       在我现在的能力来看，我觉得一个好的项目就是能在开发过程中和项目完工之后：能高效性的参与开发，代码逻辑清晰，维护的成本低，可迭代性高等等。总的来说，除去了代码书写的方式上的严谨的话，那应该是项目能体现出"高内聚，低耦合"的形式。在这里相信很多小伙伴都听过"高内聚，低耦合"的这种说法。但是实际上，并没有很多的去了解过，他究竟是以一个什么样的形式实现高内聚低耦合呢。相对于前端来说，后端分的层次更多，更能体现出"高内聚，低耦合"的说法。每个逻辑层面的话，都不是直接的去相互交互的，而是每层都通过抛出一个接口让另一层的方法去继承实现他，这样的做法，即达到了每个逻辑层做他应该做的业务逻辑的事情，又能间接的去实现逻辑层之间的数据交互。从而达到了体现"高内聚，低耦合"的说法。（哈哈，做为一个主前端的人，不是特别理解后端的知识，可能讲的很片面与不足，也只是粗略的带过一下）。看到这，很多小伙伴肯定想问，那前端是怎么实现"高内聚，低耦合"的呢。当然，前端也有他的一套方法来实现项目的"高内聚，低耦合"的形式。在前端的发展历史上来叙说的话，那可是一个漫长的故事，长话短说，粗略带过一下。在以前的前端开发中，可没有组件化这种说法，那就是需求给的什么页面，就直接按照需求直接开发出来，一个页面的耦合度是非常高的，如果要改动需求的话，那相当于整个页面要重写一遍，开发效率低且维护成本高。为了打破这个僵局，近些年来就逐渐实现了组件化开发的形式。耦合度低，改动需求只需要改动某个组件即可，种种优点让这种开发方式走上了主流。

**
**

如何合理的去设置前端项目的页面结构？

       当拿到一个项目的时候，如何去设置项目的结构更合适呢？更能高效的开发项目？这些问题都是我们大家所想去探究的问题。我的做法是围绕着前端自己所理解的小范围特性去开展，期间很多优秀的做法都是在开源项目中学到的（所以说，想有大进步的话，还得多去看那些作者写出那些优秀的开源项目。因为一般做开源项目的人，对前端的知识面的理解是足够深的。当你阅读别人的项目，那就是把别人对前端的优秀的知识整合的思想学到了）。我现在接触到的vue项目大多都是商城之内的项目，所以我这篇博客的说法是很片面的，这也是无法避免的。但是主要是学习别人设计模式的思想做一个总结。下面我就围绕一个开源的商城项目展开来分析：

1、该项目所用到的技术栈有：vue、vue-cli、webpack、vuex、vue-router、axios、ES6、scss
2、项目结构主要点：组件化、封装、请求资源方法与页面解耦、css样式设计方式。

组件化：组件是html，js，css等的一个聚合体。
为什么要使用组件化？
1、将一个具备完整功能的项目进行多处使用。
2、高效开发。
3、降低页面的耦合度，方便维护。

封装：在js中，封装的过程就是把一些属性和方法放到对象中"包裹"起来。
封装的好处有哪些？
1、减少重复的代码量，源码体积减小，可提供重复使用，提高开发效率。
2、提高网站的打开速度。
3、符合SEO搜索引擎思路。

解耦与解耦的作用：耦合是指两个或两个以上的体系或两种运动形式间通过相互作用而彼此影响以至联合起来的现象。解耦，字面意思就是解除耦合关系。模块间有依赖关系必然存在耦合，理论上的绝对零耦合是做不到的，但可以通过一些现有的方法将耦合度降至最低。（在项目中）在项目中，作者另外创建一个为service的文件夹，里面有一个js文件是抛出一堆请求方法的方法，如图所示：

通过图片我们可以发现，作者的做法是把实际请求的路径丢到一个方法里面然后通过export 的方法把方法跑出去供外面使用，好处是：把请求方法和页面上实现了解耦，提高了以后项目的维护度。比如说，在后期改动的时候，可能某个接口要改变请求地址，那我们就可以不用到它所在的页面去找真实的请求方法，而是直接在这个js文件中即可修改请求的地址，通过这么设计，是不是更方便维护和该项目有着更加清晰的结构了?

css样式设计方式：看到的小伙伴到这里就疑惑了，一个css样式有什么好设计的？当然不是哈，那如何可以做到快速开发css呢？作者运用了如下方法：先把页面的基础css样式先设计出来放到一个 .scss文件中，在main.js 的入口文件中挂载一下即可生效，然后创建一个mixin样式文件，用css预加载器的好处就是，样式可便量化，方法化，这就更方便我们在现实开发中提取一些重复使用的样式，在用到的地方只要引入一下即可。该方法大大节省了在写css样式遇到重复样式重写的时间，提高了开发效率，如图所示：

最后在讲一个比较常用的插件：axios
作为在项目中必须用到的请求后台的ajax库，从运用来讲，大体上可分三部分：
（1）axios创建其实例。
（2）是对请求方法的封装。
（3）拦截器的封装。

为什么讲这个创建实例呢？因为我在第一次接触vue项目的时候，还有身边的小伙伴也是在接触axios的时候，掉到了一个坑里，就是在本地开发的时候，明明是已经写上了请求的路径，为什么请求的基本路径还是以localhost为基本路径呢？那是因为没有设计axios的baseURL。可通过这样的方式来定义它：

创建的实例规定可请求的基本路径，超时请求等等。

axios的请求方法封装，如图所示：

axios拦截器的封装，其拦截器分为两部分，一个是请求前的拦截，一个是请求后的拦截，都可以通过以下方法对请求有哪些需要拦截的进行方法实现，如图所示：

粗略的总结完了，有更好的想法的前辈或者一起学习的同行者，还望指导我这个总结的缺漏点或者讨论项目应该怎么设计更加合理，感激不尽！
**