快速生成vue模板代码，零基础入门到精通，收藏这篇就够了

原创于 2025-12-15 10:30:55 发布 · 695 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #产品运营 #前端

程序员同时被 3 个专栏收录

2064 篇文章

订阅专栏

大模型

423 篇文章

订阅专栏

前端

54 篇文章

订阅专栏

使用vscode，操作步骤参照下图：

输入模板文件名称，比如httprequest.json，按回车，在弹出的面板输入如下内容：

{
  "http-get请求": {
    "prefix": "httpget",
    "body":[
        "this.\\$http({",
        "url: this.\\$http.adornUrl(''),",
        "method:'get',",
        "params:this.\\$http.adornParams({})",
        "}).then(({data})=>{",
        "})"
    ],
    "description":"httpGET请求"
},

"http-post请求":{
    "prefix":"httppost",
    "body":[
        "this.\\$http({",
        "url:this.\\$http.adornUrl(''),",
        "method:'post',",
        "data: this.\\$http.adornData(data, false)",
        "}).then(({data})=>{ })"
    ],
    "description":"httpPOST请求"
}

}

上面发送请求的快捷代码，保存后，输入httpget或httppost即可快速生成代码

下面是快速生成vue代码的模板：

{
  "Print to console": {
      "prefix": "vue",
      "body": [
          "<!-- $1 -->",
          "<template>",
          "<div class='$2'>$5</div>",
          "</template>",
          "",
          "<script>",
          "//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
          "//例如：import 《组件名称》 from '《组件路径》';",
          "",
          "export default {",
          "//import引入的组件需要注入到对象中才能使用",
          "components: {},",
          "data() {",
          "//这里存放数据",
          "return {",
          "",
          "};",
          "},",
          "//监听属性 类似于data概念",
          "computed: {},",
          "//监控data中的数据变化",
          "watch: {},",
          "//方法集合",
          "methods: {",
          "",
          "},",
          "//生命周期 - 创建完成（可以访问当前this实例）",
          "created() {",
          "",
          "},",
          "//生命周期 - 挂载完成（可以访问DOM元素）",
          "mounted() {",
          "",
          "},",
          "beforeCreate() {}, //生命周期 - 创建之前",
          "beforeMount() {}, //生命周期 - 挂载之前",
          "beforeUpdate() {}, //生命周期 - 更新之前",
          "updated() {}, //生命周期 - 更新之后",
          "beforeDestroy() {}, //生命周期 - 销毁之前",
          "destroyed() {}, //生命周期 - 销毁完成",
          "activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发",
          "}",
          "</script>",
          "<style scoped>",
          "$4",
          "</style>"
      ],
      "description": "生成vue模板"
  }
  
}

如果想在IDEA中配置代码模板，操作方法如下：

Define中勾选作用域

附模板代码：

this.$http({
		   url:this.$http.adornUrl(''),
		   method:'post',
		   data: this.$http.adornData(data, false),
		  }).then(({data})=>{ 
					
		  })

this.$http({
			url: this.$http.adornUrl(''),
			method:'get',
			params:this.$http.adornParams({}),
			}).then(({data})=>{
			
			})

新建vue页面模板代码

<template>
  <div class='$2'>$5</div>
 </template>
  
  <script>
  
    export default {
    
      components: {},
      
       data() {
        return {
      
       }
      },
      computed: {},
     
      watch: {},
      
      created() {
      
      },
      
      mounted() {
      
      },
      
      methods: {
      
      }
    }
      
     
 
  </script>

  <style scoped>
  
  </style>

这样在vue页面输入第4步定义的前缀提示词，IDEA会弹出选项，选中对应的模板名称，按回车即可快速生成模板代码，比如在4步中定义的前缀名称为vue，新建一个vue文件，在文件输入vue，选择对应模板按回车即可，其他httpget、httppost也是一样的道理。

2025开年，AI技术打得火热，正在改变前端人的职业命运：