在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)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. PHP字符串前后字符或空格刪除方法介紹2. ASP基礎(chǔ)入門第三篇(ASP腳本基礎(chǔ))3. 解決ajax的delete、put方法接收不到參數(shù)的問題方法4. css進(jìn)階學(xué)習(xí) 選擇符5. JSP之表單提交get和post的區(qū)別詳解及實(shí)例6. html清除浮動(dòng)的6種方法示例7. PHP循環(huán)與分支知識(shí)點(diǎn)梳理8. Python基于Serializer實(shí)現(xiàn)字段驗(yàn)證及序列化9. 使用AJAX(包含正則表達(dá)式)驗(yàn)證用戶登錄的步驟10. JavaScript實(shí)現(xiàn)組件化和模塊化方法詳解
