划]破
划]破

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>Documenttitle>
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
VsCode添加Vue模版代码片段_第1张图片
VsCode添加Vue模版代码片段_第2张图片

3. VsCode中设置代码片段

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

VsCode添加Vue模版代码片段_第3张图片

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

VsCode添加Vue模版代码片段_第4张图片

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

VsCode添加Vue模版代码片段_第5张图片
如下：

{
	"创建Vue模板代片段的例子": {
		"prefix": "testVue",
		"body": [
		  "DOCTYPE html>",
		  "",
		  "<head>",
		  "    ",
		  "    ",
		  "    ",
		  "    <title>Documenttitle>",
		  "head>",
		  "<body>",
		  "    
div>",
		  "",
		  "