个人做vue项目的心得和体会

###vue.js

首先，vue.js是一个数据驱动视图的一个js框架，操作数据，然后实时反应到dom元素上的一个动态视图框架，它也是一个渐进式开发框架，比如，我用vue-cli搭建了一个本地开发环境，用nodejs跑了起来，当把vue引进来之后，要做项目还是远远不够的，就用到了vue全家桶

比如

	      UI框架 ： element-ui
	      http请求工具：axios（个人推荐用这个）
	      cookie工具：vue-cookie
	      构建工具：vue-cli
	      路由插件：vue-router
	      状态管理工具：vuex
	      滚动条插件：vuescroll
	      兼容IE的插件：babel-polyfill（当然vue只兼容到IE9+）

如果平时项目中你用到了哪些框架及插件，就可以通过npm install，下载下来，引入到项目中去就ok了
个人觉得项目目录结构可以是这个样子的

主要是src文件夹，assets主要用于放一些项目中的图片等之类的，compoents就放一些自己定义的组件，pages就放页面，当然都是vue文件啦，router放路由配置，server放一些静态目录什么的，放一些常量什么的都可以，store，熟悉vuex的小伙伴应该都知道，没错，就是放vuex的

通过用vue做了一些东西后，引发了我的一些思考，也算是心得吧，跟我写代码的风格有关系，也许你觉得我说的这些不好，你可以继续延用你的风格，哈哈，毕竟敲代码都有自己独特的风格嘛，哪个程序猿还没有点傲娇的小脾气呢！

####1.关于使用UI框架

一般我都是用element-ui这个ui框架，其中有一些ui组件特别好用，比如$message，提示组件，不用自己写，直接调用，就能用于增加，修改的一些功能，比如提示新增成功，修改成功等，还有按钮组件，弹出框组件等一些基本的组件，对于我自己写的其他代码后续几乎没有冲突，且灵活度高的，我就直接用了框架内的组件，但是一些可控性不强，且不够灵活，几乎不能改动的组件我就会选择自己写，比如树形控件，这个树形控件的样式特别单一，而且不可控，而且灵活度不高，我不是很喜欢，就利用vue的递归组件自己写树形控件，感兴趣的小伙伴可以看下我下篇博客，马上就发《vue如何用递归组件写树形控件》，总结一句话，灵活度高，就用框架，灵活度不高，就自己写，自己写的可控性很强！
####2.关于封装组件

有时候项目中经常会碰到这种情况，好几个页面的列表页除了表头不一样，几乎样式是一模一样的，这样的你就可以封装一个列表组件了，但是只适用于样式差不多的列表，如果你觉得都封装进一个组件里面，对后续开发的一些可控性不是很强，而且每个页面的需求都不一样，处理方式和方法都不很一样，那么我劝你还是老老实实自己写列表吧，因为你封装到一个组件中，对于每个页面的处理方式都要进行判断，这样会显得这个组件很臃肿，我觉得还不如分开写，所以是否要把一个功能模块封装进组件，灵活把握就可以了
####3.关于一些目录和http请求
关于一些目录，比如导航目录，一般是写死的，当然也有从后台获取的，我现在这个项目就是从后台获取目录，还有请求URL，和一些http请求，你就可以新建一个server目录，然后分模块的写道js文件夹里面，return出去，然后再在其他页面中引入，这样做的好处是，模块化管理，将常量和http请求进行统一管理，比如下图

我就把http请求进行了统一管理，然后暴露出去，将来有改动我就可以直接改这里就可以了

####4.关于vuex
下面说一说vuex，也许有许多小伙伴对于这个都不知道干嘛用的，根据我的理解，vuex并不是那么神秘，就是一个公共状态库，是互不联系的两个组件的通信桥梁，比如我又一个列表组件1，又有一个列表组件2。这两个组件完全不一样，丝毫没有联系的那种，但是它们之间需要通信，比如都需要根据一个布尔值show来进行显示还是隐藏，这样就可以把这个show放进vuex状态库里面，当这个show改变的时候，这两个列表组件就可以根据show的变化自动的进行显示隐藏了

####5.关于http请求写在哪里的问题

我一开始接触vuex的时候，vuex里面有一个actions，既可以进行同步操作，又可以进行异步操作，官网上是推荐将http异步请求放在actions里面，因为当时刚学，没有判断能力，就按照官网上来写，在vue文件里面只写逻辑代码，而把所有的http异步请求全部写在了actions里面，这样问题就来了，首先mutations里面的函数必须要用它来提交，而且vue里面通过引入import { mapGetters , mapActions} from 'vuex'，来获取到函数和状态，我发现写一个http需要写好多代码，我如果直接写道methods里面，就特别简单，后来我就在想到底放哪里简单些，综合了网上的一些看法，我觉得这跟个人代码风格有关系，官网是推荐写到actions里面，可是如果一个页面里面的一些http请求只是自己用，也不跟其他页面以及组件进行通信的话，我觉得没有必要写到vuex里面，写在methods里面反而简单些，反正到最后项目的数据都能流通就可以了，我觉得一些http请求得到的数据要和其他组件或页面共用的话，我觉得必须要放在vuex里面，这是最棒的办法，如果是自己在自己的小窝里小打小闹，也不影响别人，那么我们还是写在methods里面吧，毕竟别人又不用，为什么要把它驱逐家门呢，哈哈！！

####就说到这里吧

就说到这里吧，因为我也是一边些项目一边在思考，也是在不断成长，有些错误在所难免，希望大家多多包涵，我们做程序员的，不都是懒得多写一行代码吗？我觉得对于自己来说怎么舒服怎么写，当然你要注意代码规范，而且你的代码风格要注意能不能跟别人合作，因为在公司不可能永远只有你一个程序员，以后必定要来个人一起合作的！所以要注意功能模块化处理就ok了！

三哥的微信公众号，打开你的微信，扫描它，然后带走我！嘻嘻！

三哥QQ交流群