在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)文章
Vue中computed屬性和watch,methods的區(qū)別
本文主要介紹了Vue中computed屬性和watch,methods的區(qū)別，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
關(guān)于vue-resource報錯450的解決方案
本篇文章主要介紹關(guān)于vue-resource報錯450的解決方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
解決vue 按鈕多次點擊重復(fù)提交數(shù)據(jù)問題
這篇文章主要介紹了vue 按鈕多次點擊重復(fù)提交數(shù)據(jù)的問題,本文通過實例結(jié)合的形式給大家介紹的非常詳細，需要的朋友可以參考下2018-05-05
Vue設(shè)置瀏覽器小圖標(biāo)(ICON)的詳細步驟
vue中網(wǎng)頁圖標(biāo)默認使用的是vue自帶的一個icon的圖標(biāo),也是vue的logo,下面這篇文章主要給大家介紹了關(guān)于Vue設(shè)置瀏覽器小圖標(biāo)(ICON)的詳細步驟,需要的朋友可以參考下2023-01-01
vue項目本地開發(fā)使用Nginx配置代理后端接口問題
這篇文章主要介紹了vue項目本地開發(fā)使用Nginx配置代理后端接口問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
Vue3?封裝一個支持輸入和單/多選InputSelect組件-Antd詳解
Antd的Select組件默認不支持作為輸入框使用或手動添加選項,為了實現(xiàn)這一功能,我們封裝了一個通用組件,支持單選和多選模式,并允許用戶在組件失焦時手動輸入選項,主要通過定義searchText存儲輸入數(shù)據(jù),感興趣的朋友跟隨小編一起看看吧2024-09-09
這篇文章主要介紹了vue+element加入簽名效果（移動端），本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
vue-router history模式服務(wù)器端配置過程記錄
vue路由有hash和history兩種模式,這篇文章主要給大家介紹了關(guān)于vue-router history模式服務(wù)器端配置的相關(guān)資料,需要的朋友可以參考下2021-06-06
這兩天在學(xué)習(xí)vue，主要是為了實現(xiàn)前后端的分離，因此數(shù)據(jù)的傳輸是必不可少的一個環(huán)節(jié)，這篇文章主要介紹了JSON數(shù)組和JSON對象在vue中的獲取方法,需要的朋友可以參考下2022-09-09
vue-cli2.0轉(zhuǎn)3.0之項目搭建的詳細步驟
這篇文章主要介紹了vue-cli2.0轉(zhuǎn)3.0之項目搭建的詳細步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12