1. 程式人生 > 程式設計 >VsCode裡的Vue模板的實現

VsCode裡的Vue模板的實現

如何自定義自己的開發模板?你需要這幾步:

  • 點選VsCode左上角的“檔案” ;
  • 找到 “首選項” 並點選首選項裡的 “使用者片段”;
  • 輸入 “vue.json” 點選進入該檔案
  • 現在你就能編輯自己的Vue頁面開發模板了!

VsCode裡的Vue模板的實現

下面是我的模板程式碼

{
	"Print to console": {
	 "prefix": "vue","body": [
		"<!-- $0 -->","<template>"," <div></div>","</template>","","<script>","export default {"," data () {","  return {","  }"," },"," //方法集合"," methods: {"," //生命週期 - 建立完成(可以訪問當前this例項)"," created(){"," //生命週期 - 掛載完成(可以訪問DOM元素)"," mounted(){"," //生命週期 - 建立之前"," beforeCreate(){"," //生命週期 - 掛載之前"," beforeMount(){"," //生命週期 - 更新之前"," beforeUpdate(){"," //生命週期 - 更新之後"," updated(){"," //生命週期 - 銷燬之前"," beforeDestroy(){"," //生命週期 - 銷燬完成"," destroyed(){"," //如果頁面有keep-alive快取功能,該函式會觸發"," activated(){"," }","}","</script>","<style lang='scss' scoped>","</style>"
	],"description": "Log output to console"
	}
 }

效果如下:

VsCode裡的Vue模板的實現

到此這篇關於VsCode裡的Vue模板的實現的文章就介紹到這了,更多相關VsCode的Vue模板內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!