VSCode左下角设置图标 ==> 用户代码截图 ==> 搜索 vue.json ==> 回车

{
     //将你的 vue 片段放在这里。每个片段都在片段名称下定义，并具有前缀、正文和
    //描述。前缀是用来触发代码片段的，主体将被扩展和插入。可能的变量有：
    // $1, $2 用于制表位，$0 用于最终光标位置，以及 ${1:label}, ${2:another} 用于占位符。
    // 具有相同 ID 的
    占位符被连接。//示例：
    // "打印到控制台": { 
    //      "prefix": "log", 
    //      "body": [ 
    //          "console.log('$1');", 
    //          "$2"
    
         "description": "Log output to console" 
    // } 
    "Print to console" : {
         "prefix": "vue" ,
         "body" : [
         "<template>"
        " <div>代码片段生成</div>"
        "</模板>"
        “”
        “<脚本>”
        “出口默认{”
        “数据：函数（）{”
        “ 返回 {}”
        “}，”
        “ 方法： {}，”
        “创建（）{}”
        “}”
        “</脚本>”
        “”
        "<style lang='less' 范围>"
        "</style>"
        “”
        ],
        "description": "vue模板一键生成"
    }
}

保存

然后任何的vue文件中可以通过vue指令一键生成页面需要的vue模板

空页面第一次打没有提示的话，是你的电脑速度不行，等2s钟，删除从新打，就会出vue提示

生成的模板如下

<模板>
  <div>代码片段生成</div>
</模板>
<script>
导出默认{
  数据：函数（）{
    返回{}；
  },
  方法： {}，
  创建（）{}
};
</脚本>
<style lang='less' 范围>
</style>

style 需要以下，如果项目中生成的是 app.vue ，需要删除 scoped ，我们定义的样式会不会生效，也可以通过 main.js 中单独引入一个css文件

使用的预编译不是如果需要写原生，请使用 css 代码删除 lang = 'less' ，也会提示

动力节点在线课程涵盖零基础入门，高级进阶，在职提升三大主力内容，覆盖Java从入门到就业提升的全体系学习内容。全部Java视频教程免费观看，相关学习资料免费下载!对于火爆技术，每周一定时更新!如果想了解更多相关技术，可以到动力节点在线免费观看Vue视频教程学习哦!