1. 安裝一個外掛，識別vue檔案

2.新建程式碼片段

檔案–>首選項–>使用者程式碼片段–>點選新建程式碼片段–取名vue.json 確定

3.貼上入自己寫的.vue模板

{
 "Print to console": {
 "prefix": "vue","body": [
  "<!-- $1 -->","<template>","<div class='$2'>$5</div>","</template>","","<script>","export default {","components: {},","data() {","return {","}","},"computed: {},"watch: {},"methods: {","created() {","mounted() {","</script>","<style lang='scss' scoped>","$4","</style>"
 ],"description": "Log output to console"
 }
}

4.上面程式碼中的 “prefix”: “vue”,就是快捷鍵；儲存好之後，新建.vue結尾的檔案

輸入vue 按鍵盤的tab

補充：

vscode之快速生成vue模板的配置

在vscode中點選左下角的設定---使用者程式碼片段---輸入：vue.json，將以下程式碼複製儲存，然後新建.vue檔案，輸入：vue，回車即可。可按需自行新增內容。

{
  "Print to console": {
    "prefix": "vue","body": [
      "<template>"," <div>","  $0"," </div>"," export default {","  name:'',"  props:[''],"  data () {","   return {","   };","  },"  components: {},"  computed: {},"  beforeMount() {},"  mounted() {},"  methods: {},"  watch: {}"," }","<style lang='' scoped>","</style>"
    ],"description": "Log output to console"
  }
}

總結

到此這篇關於VSCode寫vue專案一鍵生成.vue模版,修改定義其他模板的方法的文章就介紹到這了,更多相關VSCode 生成vue模板內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！