VSCodeはvueテンプレートを生成します

VSCodeはvueテンプレートを生成します

VSCodeを使用してvueを開発する場合、[User Fragment]関数を使用して、vueテンプレートをすばやく生成し、繰り返しのコード開発を減らすことができます。

設定方法

1.左上隅の[ファイル]-[設定]-[ユーザーフラグメント]をクリックします

2.入力ボックスにvueと入力し、ドロップダウンリストでvue.jsonを選択します

[外部リンクの画像転送に失敗しました。ソースサイトにアンチホットリンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします（img-olNyRykR-1592495109847）（E：\ Program Files \ Typora \ files \ picture \ juejin \ vue \ image-20200618233812281 .png）]

3.vue.jsonに次のように入力します

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

使い方

新しい.vueファイルを作成し、ファイルにvueと入力してから、TabキーまたはEnterキーを押します。*

PS：コンポーネント名の入力を容易にするために、カーソルは名前で停止します

例

<!--  -->
<template>
  <div></div>
</template>

<script>
export default {
    
    
  name: '',
  data () {
    
    
    return {
    
    
    }
  },

  components: {
    
    },

  computed: {
    
    },

  methods: {
    
    }
}

</script>
<style lang='scss' scoped>
</style>