02-在VSCODE中添加Vue的模板代码

在初步学习Vue时，由于每次都需要手动敲一次Vue的导入以及实例模板，所以在这里介绍一下把模板事先写入VSCODE中，以后使用补全的方式就可以直接出现写好的模板。

下面就教大家如何在VSCODE中设置Vue的模板。

 

1、在VSCODE中依次点击左上角的文件-->首选项-->用户片段。

 

这里是选择我们的模板将要作用于哪种类型的文件，这里我们选择html。

 

2、然后我们需要配置一个html.json文件，文件内也写了配置的格式。

其中：

"Print to console"：输入了触发字符后的提示语

"prefix":触发代码块的字符

"body:[ ]":定义模板代码，每一行代码都需要使用双引号包括""(可能会使用到转义字符\，\n为换行，\t为制表符，用于缩进)

''$1","$2",..：代表当按下Tap键时的光标移动位置

"description":触发模板字符时对模板的描述

{}:json配置文件整个都需要使用大括号包裹起来

 

3、这里需要插入的Vue模板代码如下：

  <!-- 导入Vue.js文件 -->
  <script src="../js/vue.js"></script>
​
  <!-- 创建id为app的DOM元素 -->
  <div id="app">{{message}}</div>
​
  <!-- 创建Vue实例 -->
  <script>
    const app = new Vue({
      el:'#app',
      data:{
        message:'hello'
      }
    })
  </script>

在html.json文件中，这里进行如下配置：

{
    "Vue模板": {
        "prefix": "vue",
        "body": [
            "\t<script src=\"../js/vue.js\"></script>\n",
            "\t<div id=\"app\">{{message}}</div>\n",
            "\t<script>",
            "\tconst app = new Vue({",
            "\t\tel:'#app',",
            "\t\tdata:{",
            "\t\t\tmessage:'hello'",
            "\t\t}",
            "\t})",
            "\t</script>"
        ],
        "description": "Vue.js引入与实例创建"
    }
}

Ctrl+S保存json文件。

 

4、新建一个html文件，在body中输入触发词vue，就会出现刚刚配置好的模板。

 

敲击回车，模板就自动生成了。