????????今天在看黑马vue基础教程的时候发现老师在新建的HTML文件中,输入vh就能快捷创建基础vue模板,我也试了一下,然后结果发现不行。然后就在网上各种搜方法。终于解决了问题。在这里想和大家分享一下。入坑小白,还请大佬们多多指点。
?第一步、进入vscode界面

?第二步、使用快捷键??Ctrl + Shift + P

?第三步、输入??Preferences: Configure User Snippets

?(首选项,配置用户代码片段)
?第四步、输入? vue.json? ?进入这样一个面板

?第五步、复制下面代码到页面的大括号内
"Print to Vue&html base code": {
"prefix": "vh",
"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=\"http://cdn.jsdelivr.net/npm/vue@2/dist/vue.js\"></script>",
"</head>",
"<body>",
" <div id=\"app\">",
" </div>",
" <script>",
" var vm = new Vue({",
" el:'#app',",
" data:{",
" },",
" methods:{",
" }",
" });",
" </script>",
"</body>",
"</html>",
"",
],
"description": "Vue&html base code"
}

可以根据自己平时的需求及爱好增改代码
这里分享我看的比较全面的样板?VSCode 初次写vue项目并一键生成.vue模版 - 简书
第六步、保存后,在html页面中输入 vh 随后敲回车或者 Tab 即可完成

?
?
|