### first open vscode, file – preferences – user code snippets

At this point, you can select an existing vue.json to modify, or enter another name to create

3. ### open the original code comment

### Type the following code: When you type vue, you can quickly generate code snippets

Note: The configuration does not take effect. Restart the software. “prefix”: “vue4” is the input name

5. ### snippet template

`

{ "Print to console": { "prefix": "vue4", "body": [" <! -- ", "the author: yanggang," "E-mail: 1141950132 @qq.com," "time: $CURRENT_YEAR year $CURRENT_MONTH month $CURRENT_DATE Date $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND", "Version: V1.0 "," Modify record: ", "Modified content: "," modified person: ", "" modified time: ", "-->", "<template>", " <div>\n", " </div>", "</template>\n", "", "<script>", "export default {", " props: {},", " components: {},", " data () {", " return {}", " },", " computed: {},", " watch: {},", " methods: {},", "// The following are lifecycle hook notes: ", "beforeCreate () {","},", "/**"," /**"," $el properties does not exist ", "* /", "created () {}", ", ", "/", "* * * before the start of the mount is called: The associated render function is called for the first time. ", " */", " beforeMount () {", " },", " mounted () {", " },", " beforeUpdate () {", " },", " updated () {", " },", "/ * * *", "keep alive component activated call. - only to keep alive - component effective", "* /", "activated () {}", ", "and" / * * ", "* keep - the alive components were deactivated calls. Only valid for keep-alive components ", "*/"," deactivated () {", "},", "/**"," * before instance destruction. At this step, the instance is still fully available. ", " */", " beforeDestroy () {", " },", " destroyed () {", " }", "}", "</script> ", "", "<style scoped lang="${1:less}">\n", "", "</style>", "$2" ], "description": "Log output to console" } }Copy the code

6. ### test: Create a vue page, enter vue, the following display is displayed

`