vue.js拓展篇(8):測試開發與調試

內容

第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了。