个人做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了!

  • 6
    点赞
  • 47
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值