首先，在vs code 中打開(kāi)定義模板代碼的地方

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

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

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

然后會(huì)自動(dòng)打開(kāi)下面這個(gè)頁(yè)面，在這里我們就可以開(kāi)始新建一個(gè)vue模板了

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

需要的可以直接拷貝到新建的模板文件中，然后按自己的風(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ā)模板的，字符串代碼。這里我寫(xiě)的時(shí)“vue”。使用就是輸入“vue”然后按tab

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

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

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

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

最終效果

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

就會(huì)自動(dòng)生產(chǎn)一個(gè)vue的模板

到此這篇關(guān)于在vs code 中如何創(chuàng)建一個(gè)自己的 Vue 模板代碼的文章就介紹到這了,更多相關(guān)vs code 創(chuàng)建Vue 模板內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！