vscode自定義vue模板的實現(xiàn)
用vscode編輯器創(chuàng)建vue模板,再也不用每次新建vue文件的時候都去一遍遍的重復敲某些代碼片段。輸入 vue 再按回車鍵,即可生成自定義的vue文件內(nèi)容,相當?shù)暮檬?,開發(fā)效率蹭蹭的上去了。
打開vscode,選擇文件 > 首選項 > 用戶片段。隨后在出現(xiàn)的輸入框內(nèi)輸入vue,按回車鍵。打開了一個叫vue.json的文件。如圖:
圖片內(nèi)容已經(jīng)是添加了相應的模板內(nèi)容了,解釋下,prefix字段表示的是自定義指令,就是我們在vue文件里面輸入的vue標簽,按回車即可生成自定義的文件內(nèi)容;body里面就是我們自定義的內(nèi)容了。\t是制表符,我這里主要是做格式化代碼用
創(chuàng)建完vue模板后,就可以通過vue來創(chuàng)建文件啦!如下圖:
代碼內(nèi)容:
"Print to console": { "prefix": "vue", "body": [ "<!-- $0 -->", "<template>", "\t<div>", "", "\t</div>", "</template>", "", "<script>", "export default {", "\tname: '',", "\tcomponents: {},", "\tdata () {", "\treturn {", "\t}", "\t},", "\tmounted () {},", "\tmethods: {}", "}", "</script>", "<style scoped='scss' scoped>", "</style>" ], "description": "vue output to vue-template" }
此時有沒發(fā)現(xiàn)vue模板是把開發(fā)的利器,好使好使?。。。?!
到此這篇關于vscode自定義vue模板的實現(xiàn)的文章就介紹到這了,更多相關vscode自定義vue模板內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Vue通過provide inject實現(xiàn)組件通信
這篇文章主要介紹了Vue通過provide inject實現(xiàn)組件通信,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-09-09python虛擬環(huán)境 virtualenv的簡單使用
virtualenv是一個創(chuàng)建隔絕的Python環(huán)境的工具。這篇文章主要介紹了python虛擬環(huán)境 virtualenv的簡單使用,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01