VSCode自定义html模板，自动导入Vue框架，附带示例程序

williamsce

已于 2024-04-28 23:44:00 修改

阅读量932

点赞数 18

文章标签： vscode 编辑器 vue html5

于 2024-04-28 23:30:46 首次发布

本文链接：https://blog.csdn.net/qq_72385952/article/details/138294668

版权

编辑html.json文件

在使用Vue时，每次都需要手动使用script标签来导入Vue框架，非常的麻烦，所有我们可以用html模板来自动生成

Vscode可以通过编辑html.json文件来实现自定义模板，下面是具体步骤

打开VS code
点击Manage(左下角齿轮图标)
点击User Snippets
搜索html，选中html.json

输入如下代码：

{

// Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and

// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:

// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the

// same ids are connected.

// Example:

// "Print to console": {

// "prefix": "log",

// "body": [

// "console.log('$1');",

// "$2"

// ],

// "description": "Log output to console"

// }

"html template":{

"prefix": "hv", //使用模版的快捷键

"body": [ //模版的内容都定义在body中

"<!DOCTYPE html>",

"<html lang=\"en\">",

"<head>",

"\t<meta charset=\"UTF-8\">",

"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",

"<title>Document</title>",

"</head>",

"<body>",

"\t",

"\t<script src=\"https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js\"></script>",

"\n\t<div id=\"app\">\n\t\t$0\n\t</div>\n", //$0 鼠标停留的位置

"\t<script>",

"\t\tconst app=new Vue({",

"\t\t\tel:'#app',",

"\t\t\tdata:{\n\n\t\t\t},",

"\t\t\tmethods:{\n",

"\t\t\t}",

"\t\t})",

"\t</script>",

"</body>",

"</html>"

],

"description": "Vue框架模版" //模版的描述

}

}