VS-Code中快速生成vue代码片段
1、打开用户代码片段
方法一:Ctrl+Shift+P打开命令输入 snippets; 在搜索框输入vue选择‘vue.json’(我就没搜到)。
方法二:文件 → 首选项 → 用户代码片段 → 在搜索框输入vue选择‘vue.json’。
我的是页面是这样子的:
2、将下面代码复制放入上方的刚打开的页面中
这个代码生成的骨架,还比较丰富的,可以根据个人的需求自行修改
{"vue代码": {
"prefix": "ve",
"body": [
"<!DOCTYPE html>",
"",
"<html lang='en'>",
"<head>",
"\t<meta charset=\"UTF-8\">",
"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
"\t<title>Document</title>",
"\t<script src=\"../node_modules/vue/dist/vue.min.js\"></script>",
"</head>",
"",
"<body>",
"\t<div class=\"container\">",
"\t</div>",
"\t<script>",
" \t\tvar vue = new Vue({",
"\t\t\tel : '.container',",
"\t\t\tdata : { }," ,
"\t\t\tmethods : { } " ,
"\t\t});",
"\t</script>",
"</body>",
"",
"</html>"
]
}
}
我的是这样的
最后的效果是这样的
第一次写博客,好多还不太会,哈哈
参考文章一:VScode中Vue快速生成代码片段-码知秋
参考文章二:VSCode自定义快捷键生成Vue实例模板——附模板代码-Microbabyshine