在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 页面内容搜索,类似于 Ctrl+F功能的实现代码
Aug 13 Javascript
JQuery触发radio或checkbox的change事件
Dec 18 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 Javascript
浅析JavaScript中命名空间namespace模式
Jun 22 Javascript
jQuery 判断是否包含在数组中Array[]的方法
Aug 03 Javascript
完美解决IE9浏览器出现的对象未定义问题
Sep 29 Javascript
canvas实现图像布局填充功能
Feb 06 Javascript
Angular.js自定义指令学习笔记实例
Feb 24 Javascript
React Router V4使用指南(精讲)
Sep 17 Javascript
详解如何提升JSON.stringify()的性能
Jun 12 Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 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
PHP下利用header()函数设置浏览器缓存的代码
2010/09/01 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
JQuery+Ajax无刷新分页的实例代码
2014/02/08 Javascript
javascript正则表达式使用replace()替换手机号的方法
2015/01/19 Javascript
javascript+HTML5自定义元素播放焦点图动画
2016/02/21 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
2016/07/19 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
2017/09/14 Javascript
vue data引入本地图片的两种方式小结
2019/11/13 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
[01:09]DOTA2次级职业联赛 - 99战队宣传片
2014/12/01 DOTA
学习python (2)
2006/10/31 Python
浅谈python中的面向对象和类的基本语法
2016/06/13 Python
python实现八大排序算法(2)
2017/09/14 Python
python实现石头剪刀布小游戏
2021/01/20 Python
python交易记录整合交易类详解
2019/07/03 Python
利用python计算windows全盘文件md5值的脚本
2019/07/27 Python
Python OpenCV读取中文路径图像的方法
2020/07/02 Python
python爬虫筛选工作实例讲解
2020/11/23 Python
python中@contextmanager实例用法
2021/02/07 Python
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
TripAdvisor台湾:全球最大旅游网站
2018/08/26 全球购物
一组SQL面试题
2016/02/15 面试题
会计实习自我鉴定
2013/12/04 职场文书
党的群众路线教育实践活动心得体会900字
2014/03/07 职场文书
工作说明书范文
2014/05/07 职场文书
卫生系统先进事迹
2014/05/13 职场文书
责任胜于能力演讲稿
2014/05/20 职场文书
乡镇党委书记个人整改措施
2014/09/15 职场文书
小学感恩节活动策划方案
2014/10/06 职场文书
大学生个人总结范文
2015/02/15 职场文书
莫言诺贝尔获奖感言(全文)
2015/07/31 职场文书
装修公司管理制度
2015/08/05 职场文书
好段摘抄大全(48句)
2019/08/08 职场文书
导游词之西安骊山
2019/12/20 职场文书