关于对现阶段vue项目的一些总结和感想

一、前言

　　现阶段手上vue的项目差不多快完了，空闲之余回反复对整个项目的代码结构、实现细节以及框架上的做了一些思考和优化。下面打算把想到的和重点实现的方法记录一下。

二、回顾

　　对于常规操作，这里不做过多的阐述，我们只讨论重点部分

　　1.登录模块：这块我们用了两个校验，一个是权限校验一个是账号校验。第一个校验通过之后执行第二个校验，两者通过登录成功，页面跳转。

　　　　

　　a.这里网络请求用的是axios，它是基于promise封装的一个http库，所以用了两个.then()的链式写法，当然也支持多个链式操作。第一个then方法是权限校验，第二个then方法是账号登录校验。如果是以前的ajax的话，这里就需要在success方法里面写回掉了（又称回调金字塔）;this.root是一个全局变量，这个后面在做解释。

　　b.账号校验成功之后将个人信息存到vuex中，主要包括state,actions和mutations，state定义数据格式，view与actions交互，actions调用mutations定义的方法，mutations在改变state中的数据

　　

　　2.路由：使用动态路由和全局守卫，路由动态加载，router.beforeEach进行页面拦截。具体请参考https://www.cnblogs.com/xufeikko/p/10169826.html　　

　　a.获取动态路由，push,addRoutes

b.全局守卫：根据登录成功后state中的doctorId判断

3.全局变量root（正式环境和开发环境的路径）

　　区分正式环境和开发环境，需要在config文件中的dev.env.js和prod.env.js文件中做相应的配置

　　a.dev.env.js配置，这里配置开发环境地址

b.prod.env.js配置，这里配置正式环境地址

c.全局变量的使用

4.全局组件的注册和在main.js中的引用，另外还有一个局部组件，两者需配合一起使用。

5.axios的拦截封装:对各response的status进行判断拦截，然后做出对应的动作.

6.利用scss实现整体换肤和字体大小的设置，具体实现请参考 https://www.cnblogs.com/xufeikko/p/10060676.html

7.使用vue+dcloud的h5+API实现调用底层摄像头、拍照上传及其它一些原生功能，需用hbuilder打包后才可以调试。

　　a.调用摄像头或相册选取图片

　　b.创建任务、添加文件、开始上传任务

8.使用腾讯云Im（websdk）实现即时通信  具体可以参考：https://www.cnblogs.com/xufeikko/p/10222292.html 及腾讯官方文档 https://cloud.tencent.com/document/product/269

三、感想

　　最近利用空闲时间对整体项目的框架和内部代码重新过了一遍，通过对比了其它的项目结构和具体的各技术实现方案，确实看到了以往在专注开发过程所没注意到的东西，有宏观的、微关的。尽管目前项目并不是很最好的状态，但通过此次的思考让我对整个项目有了重新的认识，也让自己前进了一小步。该项目使用了vue+Dcloud两种框架，dcloud主要使用了其所提供的api实现一些原生的功能。本篇文章由于没有具体介绍实施的细节，只想做一些项目上大的方向上的交流。如果大家有什么的好的想法和建议，欢迎留言一起学习和交流。文章中如有不足之处，也希望各位大佬给与指正，谢谢。