Detailed explanation of the steps to use .vue in vscode

这次给大家带来vscode里使用.vue步骤详解，vscode里使用.vue的注意事项有哪些，下面就是实战案例，一起来看一下。

1.设置.vue模板

打开编辑器，点击文件 —— 首选项 —— 用户代码片段，会弹出来一个输入框。

在输入框输入vue，回车，会打开一个vue.json文件。

在里面复制以下代码：

{
 "Print to console": {
   "prefix": "vue",
   "body": [
     "<template>",
     " <p class=\"container\">\n",
     " </p>",
     "</template>\n",
     "<script>",
     "export default {",
     " data() {",
     "  return {\n",
     "  }",
     " },",
     " components: {\n",
     " }",
     "}",
     "</script>\n",
     "<style scoped lang=\"scss\">\n",
     "</style>",
     "$2"
   ],
   "description": "Log output to console"
 }
}

模板内容可按自己的喜好自行修改。

然后新建一个.vue文件，输入vue然后按tab键。

2.如果第一步没有成功

如果第一步成功是最好的，万一按tab键没有成功生成模板，而是多了一个空格：

步骤一：点击文件 —— 首选项 —— 设置，修改以下设置：

"emmet.syntaxProfiles": {
  "vue-html": "html",
  "vue": "html"
},
"emmet.triggerExpansionOnTab": true

步骤二：点击编辑器右下角笑脸左边的文件类型，选择配置文件关联，输入vue然后回车。右下角的文件类型就会从html变成vue。这时再用tab键就可以成功生成模板了~

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

ES6实现全屏滚动插件步骤详解

VueJs中V-bind指令怎样使用

The above is the detailed content of Detailed explanation of the steps to use .vue in vscode. For more information, please follow other related articles on the PHP Chinese website!