当前位置：首页 > news >正文

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

news 2026/3/27 3:33:00

使用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技术打得火热，正在改变前端人的职业命运：