vscode 快捷键生成vue模板教程

我们在开发vue项目时,需要一个vue模版,去创建一个组件,可以使用快捷键

1.文件--》首选项--》用户片段

vscode 快捷键生成vue模板_快捷键

2.搜索vue 选择

vscode 快捷键生成vue模板_快捷键_02

vscode 快捷键生成vue模板_vscode_03

3.模板内容填充

vscode 快捷键生成vue模板_vscode_04

{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<template>",
            "  <div>",
            "    $0",
            "  </div>",
            "</template>",
            "",
            "<script>",
            "",
            "  export default {",
            "    name:'',",
            "    props:[''],",
            "    data () {",
            "      return {",
            "",
            "      };",
            "    },",
            "",
            "    components: {},",
            "",
            "    computed: {},",
            "",
            "    created() {},",
            "",
            "    mounted() {},",
            "",
            "    methods: {},",
            
            "",
            "  }",
            "",
            "</script>",
            "<style lang='scss' scoped>",
            "",
            "</style>"
        ],
        "description": "三线码工vue模板"
    }
}

4.创建vue文件

vscode 快捷键生成vue模板_快捷键_05

 5.写快捷键vue

vscode 快捷键生成vue模板_模版_06

 6.生成代码

vscode 快捷键生成vue模板_快捷键_07