在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 相关文章推荐
ko knockoutjs动态属性绑定技巧应用
Nov 14 Javascript
js中符号转意问题示例探讨
Aug 19 Javascript
javascript实现数组去重的多种方法
Mar 14 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
Jan 08 Javascript
jQuery窗口拖动功能的实现代码
Feb 04 Javascript
jQuery动态移除和添加背景图片的方法详解
Mar 07 Javascript
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
JS数组操作之增删改查的简单实现
Aug 21 Javascript
判断div滑动到底部的scroll实例代码
Nov 15 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
Nov 16 Javascript
Javascript实现简易天数计算器
May 18 Javascript
Nest.js参数校验和自定义返回数据格式详解
Mar 29 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
如何在WIN2K下安装PHP4.04
2006/10/09 PHP
php+memcache实现的网站在线人数统计代码
2014/07/04 PHP
PHP实现抓取迅雷VIP账号的方法
2015/07/30 PHP
分享PHP守护进程类
2015/12/30 PHP
PHP 将dataurl转成图片image方法总结
2016/10/14 PHP
浅析PHP中json_encode与json_decode的区别
2020/07/15 PHP
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
js获取客户端网卡的IP地址、MAC地址
2014/03/26 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
javascript批量修改文件编码格式的方法
2015/01/27 Javascript
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
2018/03/17 Javascript
快速解决vue-cli在ie9+中无效的问题
2018/09/04 Javascript
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
原生js实现照片墙效果
2020/10/13 Javascript
用vue写一个日历
2020/11/02 Javascript
python进阶教程之异常处理
2014/08/30 Python
深入理解 Python 中的多线程 新手必看
2016/11/20 Python
python实现逻辑回归的方法示例
2017/05/02 Python
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
教你使用python画一朵花送女朋友
2018/03/29 Python
Python多重继承的方法解析执行顺序实例分析
2018/05/26 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
python OpenCV GrabCut使用实例解析
2019/11/11 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
Python子进程subpocess原理及用法解析
2020/07/16 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
explicit和implicit的含义
2012/11/15 面试题
公司优秀员工推荐信
2015/03/24 职场文书
出纳岗位职责范本
2015/03/31 职场文书
2015年精神文明建设工作总结
2015/04/21 职场文书
2015年组织委员工作总结
2015/04/23 职场文书
员工福利申请报告
2015/05/15 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书
商业计划书范文
2019/04/24 职场文书
微信小程序实现拍照和相册选取图片
2021/05/09 Javascript