在vs code 中如何創(chuàng)建一個(gè)自己的 Vue 模板代碼
首先，在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)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了Vite3遷移Webpack5的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要介紹了Vue?路由傳參加密,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
Vue實(shí)現(xiàn)生成二維碼的簡(jiǎn)單方式
與后端生成二維碼相比,前端生成二維碼更具有靈活性,下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)生成二維碼的簡(jiǎn)單方式,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
Vue組件的使用不管是在平常工作還是在面試面試中,都是頻繁出現(xiàn)的,下面這篇文章主要給大家介紹了關(guān)于Vue中常見(jiàn)的幾種傳參方式的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
將 unix 時(shí)間戳轉(zhuǎn)換為日期時(shí)間和使用日期時(shí)間轉(zhuǎn)換為 unix 時(shí)間戳,在項(xiàng)目中常常用到,其中vue中的moment庫(kù)很是方便,下面小編就來(lái)為大家講講具體使用吧2023-09-09
這篇文章主要介紹了解決vue3打包過(guò)后空白頁(yè)面的情況，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要給大家介紹了關(guān)于如何啟動(dòng)node.js文件的3個(gè)方法,文中通過(guò)圖文以及實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細(xì)介紹了vue彈窗組件的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
Vue的hover/click事件如何動(dòng)態(tài)改變顏色和背景色
這篇文章主要介紹了Vue的hover/click事件如何動(dòng)態(tài)改變顏色和背景色問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
用多了 JQuery ，習(xí)慣了使用JQuery的API操作 DOM ，幾乎忘記了原生JS對(duì)DOM操作，今天在項(xiàng)目中遇到了文字和圖片混輸?shù)那闆r，小編給大家分享Vue實(shí)現(xiàn)圖片與文字混輸效果，感興趣的朋友一起看看吧2019-12-12