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