使用vue-cli进行开发时常用的几个依赖和插件

使用vue-cli进行开发时常用的几个依赖和插件

插件

vuetify

• 在国外的人气很高，国内知名度不高，是一个基于vue的组件化前端框架，类似bootstrap，提供了一整套完整的解决方案给开发者，使得开发者不需要自行编写css、js就可以达成完整的交互效果
• vuetify的官方文档，点击进入
• 文档有一定的上手难度，但是花几个小时好好理解一下，亲自尝试一下，就会发现这个框架非常好用，能够比较好的适配移动端，响应式做得非常好
• 将这个插件加进去以后，如果全局导入，会占用大概900KB的大小（未编译的大小），如果编译以后再加上webpack的打包和预加载，能够以很低的网络传输代价加载出来
• 本人有用这种框架部署到自己服务器上的经验，加上其它大大小小的依赖，在640KB/s服务器带宽的情况下，1.5s左右就能加首页加载出来，所以插件给带宽带来的影响几乎可以忽略不记
  

element-ui

• 在国内人气很高，有很多介绍它的视频，也是一个基于vue的组件化前端框架
• element-ui的官方文档，点击进入
• 因为有很多学习途径，所以上手难度不高，找个视频看看就行
• 个人认为响应式这块做得不怎样，不能够有效地适配移动端，需要开发者自己调节，比较适合做后台
• 全局导入后，会占用大概1.8MB的大小，比vuetify还大，优化做得不太行，代价比较高
• 很多方法不太成熟，比如表单的交互、验证，vuetify提供了一套完整的交互方案，错误提示，但是element-ui的交互效果就不如vuetify，并且验证的设置比较麻烦，功能不齐全
• 如果你想走捷径，不需要严格适配移动端，想看看视频学一学就行了，那么我推荐你选择这个
  
  

其它插件

• 基本用不到，插件主要是前端框架，用以简化开发，提高开发效率的
• bootstrap-vue这种插件不推荐使用，组件的样式说实话有点土，功能不齐全，交互效果不理想，而且还需要占用2.1MB的大小

依赖

axios

• 用于向后端发送请求，是前后端分离开发中必不可少的依赖
• 那为什么不用ajax呢？因为axios实际上是对ajax的封装，将请求变成异步Promise，并且封装了许多实用的功能，目前看到许多项目中还在用jquery加ajax的写法，说实话这种写法在vue里面就不要用了，本身vue就可以替代掉jquery，并且jquery会直接操纵DOM，违背了MVVM的设计理念
  

vue-axios

• vue-axios是个什么？实际上是对axios的组件化封装，原本axios并不是在vue的基础上而设计的，想直接使用axios必须在propertype中设置为原型属性，而vue-axios解决了这种问题，可以用Vue.use的方式将vue-axios引入，不破坏原型属性
• 想使用vue-axios必须先加入axios依赖，这将会有大约40KB的额外开销
  

vue-cookies

• cookies这一词相信大家都不陌生了，cookies是保存在浏览器上的一些临时信息，可以用来保存登录状态等等，几乎是必不可少的
• 引入vue-cookies依赖后，在main.js中使用Vue.use的方式来使用它
• 一般会配合Vuex一起使用，用于记住用户，保存其它信息等
• vue-cookies的引入不需要cookies，直接加入该依赖即可
  

qs

• 名字看起来很奇怪，这个是干什么用的？事实上qs是用来序列化数据的，一般会调用qs的stringfy方法来序列化一些信息，被序列化的信息会变成x-www-form-urlencoded的格式
• 什么时候会用到呢？当你需要x-www-form-urlencoded格式的数据时，或者其它一般格式无法在后端获取的时候
• 如果你在后端使用了oauth之类的用户相关依赖，那么会用到这个

vue-quill-editor

• 一款富文本编辑器，在我使用过的富文本编辑器中算比较好的
• 此依赖可以单独存在，如果需要扩展功能，需要安装其它依赖，比如图片的依赖，图片可缩放的依赖等
• 网上有很多文档描述，感兴趣的可以自己去看

其它依赖

• 按需添加，依赖过多会导致项目庞大，切记不可盲目添加，要合理考虑如何在vue的环境下使用依赖