如何用vscode高效创建Vue模板代码？

本文共计230个文字，预计阅读时间需要1分钟。

1. 安装VSCode

2.安装Vetur插件

3.新建代码片段：File -> Preferences -> User Snippets -> vue

4.粘贴以下模板：{ Print to console: { prefix: vue, body: [ template, div>, {, }, ] } }

1、安装vscode
2、安装​​​Vetur​​​插件
3、新建代码片段：​​​File -> Preferences -> User Snippets -> vue​​ 4、粘贴自己的vue模板：

{
"Print to console": {
"prefix": "vue",
"body": [
"<template>",
" <div class='$2'>$5</div>",
"</template>",
"",
"<script>",
"export default {",
" data() {",
" return {",
"",
" };",
" },",
" computed: {},",
" watch: {},",
" methods: {",
"",
" },",
" created() {",
"",
" },",
" mounted() {",
"",
" },",
" beforeCreate() {},",
" beforeMount() {},",
" beforeUpdate() {},",
" updated() {},",
" beforeDestroy() {},",
" destroyed() {},",
" activated() {},",
" components: {},",
"}",
"</script>",
"",
"<style lang='scss' scoped>",
"$4",
"</style>"
],
"description": "Log output to console"
}
}

上面代码中的 ​​"prefix": "vue"​​​, 就是快捷键；
5、保存好之后，新建.vue文件，输入vue，按tab键