在VSCode中，创建一个.vue文件的模板

最新推荐文章于 2025-06-30 11:27:12 发布

转载最新推荐文章于 2025-06-30 11:27:12 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000017356022

文章标签：

#javascript #开发工具 #json #ViewUI

本文详细介绍如何在VSCode中设置Vue代码片段，通过简单几步即可实现.vue文件模板的快速生成，提高前端开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

具体步骤如下：

1、使用command + Shift + P召唤出控制台，然后输入snippets(跟着自动提示走就行了）并选择。

2、接下来输入vue并选择，VSCode会自动生成一个vue.json的文件。这里就是我们要输入模板的地方了。

3、输入模板，具体格式如下（这是我用的格式，当然也可根据自己的喜好进行修改）其中$0代表模板生成后，光标停留的位置。

{
// Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and 
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
// same ids are connected.
// Example:
"Print to console": {
    "prefix": "vue",
    "body": [
        "<template>",
        "  <div class=\"\">$0</div>",
        "</template>",
        "",
        "<script>",
        "export default {",
        "  components:{},",
        "  data(){",
        "    return {",
        "    }",
        "  },",
        "  created(){},",
        "  mounted(){}",
        "  watch:{},",
        "  computed:{},",
        "  methods:{},",

        "}",
        "</script>",
        "<style lang=\"scss\" scoped>",
        "</style>"
    ],
    "description": "A vue file template"
}

}

4、创建一个.vue 文件，然后输入“vue”,点击“tab”即可生成模板。

tips：

在vscode中使用插件是注意项：不要使用：IntelliSense for CSS, SCSS class names in HTML and Slim这个插件，他会和tab的自动补全冲突的。
图片描述