WWW.lllT.neTvscode中怎么用.vue代码模版?下边这篇文章内容给我们介绍一下vscode中配备并应用.vue代码模版的方式,期待对各位有些协助!

探讨vscode中如何配备并应用.vue代码模版

vscode里应用.vue代码模版

1.设定.vue模板

开启编辑软件,点一下文档 —— 首选项 —— 客户编码精彩片段,会弹出一个文本框。【建议学习培训:《vscode教程》】

探讨vscode中如何配备并应用.vue代码模版

在文本框键入vue,回车键,会开启一个vue.json文件。

在里面拷贝下列编码:

{
"Print to console": {
"prefix": "vue",
"body": [
"<!--",
"* @Component: ",
"* @Maintainer: ",
"* @Description: ",
"-->",
"<template>",
"  <div class="container">n",
"  </div>",
"</template>n",
"<script>",
"export default {",
"  name: {n",
"  },",
"  data() {",
"    return {n",
"    }",
"  },",
"  mounted(){n",
"  },",
"  methods: {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键就可以取得成功转化成模版了~

大量程序编写有关专业知识,请浏览:编程学习!!

以上便是探讨vscode中如何配备并应用.vue代码模版的详尽具体内容,大量请关心自学java网其他相关文章!

WWW.lllT.neT

声明:有的资源来自网络转载,版权归原作者所有,如有侵犯到您的权益请联系邮箱:our333@126.com我们将配合处理!

原文地址:探讨vscode中如何配备并应用.vue代码模版发布于2021-12-06 09:42:01