VSCode 快捷键生成Vue模板

场景

编辑器VSCode
.vue 文件一般由<temple>、<script>、<style> 三种标签组成。现在的需求是通过智能提示，生成自定义的模块。

解决办法

1 安装Vetur插件，识别vue文件

2 修改vue.json模板代码

File-> Preference-> User Snippets -> (新建代码片段取名vue.json） 新建代码片段这块可以直接往下找就能找到vscode上带的vue.json

{
  "Print to console": {
    "prefix": "vue",  
    "body": [
      "<!-- $1 -->",
      "<template>",
      "<div></div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "data() {",
      "return {",
      "",
      "}",
      "},",
      "//生命周期 - 创建完成（访问当前this实例）",
      "created() {",
      "",
      "},",
      "//生命周期 - 挂载完成（访问DOM元素）",
      "mounted() {",
      "",
      "}",
      "}",
      "</script>",
      "<style scoped>",
      "/* @import url(); 引入css类 */",
      "$4",
      "</style>"
    ],
    "description": "Log output to console"
  }
}

3 使用

说明：“prefix”: “vue”, 就是快捷键，（vue名称可随意修改）
新建vue文件，输入vue 按键盘的tab件生成vue模版