Vue配置ts开发模板

197 阅读1分钟

打开设置=> user snippets => vue.json 添加如下配置

{
	"vue-template": {
	  "prefix": "vue",
	  "body": [
		"<template>",
		"  <div class=\"$1\">",
		"",
		"  </div>",
		"</template>",
		"",
		"<script>",
		"export default {",
		"  components: { ",
		"  },",
		"  name: '$1',",
		"  data() { ",
		"    return {",
		"",
		"    }",
		"  },",
		"  mounted() { ",
		"  },",
		"  methods: { ",
		"  }",
		" }",
		"</script>",
		"",
		"<style lang=\"scss\" scoped>",
		"  .$1{",
		"",
		"  }",
		"</style>"
  
	  ],
	  "description": "my vue template"
	},
	"vue-templateTS": {
		"prefix": "ts-vue",
		"body": [
		  "<template>",
		  "  <div class=\"$1\">",
		  "",
		  "  </div>",
		  "</template>",
		  "",
		  "<script lang=\"ts\">",
		  "import { Component, Vue } from \"vue-property-decorator\";",
		  "@Component({",
		  "name: '$1',",
		  "  components: { ",
		  "  },",
		  "  filters: { ",
		  "  },",
		  "})",
		  "export default class $1 extends Vue {",
		  "  mounted() { ",
		  "  }",
		  " }",
		  "</script>",
		  "",
		  "<style lang=\"scss\" scoped>",
		  "  .$1{",
		  "",
		  "  }",
		  "</style>"
	
		],
		"description": "my vue-ts template"
	  }
  }