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