在vscode里使用.vue代码模板的方法


Posted in Javascript onApril 28, 2018

1.设置.vue模板

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

在vscode里使用.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键就可以成功生成模板了~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js创建元素(节点)示例
Jan 02 Javascript
js的Prototype属性解释及常用方法
May 08 Javascript
jquery实现类似淘宝星星评分功能有截图
Sep 15 Javascript
jQuery使用$.ajax提交表单完整实例
Dec 11 Javascript
JavaScript中数组的22种方法必学(推荐)
Jul 20 Javascript
浅析Javascript的自动分号插入(ASI)机制
Sep 29 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
超全面的vue.js使用总结
Feb 12 Javascript
Node.js 中使用 async 函数的方法
Nov 20 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 Javascript
Vue 封装防刷新考试倒计时组件的实现
Jun 05 Javascript
Vue如何实现监听组件原生事件
Jul 03 Javascript
JS实现的透明度渐变动画效果示例
Apr 28 #Javascript
JS实现的简单折叠展开动画效果示例
Apr 28 #Javascript
vue2.0+ 从插件开发到npm发布的示例代码
Apr 28 #Javascript
详解Angular5路由传值方式及其相关问题
Apr 28 #Javascript
详解Angular5 路由传参的3种方法
Apr 28 #Javascript
深入理解Vue nextTick 机制
Apr 28 #Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 #jQuery
You might like
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
初级的用php写的采集程序
2007/03/16 PHP
如何修改和添加Apache的默认站点目录
2013/07/05 PHP
php无限分类使用concat如何实现
2015/11/05 PHP
php生成curl命令行的方法
2015/12/14 PHP
PHP解决中文乱码
2017/04/28 PHP
JavaScript 小型打飞机游戏实现原理说明
2010/10/28 Javascript
根据一段代码浅谈Javascript闭包
2010/12/14 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
2014/08/06 Javascript
node.js中的querystring.stringify方法使用说明
2014/12/10 Javascript
jQuery的基本概念与高级编程
2015/05/14 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
jQuery grep()方法详解及实例代码
2016/10/30 Javascript
ionic2 tabs使用 Modal底部tab弹出框
2016/12/30 Javascript
JS实现中国公民身份证号码有效性验证
2017/02/20 Javascript
JS运动特效之完美运动框架实例分析
2018/01/24 Javascript
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
js回调函数仿360开机
2019/12/26 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
2020/04/22 Javascript
JavaScript组合设计模式--改进引入案例分析
2020/05/23 Javascript
微信小程序实现简单的select下拉框
2020/11/23 Javascript
在python中bool函数的取值方法
2018/11/01 Python
python实现控制COM口的示例
2019/07/03 Python
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
PyQt5.6+pycharm配置以及pyinstaller生成exe(小白教程)
2020/06/02 Python
python属于解释型语言么
2020/06/15 Python
python regex库实例用法总结
2021/01/03 Python
英国在线购买马术服装:EQUUS
2019/07/12 全球购物
初中科学教学反思
2014/01/21 职场文书
委托书的格式
2014/08/01 职场文书
乡镇四风对照检查材料
2014/08/31 职场文书
四风对照检查材料范文
2014/09/27 职场文书
网站文案策划岗位职责
2015/04/14 职场文书
python实现简单的井字棋
2021/05/26 Python