第一步,打开编辑器,点击左上角文件==>首选项==>用户片段
第二步, 找到vue代码片段配置文件 vue.json(vue)
方法一:搜索框中输入vue.json快速查找
方法二:在新代码片段中找到vue.json
第三步,更换修改代码片段
在进入vue.json中可以看到这些被注释的代码片段,这是说明未启用的
我们只需要对prefix中设置自己想要的指令,然后在 body中的代码进行替换和修改
代码如下: (具体作用已经在代码中注释)
"Print to console": {
"prefix": "vue", //这里的vue是代码指令,你可以随意更改
"body": [ // body[]中的代码就是 输入vue指令后显示的代码
"$1", // 这里的$1 可以不要,建议去掉
"<template>",
"<div class=''></div>",
"</template>",
"", // 这里的引号内的空, 是为了添加 空行
"<script>",
"export default {",
" name: '',", // 这里每段代码的“”双引号是必须加的,后面要跟上逗号 ","
" components: {},", // 代码前面,双引号内的空格是设置空格样式的, 一个空格对应vue文件中的一个空格
" props: {},",
" data () {",
" return {",
" }",
" },",
" computed: {},",
" watch: {},",
" created () { },",
" mounted () { },",
" methods: {}",
"}",
"</script>",
"<style scoped lang=less>",
"$2", // 这里的$2 作用也是添加空行
"</style>",
"" // 这里加空行, 是为了解决vue中</style>后面报错缺少空行的问题
],
"description": "Log output to console"
}
}
我这里模板已经做好了,直接按照我这个模板复制.
效果如下:
在后缀为.vue文件下输入vue
回车
宾果!!!模板出来了
写在最后: 大家可以做出属于自己专属的代码片段, 代码片段的目的本身就是为了便于开发!!!