Vue实战:简单几步,优化你的开发体验与效率

构建一个包含路由控制、状态管理和权限校验的vue-cli项目

Vue系列教程,是前面通用渡劫篇的后续教程,从实战项目中的总结,融合的实战过程中的设计思想和经验总结。古语有云:工欲善其事必先利其器 ,因此,本教程的初篇为学习者先铺垫好开发工具,后续再继续完善业务和经验的输出。

上一年写了 Vue.js渡劫系列, 读者如果有兴趣也可以先进行通用了解,附上传送门:

『Vuejs渡劫系列一:日常开发中必须掌握的细节(keng)』

『Vuejs渡劫系列二:最全的vue-cli项目下的配置简析』

『Vuejs渡劫系列三:构建一个包含路由控制、状态管理和权限校验的vue-cli项目』

编辑器(插件)

VSCode

不去比较IDE之间的各种优缺点,从原始的notepad到sublime Text,到后续的Webstorm和Atom,用的最顺手还是VSCode,如果硬要说点原因,我觉得有三:

  • 微软大厂出品
  • 丰富的插件系统和调试工具
  • 长得老帅了

Vue 2 Snippets & Vue VSCode Snippets

以上两款都是Snippets工具,基于Vue(2.x)渐进式开发框架,在开发过程中总难免要重复输入的可能,因此这两款插件能解放你很大程度的重复工作,通过在 VSCode-扩展:商店- 搜索“Vue” ,就能找到:

snippets

其中笔者更偏爱 Vue 2 Snippets 其唤醒Snippets的keyword皆为小写字母构成,减少了Caps Lock的切换,以下是使用效果:

snippets

Vetur

Vetur 是官方推荐的一个Vue在VSCode中开发的工具,具备了语法高亮自动完成格式校验等强大功能,其中Auto Completion的功能和属性链接是笔者用的最多的两个功能:

snippets

自动补全,在引入typescript之前,对象的属性名一般都是让人头疼的问题,笔者旧项目是用vue栈+ES6开发的,通过使用插件的补全功能,在输入了 this.以后,会自动提示出当前this下拥有的 name属性;

属性跳转,类似Java IDE中的自动寻找类变量的方式,可以在快速定位 this 下的属性变量和函数变量,只需要通过 ctrl+左键即可轻松跳转,简直是效率的大杀器。

调试器

Vue Devtools

Vue Devtools 是基于chrome浏览器的一款拓展程序,用户可以在翻墙之后,直接安装扩展,或者使用离线的方式安装,安装教程网上很多,不再累赘。

安装后,打开本地开发的项目页面(npm run dev的开发服务)只要右上角有Vue图标,同时开发者工具中有vue的选项卡,即代表安装成功:

vue-devtools

vue-devtools是基于vue,vuex和vue-router等配套实现的系统调试工具,打开vue面板,会看到Components, Vuex, EventsRefresh四个功能;

Components

Components

Components面板,左侧是组件构成的 Components Tree,通过组件树可以轻松观察整个页面的组件构成;

右边可以看到组件里属性Props, dataComputed属性,如果组件与全局的state绑定,则可以看到state的数据,Components面板最大用途是可以观察复杂组件内的状态情况。

Vuex

Vuex

Vuex面板,左侧是组件构成的 mutations flow,上面例图显示的就是一个设置页面时间的mutation,每秒触发一次,每次的commit都可以在面板上追踪到;而右侧则是某个mutationaction的数据载荷和对应的类型;

Vuex

除此以外,Vuex面板还提供了时间旅行的功能,通过hover某个mutation,可以轻松回到某个状态,结合这个案例,恰好可以让setPageTime的时间点轻松回到一个历史状态中。

Events

Events

Events面板,左侧是组件构成的 events flow,上面例图显示的就是当前页面组件emit的events,选中对应的事件,右侧会显示出该事件的数据载荷,可以轻松追踪事件的触发顺序,在调试组件复杂事件流的时候,可以轻松观察数据流的变化。

Refresh

字面义,就是刷新的用途。

善用 debugger 关键字

过往很多童鞋会问vue开发的时候很难调试,老是add不上breakpoints,的确这是个挺烦心的事儿,但是通过结合业务代码的逻辑,在条件分支点上加上 debugger,则可以轻松断点调试:

debugger

当在运行了npm run dev 以后,在代码中通过 debugger 手动注入断点,websocket刷新页面后,就会自动跳到断点行,轻松观察上下文的代码属性。

Vue-cli3

vue-cli可能是最人性化的boilerplate, 从vue-cli3对比以往的脚手架,都可以发现了很多优化体验的举措,其中可视化配置的方式,不得不称赞一波。

安装

1
2
3
npm install -g @vue/cli
# OR
yarn global add @vue/cli

可视化

1
vue ui

create

插件选择

plugins

通过 switch开关的方式,配置是否使用Babeltypescript等组件的等;

安装依赖

plugins

稍等片刻,或许是一杯咖啡的时间。

GUI配置管理

依赖管理

installDep

uninstallDep

通过GUI界面,轻松安装与卸载依赖。

PWA

pwa

这里只是显示常用的配置项,更多的配置可以参考官方GitHub:

https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa#configuration

总体评价,cli3 带来的更好的开发体验和效率,而基于 vue-cli3的配置能力,能轻松实现最适合团队的脚手架搭建。

总结

业务开发基于工具,但可脱离工具,工具是为了让我们更专注业务开发,减少重复冗余的劳动。我相信本文能带给你们或多或少的帮助,就像是Vue作为工具帮助我们更专注业务开发,提高我们的效率。减少加班的时间,提高陪伴亲人朋友的时间。

PS:如果有更好提高Vue开发效率的工具,不妨写在评论中,独乐乐不如众乐乐也。