VS code快速创建vue模板

忘记了.vue文件的格式或者不想手动敲那段模板代码怎么办？VS code快速创建vue模板帮你偷个小懒

第一步：新建模板并保存

打开 VS code，依次点击 file > Preferences > User Snippets，当弹出搜索框之后，输入 vue.json ，然后回车，打开 vue.json文件后，复制以下代码并保存（当然，你也可以根据你自己的习惯来编辑你的模板）

 1  {
 2     "Print to console": {
 3         "prefix": "vue",
 4         "body": [
 5             "<template>",
 6             "  <div>",
 7             "    $0",
 8             "  </div>",
 9             "</template>",
10             "",
11             "<script>",
12             "",
13             "  export default {",
14             "    name:'',",
15             "    props:[''],",
16             "    data () {",
17             "      return {",
18             "",
19             "      };",
20             "    },",
21             "",
22             "    components: {},",
23             "",
24             "    computed: {},",
25             "",
26             "    beforeMount() {},",
27             "",
28             "    mounted() {},",
29             "",
30             "    methods: {},",
31             "",
32             "    watch: {}",
33             "",
34             "  }",
35             "",
36             "</script>",
37             "<style lang='' scoped>",
38             "",
39             "</style>"
40         ],
41         "description": "Log output to console"
42     }
43 }

第二步：测试

新建一个 .vue 文件，输入“vue”，按下回车键或者Tab键，我们想要的模板就自动生成了

 1 <template>
 2   <div>
 3
 4   </div>
 5 </template>
 6
 7 <script>
 8
 9   export default {
10     name:'',
11     props:[''],
12     data () {
13       return {
14
15       };
16     },
17
18     components: {},
19
20     computed: {},
21
22     beforeMount() {},
23
24     mounted() {},
25
26     methods: {},
27
28     watch: {}
29
30   }
31
32 </script>
33 <style lang='' scoped>
34
35 </style>

补充一下：$0 是代码生成后鼠标光标的位置，prefix 后面是生成模板代码的指令，例如我这里设置的是 vue，所以我是输入 vue 后按下回车或Tab键生成代码，你也可以根据你的个人习惯来设置指令。