如何在vscode 中自定義一個 Vue 模板

發(fā)布時間：2020-11-11 14:39:45 來源：億速云閱讀：171 作者：Leah 欄目：開發(fā)技術(shù)

如何在vscode 中自定義一個 Vue 模板？針對這個問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

首先，在vs code 中打開定義模板代碼的地方

第一步，點(diǎn)擊“設(shè)置”圖標(biāo)按鈕，在彈出的菜單中點(diǎn)擊的“用戶代碼片段”（也就是模板）

第二步，在彈出的框中選擇新建代碼片段（可選為全局/現(xiàn)在的項(xiàng)目創(chuàng)建模板）

如何在vscode 中自定義一個 Vue 模板

第三步，輸入要新建的模板名稱，然后，回車（這里我已經(jīng)新建過了）

如何在vscode 中自定義一個 Vue 模板

然后會自動打開下面這個頁面，在這里我們就可以開始新建一個vue模板了

如何在vscode 中自定義一個 Vue 模板

現(xiàn)在我們開始創(chuàng)建我們的模板了這是一個模板例子

需要的可以直接拷貝到新建的模板文件中，然后按自己的風(fēng)格改改

{
	"Print to console": {    
		"prefix": "vue",    
		"body": [     
				"<template>",     
				" <div class=\"$TM_FILENAME_BASE\">",
				"  ${0}",
				" </div>",    
				"</template>",     
				"",
				"<script>",    
				"export default {",
				" name: '$TM_FILENAME_BASE',",
				" data () {",
				"  return {",
				"",
				"  };",
				" },",
				" methods: {}",
				"}",
				"</script>",
				"",
				"<style lang='scss' scoped>",
				"",
				"</style>"
		],
		"description": "my vue template"
	}
}

模板文件中各參數(shù)的含義

“prefix”: “vue”, // 定義觸發(fā)模板的，字符串代碼。這里我寫的時“vue”。使用就是輸入“vue”然后按tab

" name: ‘$TM_FILENAME_BASE',", // $TM_FILENAME_BASE 這個變量是當(dāng)前的文件名

" <div class="$TM_FILENAME_BASE">", // html代碼中我習(xí)慣使用雙引號，所以這里用了反斜杠“\”轉(zhuǎn)義雙引號

description": “my vue template” // 就是字面上的意思，即，這個模板的描述信息

" ${0}", // ${0} 是生成模板后光標(biāo)的位置，你可以同時放多個

最終效果

在新建的vue文件中輸入“vue”,按tab鍵

如何在vscode 中自定義一個 Vue 模板

就會自動生產(chǎn)一個vue的模板

如何在vscode 中自定義一個 Vue 模板

關(guān)于如何在vscode 中自定義一個 Vue 模板問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。

向AI問一下細(xì)節(jié)

如何在vscode 中自定義一個 Vue 模板

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽