VScode为Vue文件设置模板代码

最新推荐文章于 2025-06-30 11:27:12 发布

万水千山走遍TML

最新推荐文章于 2025-06-30 11:27:12 发布

阅读量429

点赞数

CC 4.0 BY-SA版权

分类专栏： 🚖🚖杂七杂八🚖🚖 💚💚Vue2深度探索与实践 💚💚 文章标签： vue.js vscode javascript

本文链接：https://blog.csdn.net/weixin_44885062/article/details/121996630

🚖🚖杂七杂八🚖🚖 同时被 2 个专栏收录

32 篇文章

订阅专栏

💚💚Vue2深度探索与实践 💚💚

23 篇文章

订阅专栏

本文介绍如何通过安装Vetur和VueHelper插件，并在VScode中配置自定义模板代码片段来快速生成Vue文件。该方法能提高开发效率，简化文件创建过程。

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

VScode为Vue文件设置模板代码

（1）\安装 Vetur 和 VueHelper 插件，安装完成后需要重启 VScode。

(2)在扩展插件搜索框中找到如下 Vetur 和 VueHelper 两个插件，注意看图标，千万别安装错插件了

（3）为 vue 添加模板代码片段。

(4)选中 vue 项。

(5)在打开的 vue.json 中加入你的模板代码片段。

{
	"vue": {
	"prefix": "vue",
	"body": [
      " <!-- @description：$0  -->",
      " <!--  @date：Created in   ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND} -->",
      " <!--  @modified By：  -->",
      " <!--  @version: 1.0.0  -->",
		"<template>",
		"  <div>",
		"  </div>",
		"</template>",
		"<script>",
      " export default {",
      "   name: '$0',",
      "   data() {",
      "     return {}",
      "  },",
      "  methods: {}",
      "}",
		"</script>",
		"<style scoped lang='scss'>",
		"</style>",
	],
	"description": "generate a vue file"}
}