VScode中快速生成vue模板

風の住む街~

已于 2022-05-04 20:48:40 修改

阅读量6k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： # Vue.js 文章标签： vue

于 2022-05-04 20:37:19 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_38924500/article/details/124577039

Vue.js 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在Visual Studio Code(VSCode)中设置和使用Vetur插件来快速生成Vue模板。通过编辑vue.json配置文件，用户可以自定义Vue组件的模板，包括模板、脚本和样式部分，并设定快捷键。设置完成后，输入预设的快捷键如'vue'并按Tab键，即可快速生成Vue组件结构，提高开发效率。

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

打开vs code 界面左下角如图所示：
在这里插入图片描述
在搜索框内搜索vue.json文件，可能显示的是vue，或者没有，如果没有你可以先在vs code中下载Vetur插件。

vue.json默认是：

要快速生成vue模板，需要在其中编辑加入下列代码：

"Vue": {
     "prefix": "vue",  
    "body": [
      "<!-- $1 -->",
      "<template>",
      "<div></div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "data() {",
      "return {",
      "",
      "}",
      "},",
      "//生命周期 - 创建完成（访问当前this实例）",
      "created() {",
      "",
      "},",
      "//生命周期 - 挂载完成（访问DOM元素）",
      "mounted() {",
      "",
      "}",
      "}",
      "</script>",
      "<style scoped>",
      "/* @import url(); 引入css类 */",
      "$4",
      "</style>"
    ],
    "description": "Log output to console"
  }