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