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

 

1、前言

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

2、回顾

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

　　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进行页面拦截。具体请参考http://www.javashuo.com/article/p-tfyggkna-hk.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实现总体换肤和字体大小的设置，具体实现请参考 http://www.javashuo.com/article/p-yyiufjle-hd.html

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

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

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

8.使用腾讯云Im（websdk）实现即时通讯  具体能够参考：http://www.javashuo.com/article/p-cbpiximf-gz.html 及腾讯官方文档 https://cloud.tencent.com/document/product/269

 

 

3、感想

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