VS Code一键创建Vue代码模板

Posted kusaki

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VS Code一键创建Vue代码模板相关的知识,希望对你有一定的参考价值。

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

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

技术图片

 

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

 技术图片

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

"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模板"
        

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

技术图片

技术图片

 

以上是关于VS Code一键创建Vue代码模板的主要内容,如果未能解决你的问题,请参考以下文章

VS Code中小程序与Vue常用插件合集(前端合集)

如何在 VS Code 的 .vue 文件中禁用模板中特定行的 eslint 警告

如何在 VS Code 中为模板中的 vue 道具启用 Typescript 打字和智能感知?

一键生成vue模板

vsCode写vue项目一键生成.vue模板

VS Code配置snippets代码片段快速生成html模板,提高前端编写效率