vscode自定義vue模板的實現

Posted on by

用vscode編輯器創建vue模板，再也不用每次新建vue文件的時候都去一遍遍的重復敲某些代碼片段。輸入 vue 再按回車鍵，即可生成自定義的vue文件內容，相當的好使，開發效率蹭蹭的上去瞭。

打開vscode，選擇文件 > 首選項 > 用戶片段。隨後在出現的輸入框內輸入vue，按回車鍵。打開瞭一個叫vue.json的文件。如圖：

圖片內容已經是添加瞭相應的模板內容瞭，解釋下，prefix字段表示的是自定義指令，就是我們在vue文件裡面輸入的vue標簽，按回車即可生成自定義的文件內容；body裡面就是我們自定義的內容瞭。\t是制表符，我這裡主要是做格式化代碼用

創建完vue模板後，就可以通過vue來創建文件啦！如下圖：

代碼內容： 

 "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"
  }

此時有沒發現vue模板是把開發的利器，好使好使！！！！！

到此這篇關於vscode自定義vue模板的實現的文章就介紹到這瞭,更多相關vscode自定義vue模板內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：