一个vue项目总结

开始

这是我在工作中开发的一个微信端的h5项目，主要功能是一个答题以及一个调用微信扫描查看一些机器设备信息，功能不多，但麻雀虽小，五脏俱全，vue中常用的技术栈都有涉及到。这篇文章主要是对此项目的一个总结以及对整个项目的开发流程做一个梳理。

技术栈

这个项目我是使用vue技术栈进行开发，之前我大部分的工作是开发微信小程序，vue虽然也用过，不过项目经验还是偏少，也就是写了一些demo，所以这次的项目我打算使用vue进行开发，根据需求以及设计，感觉使用vue并没有太大问题，功能其实也并不复杂，所以直接先使用vue-cli创建一个项目再说，然后把一些初始代码给删除，并把可能会使用到的一些库装上。项目大概使用的技术栈如下：

vue + vue-router + vuex + axios + scss + 其他

基本上都是常用的那一套，vuex在这个项目中用的不是很多，但是我还是不嫌麻烦的用了，其实这个项目本身不是很大很复杂，所以我在这里使用vuex其实不是很必要，但是想了一下，能用的就直接都用上吧，但大家不要学啊，我这里主要是为了自己实践vue的项目开发，所以并不在意麻不麻烦了。直接就用了。

项目结构搭建

既然整体的技术栈以及确定下来，那么之后就是组织项目结构了，这一点，其实在我看来还是很重要的，因为项目结构的组织在一定程度上意味着你这个项目的逻辑或者功能的划分，意味着你对这个项目是如何进行拆分构建的，我觉得这个可以值得我们去花时间研究一下的。我的这个项目的src目录结构如下（主要就是src目录）：

项目结构

大致解释一下吧：

api：用于存放后台接口请求，里面存放着axios的配置文件以及根据逻辑、功能划分的不同后台接口api接口模块。

assets：这个就不用多说了，存放着js，scss，image文件这些静态资源文件

baseComponent：这个是根据vue官方文件中对于组件描述的一些最佳编写的，里面存放一些全局的功能组件，以Base开头，配合下面的registerBaseComponent.js进行这些基础组件的全局注册，这样你就可以在项目中任何地方直接使用，而无需重新引入。ps：这一块的组件和项目业务逻辑没有任何关联，在编写基础组件时也不要和你的业务逻辑产生任何关联。

components：这个存放你这个项目中可复用的公共组件，每个项目根据业务的不同会编写不同的components，而上面的baseComponents则可能复用于每个项目，因为他不和业务耦合。而components则根据每个项目的业务逻辑进行编写的可复用组件。

mixins：一般组件中可能会存在重复的功能，比如扫码功能，我这个项目会调用微信的扫码，而且在不同的地方会同时使用这个功能，但是扫码在页面上的展示形式不一样（有的是点击按钮，有的是点击图片），但功能是一致的，所以可以把扫码这个功能作为一个qcodeMixin，不同的组件需要这个功能时，直接通过组件的mixins字段引入即可（虽然这个扫描也可以作为一个功能模块而不一定要mixins，不过在此只是为了说明一下mixins的作用）。这是作为逻辑和功能层面的一个代码复用的方法。展示层使用组件进行复用即可。

service：项目的业务逻辑层，注意，我在api中只是只是处理了数据接口，比如接口错误处理，接口返回的统一格式化处理以及一些接口的加密处理（这个项目有抽奖࿰