vue.js拓展篇(10):测试开发与调试

内容

第15章:测试开发与调试

任何实际项目的开发,除了功能性代码的完成,规范的开发流程和严谨的测试都是不可或缺的。合理使用工具将事半功倍。

1.ESLint

ESLint是Lint语法检查工具,避免的低级的bug和不统一的代码风格。它比JSLint好的地方是可配置、细粒度的,每一条规则都是一个插件。4

ESLint的项目配置有两种基本方法:

第一种,JS注解的方式将配置信息直接加到文件里。

第二种,package.json

{
  "env":{
    "browser":true,
    "node":true
  },
  "globals":{
    "varA":true,
    "varB":true
  },
  "rules":{
    "eqeqe":"off",
    "curly":"error"
  }
}

这些配置都细粒度的决定ESLint如何检测代码。基本配置包括了env(也就是Environment)、Globals、Rules(规则)。

2.eslint工具包

(1)eslint-loader

(2)eslint-friendly-formatter

(3)eslint-config-standard

(4)eslint-plugin-html

3.webstorm对.vue的识别

step1:

安装方式,settings-plugins-browse repositories-vue.js-install

step2:重启webstorm,那么添加vue模板

step3:让webstorm支持vue的ES6语法

3.vue.js devtools调试(chrome插件)

google进入web store,搜索vue.js devtools。https://chrome.google.com/webstore。

那么接下来在index.html引入vue.js就可以调试vue了。

时间: 2024-10-24 16:16:14

vue.js拓展篇(10):测试开发与调试的相关文章

Vue.js基础篇实战--一个ToDoList小应用

距离开始学Vue已经过去一个多月了,总想把学到的东西柔和在一起,做点东西出来,于是有了这个Todolist小应用. 主要功能就是把一天要做的事情记录下来,还实现了: 标记完成事件 删除已完成事件 各种排序 仅显示未完成的项目 本地保存 截图看这里 用时一周,14次commits,把心中的构想基本实现了.详情请看:这里 整个过程下来,收获还是很多的, 1.对mvvm有了进一步的理解, 2.对css布局有了更多的了解. 3.更进一步理解了Vue的事件和组件机制.这些机制将应用解耦,每一部分都隔离出来

vue.js基础知识篇(6):组件详解

第11章:组件详解 组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 Vue.js的组件注册分为全局注册和局部注册. 全局注册使用Vue.component方法.第一个参数是组件名字,第二个参数是组件的构造函数,要么是function,要么是object. <!DOCTYPE html> <html lang="en"> <hea

Vue.js 系列教程 3:Vue

原文:intro-to-vue-3-vue-cli-lifecycle-hooks 译者:nzbin 这是 JavaScript 框架 Vue.js 五篇教程的第三部分.在这一部分,我们将学习 Vue-cli ,还会涉及真实的开发流程.这个系列教程并不是一个完整的用户手册,而是通过基础知识让你快速了解 Vuejs 以及它的用途. 系列文章: 渲染, 指令, 事件 组件, Props, Slots Vue-cli (你在这!) Vuex 动画 Vue-cli 和构建过程 如果你还没有读过上一部分关

Vue.js新手入门指南

最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做自己的结业项目. 在做的过程中也对Vue.js的官方文档以及其各种特性有了许多认识.作为一个之前以PHP+模版引擎为主的开发,从一个从未接触过除HTML+CSS+JavaScript+JQuery以外的前端技术的人到现在可以独立使用Vue.js以及各种附属的UI库来开发项目,我总结了一些知识和经验

vue.js的快速入门使用

1. vue.js的快速入门使用 1.1 vue.js库的下载 vue.js是目前前端web开发最流行的工具库,由尤雨溪在2014年2月发布的. 另外几个常见的工具库:react.js /angular.js 官方网站: ? 中文:https://cn.vuejs.org/ ? 英文:https://vuejs.org/ 官方文档:https://cn.vuejs.org/v2/guide/ vue.js目前有1.x.2.x和3.x 版本,我们学习2.x版本的. 1.2 vue.js库的基本使用

vue.js随笔记---初识Vue.js(2)

环境搭建(推荐使用vue.js官方提供的命令行工具,用于快速搭建大型单页面应用,包含:vue.js的一个框架爱,vue.js打包工具,测试的工具,开发调试的服务器等): 1.npm:node.js的一个包管理工具,npm在国内使用会很慢,可以使用淘宝镜像: npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm安装成功检测:cnpm -v回车可看到版本号则表示安装成功! 2.vue-cli安装(vue-cli相当于脚

Vue.js权威指南

内容简介 Vue.js 是一个用来开发Web 界面的前端库.<Vue.js权威指南>致力于普及国内Vue.js 技术体系,让更多喜欢前端的人员了解和学习Vue.js.如果你对Vue.js 基础知识感兴趣,如果你对源码解析感兴趣,如果你对Vue.js 2.0感兴趣,如果你对主流打包工具感兴趣,如果你对如何实践感兴趣,<Vue.js权威指南>都是一本不容错过的以示例代码为引导.知识涵盖全面的最佳选择.<Vue.js权威指南>一共30 章,由浅入深地讲解了Vue.js 基本语

Vue.js 系列教程 5:动画

原文:intro-to-vue-5-animations 译者:nzbin 译者的话:经过两周的努力,终于完成了这个系列的翻译,由于时间因素及个人水平有限,并没有详细的校对,其中仍然有很多不易理解的地方.我和原作者的初衷一样,希望大家能够通过这个系列文章有所收获,至少可以增加学习的乐趣,我也在学习的路上,所学心得必将与大家共勉. 这是 JavaScript 框架 Vue.js 五篇教程的第五部分.在这个系列的最后一部分,我们将学习动画(如果你了解我,你知道这一章迟早会来).这不是一个完整的指南,

python测试开发django-41.crispy-forms设计标签式导航菜单(TabHolder)

前言 xadmin的详情页面主要是用form_layout布局,学会了完全可以不用写html代码,也能做出很好看的页面. xadmin的html页面是用的Bootstrap3框架设计的,layout布局用到的是django-crispy-forms框架,本篇详细讲下django-crispy-forms的官方文档案例 django-crispy-forms 当我们使用xadmin后台的时候,在INSTALLED_APPS里面同时添加了xadmin和crispy_forms这2个app,xadmi