vsCode寫vue項目一鍵生成.vue模板

1、安裝插件，識別vue文件，Vetur

2、首選項=>用戶片段=>新代碼片段=>vue.json=>Enter【確定】

 

 

 

 

 

3、新建的vue.json復制下面自己寫的.vue模板：prefix:vue就是快捷鍵，保存好之后，新建.vue結尾的文件，輸入vue按tab鍵即可快速生成vue初始化模板。

{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<template>",
            "  <div class='$2'>$5</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($3); 引入公共css類",
            "$4",
            "</style>",
            "$4"
        ],
        "description": "Log output to console"
    }
}