VsCode添加Vue模版代码片段

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

#### 文章目录 ####

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

## 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][]  
![在这里插入图片描述][b70cdcb714cd475c821d95f3cec0d9c8.jpeg_pic_center]  
![在这里插入图片描述][dec993ab3a6644ee8a0bd6225a468e14.jpeg_pic_center]

### 3. VsCode中设置代码片段 ###

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

![在这里插入图片描述][d17a8211789146bba7c2df17f0804f90.png_pic_center]

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

![在这里插入图片描述][aa63b90096b848ab9b3e127061931e44.png_pic_center]

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

![在这里插入图片描述][be3b5d3f39554414a99eb65ad93654b6.png_pic_center]  
***如下：***

{
    	"创建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"
    	  }
    }

#### 3-4 Html页面中，输入上述快捷键即可自动带入，“myvue” ####

### 4. 扩展：这里可以设置自动保存～每次写完代码就不要手动保存啦～ ###

![在这里插入图片描述][59204544babf49e9bc9458297bbd9e38.png_pic_center]

[Snippet Generator]: https://snippet-generator.app/
[b70cdcb714cd475c821d95f3cec0d9c8.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/a1ef7ed43ae24f81a7c12d67ddb4590d.png
[dec993ab3a6644ee8a0bd6225a468e14.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/f2bcab1cfa924c679acce52375cb3f90.png
[d17a8211789146bba7c2df17f0804f90.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/1b85e16491d846fb879e9ea27c2a4189.png
[aa63b90096b848ab9b3e127061931e44.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/452c58ccd9ae4ce2b4d2187de54eb551.png
[be3b5d3f39554414a99eb65ad93654b6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/2223f3b372d34092ae998ea22c6d2cea.png
[59204544babf49e9bc9458297bbd9e38.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/3cb2d86582474abe86d694c234ae93ff.png