使用vscode快速建立vue模板

當我們希望每次新建.vue文件后，vscode能夠根據配置，自動生成我們想要的內容。

打開vscode編輯器，依次選擇“文件 -> 首選項 -> 用戶代碼片段”，此時，會彈出一個搜索框，我們輸入vue，將代碼ctrl+c 到vue-html.json

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

保存后關閉這個文件。

稍稍解釋一下：$0 表示你希望生成代碼后光標的位置 ; prefix 表示生成對應預設代碼的命令

例如：我們新建一個名為header.vue的文件，輸入內容vue按下enter，就會自動生成內容.