VsCode添加Vue模版代码片段-蒲公英云

VsCode添加Vue模版代码片段

r囧r小猫 2024-03-17 21:06 155阅读 0赞

文章目录

VsCode添加Vue模版代码片段
- 1. 复制一段已有要制作模板的Vue代码，比如：
- 1. 粘贴到下方链接的工具网站，可自动生成模板代码的片段
- 1. VsCode中设置代码片段
- - 3-1 打开菜单：首选项-用户片段
  - 3-2 出现如下的搜索栏，搜索“html”，选中打开
  - 3-3 它实际为html.json文件，把刚才snippet generator网站生成的代码片段copy到这里来
  - 3-4 Html页面中，输入上述快捷键即可自动带入，“myvue”
- 1. 扩展：这里可以设置自动保存～每次写完代码就不要手动保存啦～

VsCode添加Vue模版代码片段

1. 复制一段已有要制作模板的Vue代码，比如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <template id="my-app">
        <h2>{
   {message}}</h2>
    </template>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const myApp = {
            template: '#my-app',
            data() {
                return {
                    message: "Hello world"
                }
            }
        }
        Vue.createApp(myApp).mount('#app');
    </script>
</body>
</html>

2. 粘贴到下方链接的工具网站，可自动生成模板代码的片段

Snippet Generator
在这里插入图片描述

3. VsCode中设置代码片段

3-1 打开菜单：首选项-用户片段

在这里插入图片描述

3-2 出现如下的搜索栏，搜索“html”，选中打开

在这里插入图片描述

3-3 它实际为html.json文件，把刚才snippet generator网站生成的代码片段copy到这里来

在这里插入图片描述
如下：

{
    "创建Vue模板代片段的例子": {
        "prefix": "testVue",
        "body": [
          "<!DOCTYPE html>",
          "<html lang=\"en\">",
          "<head>",
          "    <meta charset=\"UTF-8\">",
          "    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
          "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
          "    <title>Document</title>",
          "</head>",
          "<body>",
          "    <div id=\"app\"></div>",
          "",
          "    <template id=\"my-app\">",
          "        <h2>{
   {message}}</h2>",
          "    </template>",
          "",
          "    <script src=\"https://unpkg.com/vue@next\"></script>",
          "",
          "    <script>",
          "        const myApp = {",
          "            template: '#my-app',",
          "            data() {",
          "                return {",
          "                    message: \"Hello world\"",
          "                }",
          "            }",
          "        }",
          "",
          "        Vue.createApp(myApp).mount('#app');",
          "    </script>",
          "    ",
          "</body>",
          "</html>"
        ],
        "description": "createVueApp"
      }
}