vscode 設置vue 代碼塊

{
	"Print to console": {
			"prefix": "vue",
			"body": [
					"<template>",
					"  <div class='$2'>$5</div>",
					"</template>",
					"",
					"<script>",
					"",
					"  export default {",
					"    // import引入的組件需要注入到對象中才能使用",
					"    components: {},",
					"    data () {",
					"      // 這裏存放數據",
					"      return {}",
					"    },",
					"    // 監聽屬性 類似於data概念",
					"    computed: {},",
					"    // 監控data中的數據變化",
					"    watch: {},",
					"    // 方法集合",
					"    methods: {},",
					"    // 生命週期 - 創建完成（可以訪問當前this實例）",
					"    created () {},",
					"    // 生命週期 - 掛載完成（可以訪問DOM元素）",
					"    mounted () {},",
					"    // 這裏存放數據",
					"    beforeCreate () {},",
					"    // 生命週期 - 掛載之前 ",
					"    beforeMount () {},", 
					"    // 生命週期 - 更新之前 ",
					"    beforeUpdate() {},",
					"    // 生命週期 - 更新之後 ",
					"    updated () {},",
					"    // 生命週期 - 銷燬之前 ",
					"    beforeDestroy() {},",
					"    // 生命週期 - 銷燬完成 ",
					"    destroyed () {},",
					"    // 如果頁面有keep-alive緩存功能，這個函數會觸發",
					"    activated () {}" ,
					"  }",
					"</script>",
					"<style lang='scss' scoped>",
					"  // @import url($3); 引入公共css類",
					"</style>"
			],
			"description": "Log output to console"
	}
}

1. vscode 打卡以下畫面（中文叫用戶代碼片段）

2、選擇你需要將此代碼塊作用在哪種類型的文件

3、配置一個json（就是上面那段json代碼）

4、重啓（其實不是必要的）

5、使用敲vue就可以出現一個vue的代碼塊了

6、備註如果自己有封裝比較好的代碼，也可以這麼做