使用VSCode快速生成用户自定义代码段

最新推荐文章于 2024-08-02 19:39:10 发布

从入门到放弃_nys

最新推荐文章于 2024-08-02 19:39:10 发布

阅读量2.2k

点赞数 2

分类专栏： Vue 前端文章标签： vue.js 前端 vscode

本文链接：https://blog.csdn.net/weixin_42031119/article/details/103975802

版权

前端同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

Vue

5 篇文章 0 订阅

订阅专栏

使用VSCode快速生成用户自定义代码片段

开始使用VScode，以下记录快捷生成VUE文件模板的做法。

第一步： 文件 >> 首选项 >>用户代码片段
在这里插入图片描述
新建一个全局用户代码段，选择HTML

将以下代码覆盖

{
	"vue": {                
		"prefix": "vue",           //输入vue生成模板       
		 "body": [
		 	"<!DOCTYPE html>",            
		 	"<html lang=\"en\">",            
		 	"",            
		 	"<head>",            
		 	"   <meta charset=\"UTF-8\">",            
		 	"   <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",            
		 	"   <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
		 	"    <title>Document</title>",            
		 	"   <script src=\"./lib/vue-2.4.0.js\"></script>",            
		 	"</head>",            
		 	"",            
		 	"<body>",
		 	"    <div id=\"app\"></div>",            
		 	"",            
		 	"",            
		 	"   <script>",            
		 	"       // 创建 Vue 实例，得到 ViewModel",            
		 	"       var vm = new Vue({",            
		 	"           el: '#app',",            
		 	"           data: {},",            
		 	"           methods: {}",            
		 	"       });",            
		 	"   </script>",            
		 	"</body>",            
		 	"",            
		 	"</html> ",
		],        
		"description": "vue output to console"    
	}
}