vs code 一键创建vue模板

本是古典何须时尚 2021-09-04 04:11 454阅读 0赞

最近看视频学习vue的时候发现vs code除了使用 !+Tab 在html文件中快速创建模板之外，还可以自己定义，但是视频里面没有教，所以就自己查找了一下方法并和大家分享一下

### 第一步：文件 ——> 首选项 ——>用户代码片段 ###

### ![img][] ###

### 第二步：搜索框中输入html.json(如果需要在别的类型的文件中可以输入对应的名字，如：vue.json) ###

![img][img 1]

### 第三步：输入以下代码(可根据自己的需求修改) ###

![复制代码][935ab309d09acfff2260c8aedb0b2ff0.gif]

"Html5-Vue": { 
     "prefix": "vue",//可以自己修改成想要的名字
     "body": [
     "<!DOCTYPE html>",
     "<html lang=\"en\">\n",
     "<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=\"../vue.js\"></script>",//改成自己的vue路径
     "</head>\n",
     "<body>",
     "\t<div id=\"app\">$1</div>\n",
     "\t<script>",
     "\t\tvar vm = new Vue({",
     "\t\t\tel: '#app',",
     "\t\t\tdata: {},",
     "\t\t\tmethods: {}",
     "\t\t});",
     "\t</script>",
     "</body>\n",
     "</html>"
     ],
     "description": "自定义vue模板"
     }

![复制代码][a5aaaefac0e6b4900944a83f80f9f123.gif]

### 最后：在新建的html文件中输入自己定义的名字并按下 Tab(上面的代码是vue) ###

![img][img 2]

![img][img 3]

[https://www.cnblogs.com/kusaki/p/11299689.html][https_www.cnblogs.com_kusaki_p_11299689.html]

转自网络。如有侵权，请联系删除

[img]: /images/20210813/05bafa3999e84b058d14eae394268912.png
[img 1]: /images/20210813/fdc9cbf7174b4c28bb2b5456e471c99f.png
[935ab309d09acfff2260c8aedb0b2ff0.gif]: /images/20210813/c734e5cfff574ddba17f3a56536ac8de.png
[a5aaaefac0e6b4900944a83f80f9f123.gif]: /images/20210813/462ff95c67d749d79b009913cbc65275.png
[img 2]: /images/20210813/36a021cf9fee41a2b0fddbe1df86866b.png
[img 3]: /images/20210813/5cb9c97cf2164b3ba30a9c0ef5ac21ec.png
[https_www.cnblogs.com_kusaki_p_11299689.html]: https://www.cnblogs.com/kusaki/p/11299689.html