快速生成vue模板代码

moxiaoran5753

已于 2024-05-25 09:46:11 修改

阅读量202

点赞数 2

文章标签： vue.js 前端 javascript

于 2024-05-23 19:17:42 首次发布

本文链接：https://blog.csdn.net/shenxiaomo1688/article/details/139155668

版权

使用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也是一样的道理。