vsc-快速創建vue模板

原文鏈接：https://www.cnblogs.com/ysmc/p/16054432.html

文件-->首選項-->用戶片段-->輸入“vue”

輸入以下內容

{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<!-- $1 -->",
            "<template>",
            "  <div>$5</div>",
            "</template>",
            "",
            "<script>",
            "// import",
            "export default {",
            "  // 注冊",
            "  components: {},",
            "  // 定義變量",
            "  data() {",
            "    return {}",
            "  },",
            "  // 計算屬性 當里面的數據發生變化時，會自動觸發重新計算",
            "  computed: {},",
            "  // 監控data中的變量變化",
            "  watch: {},",
            "  // 方法集合",
            "  methods: {},",
            "  // --------------------------- 生命周期 start -----------------------------------",
            "  // 創建完成（可以訪問當前this實例）",
            "  created() {},",
            "  // 掛載完成（可以訪問DOM元素）",
            "  mounted() {},",
            "  // 創建之前",
            "  beforeCreate() {},",
            "  // 掛載之前",
            "  beforeMount() {},",
            "  // 更新之前",
            "  beforeUpdate() {},",
            "  // 更新之后",
            "  updated() {},",
            "  // 銷毀之前",
            "  beforeDestroy() {},",
            "  // 銷毀完成",
            "  destroyed() {},",
            "  // --------------------------- 生命周期 end -----------------------------------",
            "  // 如果頁面有keep-alive緩存功能，這個函數會觸發",
            "  activated() {}",
            "}",
            "</script>",
            "<style lang='scss' scoped>",
            "// @import url($3) 引入公共css類",
            "</style>"
        ],
        "description": "Log output to console"
    }
}

當我們創建vue文件后，直接輸入 vue 然后按 tab，完美呈現