平时使用Vscode的时候,尤其是常用vue的时候,每次vue的初始模板就那么大一堆,实在懒得打,直接添加个模板以后就很方便了。
首先在文件>首选项>用户片段中添加代码模板
这里分享下自己的代码片段
{
"Print to console": {
"prefix": "vuetemp",
"body": [
"<!-- 组件说明 -->",
"<template>",
"\t<div class=''>\n\t\t$2\n\t</div>",
"</template>",
"",
"<script>",
"\t//import x from ''",
"\texport default {",
"\t\tcomponents: {",
"",
"\t\t},",
"\t\tdata () {",
"\t\t\treturn {",
"",
"\t\t\t};",
"\t\t},",
"\t\tcomputed: {",
"",
"\t\t},",
"\t\tmethods: {",
"",
"\t\t},",
// "mounted() {",
// "",
// "},",
//"beforeCreate() {}, //生命周期 - 创建之前",
//"beforeMount() {}, //生命周期 - 挂载之前",
//"beforeUpdate() {}, //生命周期 - 更新之前",
//"updated() {}, //生命周期 - 更新之后",
//"beforeDestroy() {}, //生命周期 - 销毁之前",
//"destroyed() {}, //生命周期 - 销毁完成",
// "activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发",
"\t}",
"</script>",
"",
"<style lang='stylus' scoped>",
"//@import url($3)",
"",
"</style>"
],
"description": "vue模板"
}
}
几个属性分别对应
prefix
是调用模板的快捷指令,可以自定义
body
是模板内容
description
是模板说明
设置完成之后保存文件,之后在代码文件内输入自己设置的快捷指令回车即可