在vscode里怎么使用.vue代码模板

本文将为大家详细介绍“在vscode里怎么使用.vue代码模板”，内容步骤清晰详细，细节处理妥当，而小编每天都会更新不同的知识点，希望这篇“在vscode里怎么使用.vue代码模板”能够给你意想不到的收获，请大家跟着小编的思路慢慢深入，具体内容如下，一起去收获新知识吧。

创新互联是一家专注于成都网站设计、网站制作与策划设计,浦东网站建设哪家好?创新互联做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:浦东等地区。浦东做网站价格咨询:18980820575

vscode有什么用

Visual Studio Code 是一个运行于 OS X，Windows和 Linux 之上的，针对于编写现代 web 和云应用的跨平台编辑器，它为开发者们提供了对多种编程语言的内置支持，并且正如 Microsoft 在Build 大会的 keynote 中所指出的，这款编辑器也会为这些语言都提供了丰富的代码补全和导航功能。

1.设置.vue模板

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

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

在里面复制以下代码：

{
 "Print to console": {
   "prefix": "vue",
   "body": [
     "<template>",
     " <div class=\"container\">\n",
     " </div>",
     "</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键就可以成功生成模板了~

如果你能读到这里，小编希望你对“在vscode里怎么使用.vue代码模板”这一关键问题有了从实践层面最深刻的体会，具体使用情况还需要大家自己动手实践使用过才能领会，如果想阅读更多相关内容的文章，欢迎关注创新互联行业资讯频道！

文章名称：在vscode里怎么使用.vue代码模板
网页地址：https://www.cdcxhl.com/article16/ghpddg.html

成都网站建设公司_创新互联，为您提供定制开发、App开发、静态网站、网站收录、标签优化、外贸建站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联