如图所见,只需要敲出vue三个单词即可完美创建Vue实例 ,非常快捷方便,如何完美实现呢?教程如下👇
1.Vscode左下角打开设置点击用户代码片段
2.新建一个用户代码片段 ,创建好删掉里面的注释
3.将下列代码复制进去保存即可
{
"Vue": {
"prefix": "vue", //触发代码片段的关键词 输入vue按下tab回车键即可 可以更改!!
"body": [
"<!DOCTYPE html>",
"<html lang=\"zh-CN\">",
"",
"<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=\"../js/vue.js\"></script>",
"</head>",
"",
"<body>",
" <div id=\"app\"></div>",
" <script>",
" new Vue({",
" el: '#app',",
" data: {$1},",
" methods: {$2}",
" });",
" </script>",
"</body>",
"",
"</html>",
],
"description": "vh components"
}
4.新创建HTMl文件,输入vue以后按tab键或者回车键,即可实现快速输入代码段
5.名称简介
Print to console 是代码片段的名称
prefix 字段为代码片段前缀,定义如何从IntelliSense和选项卡完成中选择此代码段
body 即代码片段的主体内容,其中每个字符串表示一行
description 字段为代码片段说明,会在 IntelliSense 候选栏中出现,也就是描述
其中可以自定义很多片段 非常好用
ps :设置成功