vsc custom templates to quickly generate vue

1. Install vscode

官网地址：https://code.visualstudio.com/

2. Install a plug-in, identification documents vue

插件库中搜索Vetur，下图中的第一个，点击安装，安装完成之后点击重新加载

 

 

3. The new code snippet

文件-->首选项-->用户代码片段-->点击新建代码片段--取名vue.json 确定

 

4. Do not delete the code

5. Write your own stick into the template .vue

 1 {
 2     "Print to console": {
 3         "prefix": "vue",
 4         "body": [
 5             "<!-- $1 -->",
 6             "<template>",
 7             "<div class='$2'>$5</div>",
 8             "</template>",
 9             "",
10             "<script>",
11             "// Here you can import other files (such as: components, tools js, third-party plug-js, json files, picture files, etc.) " ,
 12              " // example: import "Component Name" from ' "Component Path' '; " ,
 13 is              "" ,
 14              " Export default { " ,
 15              " // import component introduced into the subject to be injected in order to use " ,
 16              " components: {}, " ,
 . 17              " Data () { " ,
 18 is              " // here data storage " ,
 . 19              " return { " ,
 20 is              " " ,
21             "};",
 22              " } " ,
 23              " // monitor data attributes similar to the concept " ,
 24              " computed: {} " ,
 25              " data changes in the data monitoring // " ,
 26 is              " Watch: {} " ,
 27              " // set of methods " ,
 28              " methods: { " ,
 29              " ' ,
 30              " }, " ,
 31 is              " // lifecycle - created (current access this instance) " ,
32             "created() {" ,
 33              " ' ,
 34              " } " ,
 35              " // life cycle - the mount is completed (access DOM elements) " ,
 36              " Mounted () { " ,
 37 [              "" ,
 38 is              " } " ,
 39              " beforeCreate () {}, // lifecycle - before creating " ,
 40              " beforeMount () {}, // lifecycle - before loading " ,
 41              " before the update - beforeUpdate () {}, // life cycle " ,
 42 is              " Updated () {},// life cycle - after the update " ,
43 is              " beforeDestroy () {}, // life cycle - prior to destruction " ,
 44 is              " Destroyed () {}, // lifecycle - complete destruction " ,
 45              " activated () {}, // if the page has a keep-alive cache function, this function triggers " ,
 46 is              " } " ,
 47              " </ Script> " ,
 48              " <style lang = 'SCSS' scoped> " ,
 49              " // @ Import URL ($. 3); into the public css class " ,
 50              " $. 4 " ,
 51 is              " </ style>"
52         ],
53         "description": "Log output to console"
54     }
55 }

6. The above code "prefix": "vue", is the shortcut key; after save, try the new end of the file .vue

输入vue 按键盘的tab就行
Note: 
Direct can automatically save files here performed.

 

 

 

 

Write your own templates according to their own needs to add in there to be all right.