加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 建站 > 正文

久等了,提高开发效率的 Vue 技巧来了

发布时间:2019-10-13 10:57:02 所属栏目:建站 来源:徐月超
导读:最近俩月正好用 vue 做了一个大数据的项目,积累了很多心得。今天终于有机会分享出来了。 组件(component)的使用 vue 提供的模块化无疑是提高开发效率的神器,而且对于后期代码优化和维护也提供的极大地便利。 组件使用简介 vue 提供了组件功能,组件又可

这个是我定义的一个获取会员套餐的情况,会员套餐很多个页面都会用到。但是他改动次数频繁,而且也没必要用户一登录就去加载,因此使用 action 存起来。如果没有这个值就执行 ajax 请求,如果有就直接返回结果。

echarts

echarts 图表界的老大哥了,支持 N 多种图表,配置项说好几千应该没夸大其词吧。不过也正因为繁多的配置项才给了你更多的自由配置的可能。那用 echarts 有什么技巧呢?

快速定位配置项

久等了,提高开发效率的 Vue 技巧来了

echarts 包含标题、图例、提示框、标注、标线... ... 等控件,调整个样式真的不好找。但是现在官方新加入了一个术语速查手册,之前我都是去旧官方上查,现在新官方上有了这个东西可是有福了。我需要调整那个控件的效果在上面一点就带我到相应的 API 简直是好用到飞起。

久等了,提高开发效率的 Vue 技巧来了

优化项目代码 不是专门的数据展示项目,用到的图表类型其实不多。通常是一个图表反复用,而 echarts 配置一个图表通常都好几十行代码。把这个配置项拿出去只传进来一个参数代码多整洁。这个实现特别简单,要是还没这么做建议马上优化你的项目哦

axios

axios 是类似于 ajax 的的第三方控件。所以这个我也是蛮有想法跟大家交流的。

我在开发中遇到一个坑,官方文档说支持 IE,但是 IE 压根不支持。是因为 axios 底层是用 promise 写的,IE 压根还不支持这个属性,因此需要引入 profill 。解决办法是引入 babel-polyfill

  1. // 步骤1 
  2. npm install --save babel-polyfill 
  3. // 步骤2 在 vue.config.js 文件中加入以下内容 
  4. module.exports = { 
  5.     configureWebpack: config => { 
  6.         return { 
  7.             entry: { 
  8.                 app:['babel-polyfill', './src/main.js'] 
  9.             } 
  10.         } 
  11.     } 

拥有自己的 axios 默认配置 这个代码过长,我就不分享了。想要可以关注公众号入群交流(二维码在底部)

总结

本来还想在酝酿酝酿,不过近期发现在不总结一下自己就快渐渐的忘记了,其中还有很多东西没写出来,像项目优化技巧,指令系统。但是这篇文字已经很长了。所以只能到这里了,如果你觉得对你有用欢迎点赞,如果你想跟我交流获得指导欢迎关注公众号加我微信进行探讨。

久等了,提高开发效率的 Vue 技巧来了

(编辑:核心网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读