使用vscode编写vue文件的时候,每次都需要输入,,这些标签,浪费我们的时间,
如何使用简写键盘敲出vue就会出现如下代码段
<template>
</template>
<script>
export default {
name:'',
}
</script>
<style scoped>
</style>
或者键盘敲出app就会出现如下代码段
const app = new Vue({
el: '#app',
data: {
},
methods: {
}
})
就可以节省很多重复代码的时间
下面就讲下使用方法。
1.vue简写方法
-
安装Vetur插件扩展让VScode支持.vue文件名
-
点击左下角菜单栏也就是小齿轮的图标
-
点击用户代码片段
-
你可以选择现有代码片段vue.json或者是新代码片段都可以
两者的区别在于
1.新建全局代码片段的好处就是,在非vue文件中输入vue命令都能新建出vue初始化代码模板。
2.如果是vue.json文件中定义初始化代码模板的话,就只能在.vue文件中vue命令才会有效。
-
进去之后如图所示在箭头地方新增一段如下代码
-
直接复制以下代码至上图箭头处
"Vue Init":{
"prefix": "vue",
"description": "初始化Vue单文件组件模板",
"body": [
"<template>",
"$1",
"</template>",
"<script>",
"export default {",
" name:'$2',",
"}",
"</script>",
"<style scoped>",
"$3",
"</style>",
""
]
}
- 最后保存该文件并新建一个.vue文件首行输入vue按下enter即可,效果如下
同理app的模板简写也是一样的方法,在刚才的文件下继续输入如下代码保存即可
"Print to app": {
"scope": "javascript,typescript",
"prefix": "app",
"body": [
"const app = new Vue({",
"el: '#app',",
"data: {",
"",
"},",
"methods: {",
"",
"}",
"})"
],
"description": "Log output to console"
}