VsCode添加Vue模版代码片段

文章目录

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
在这里插入图片描述

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"}
}