vscode插件vue模版

安装vetur插件

安装vetur，识别vue文件

新建vue配置文件

1. 点击code

2. 点击首选项

3. 选择用户代码片段

4. 输入框输入vue.json

5. 已有选择/创建

输入vue模版内容

"Print to console": {
        "prefix": "vue",//调出模版快捷键内容
        "body": [
            "<!-- $1 -->",
            "<template>",
            "  <div class='wrapper'>$3</div>",
            "</template>",
            "",
            "<script>",
            "",
            "//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
            "//例如：import 《组件名称》 from '《组件路径》';",
            "export default {",
            "  //import组件注入到对象",
            "  components: {},",
            "  data() {",
            "    return {",
            "      ",
            "    };",
            "  },",
            "  //监听属性 类似于data概念",
            "  computed: {},",
            "  //监控data中的数据变化",
            "  watch: {},",
            "  //方法集合",
            "  methods: {",
            "    ",
            "  },",
            "  //生命周期 - 创建完成（可以访问当前this实例）",
            "  created() {",
            "    ",
            "  },",
            "  //生命周期 - 挂载完成（可以访问DOM元素）",
            "  mounted() {",
            "    ",
            "  },",
            "  beforeCreate() {}, //生命周期 - 创建之前",
            "  beforeMount() {}, //生命周期 - 挂载之前",
            "  beforeUpdate() {}, //生命周期 - 更新之前",
            "  updated() {}, //生命周期 - 更新之后",
            "  beforeDestroy() {}, //生命周期 - 销毁之前",
            "  destroyed() {}, //生命周期 - 销毁完成",
            "  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发",
            "}",
            "</script>",
            "<style lang='scss' scoped>",
            "  //@import url($2); 引入公共css类",
            "  .wrapper {",
            "    position: relative;", 
            "  }",
            "</style>"
        ],
        "description": "Log output to console"
    }

使用vue模版新建vue文件

1. 新建.vue文件

2. 文件内输入vue按tab键

3. 模版内容自动生成且光标定位$1占位符可输入内容

4. tab键切换按模版内$序号光标切换

5. ctrl+s保存文件（配合koroFileHeader插件生成文件注释）