使用VScode创建模板

发表于   |   分类于
  1. 通过ctrl+alt+P通过关键字Preference找到配置用户代码块
  2. 新建代码块，写入你要用的关键字
  • 关于vue的两个模板
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    {
    "vh": {
    		"prefix": "vh", // 触发的关键字 输入vh按下tab键
    		"body": [
    			"<!DOCTYPE html>",
    			"<html lang=\"en\">",
    			"",
    			"<head>",
    			"    <meta charset=\"UTF-8\" />",
    			"    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />",
    			"    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\" />",
    			"    <title>Document</title>",
    			"    <script src=\"./lib/vue-2.4.0.js\"></script>",
    			"</head>",
    			"<body>",
    			" <!-- 被vm 实例所控制的区域 -->",
    			"    <div id=\"app\"></div>",
    			"",
    			"    <script>",
    			"		// 创建实例对象",
    			"        const vm=new Vue({",
    			"			// 指定控制的区域",
    			"           el:'#app',",
    			"           data:{},",
    			"           methods:{}",
    			"        });",
    			"    </script>",
    			"</body>",
    			"",
    			"</html>",
    		],
    		"description": "vh components"
    	}
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{
	"Print to console": {
	  "prefix": "vue",
	  "body": [
		"<template>",
		"  <div>",
		"",
		"  </div>",
		"</template>",
		"",
		"<script>",
		"export default {",
		"  data () {",
		"    return {",
		"    }",
		"  },",
		"",
		"  components: {},",
		"",
		"  methods: {}",
		"}",
		"",
		"</script>",
		"<style lang='scss' scoped>",
		"</style>"
	],
	  "description": "Log output to console"
	}
  }