Vue學習筆記:提升開發效率和體驗的常用工具

Vetur

用途：

• 語法高亮
• 標籤補全，模板生成
• Lint檢查
• 格式化

vs code環境配置文件

• 文件-->首選項-->搜索veture（找不到需要自行安裝）-->在setting.json中編輯
• 配置文件代碼如下：

{
    "extensions.ignoreRecommendations": false,
    "team.showWelcomeMessage": false,
    "git.enableSmartCommit": true,
    "vsicons.dontShowNewVersionMessage": true,
    "git.autofetch": true,
    "react.beautify.onSave": true,
    "files.associations": {
        "*.js": "javascriptreact"
    },
    "git.confirmSync": false,
    "explorer.confirmDelete": false,
    "[markdown]": {},
    "eslint.enable": true,
    "eslint.options": {
        "extensions": [
            ".js",
            ".jsx",
            ".vue"
        ]
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    "vetur.validation.template": false,
    "eslint.autoFixOnSave": true,
    "editor.tabSize": 2,
    "jest.autoEnable": false,
    "jest.pathToConfig": "./.jest.js",
    "terminal.integrated.rendererType": "dom",
    "window.zoomLevel": 0,
    "editor.quickSuggestions": {
        "strings": true
    },
    "diffEditor.renderSideBySide": true
}

 

vs code快速生成組件的快捷鍵

• 文件-->首選項-->用戶代碼片段-->輸入框輸入vue.json
• 將如下代碼複製到文件中

 "Print to console": {
    "prefix": "vue",
    "body": [
      "<!-- $0 -->",
      "<template>",
      "  <div></div>",
      "</template>",
      "",
      "<script>",
        "export default {",
        "  data () {",
        "    return {",
        "    }",
        "  }",
        "}",
        "",
      "</script>",
      "",
      "<style lang='stylus' scoped>",
      "",
      "</style>",
      ""
    ],
    "description": "Log output to console"
  }

 

ESLint

用途

• 代碼規範
• 錯誤檢查

Prettier

• 格式美化

Vue-devtools

chrome插件

• 遠程調試
• 性能監測
• 集成vue