在vs code 中如何创建一个自己的 Vue 模板代码


Posted in Javascript onNovember 10, 2020

首先,在vs code 中打开定义模板代码的地方

第一步,点击“设置”图标按钮,在弹出的菜单中点击的“用户代码片段”(也就是模板)

在vs code 中如何创建一个自己的 Vue 模板代码

第二步,在弹出的框中选择新建代码片段(可选为 全局/现在的项目 创建模板)

在vs code 中如何创建一个自己的 Vue 模板代码

第三步,输入要新建的模板名称,然后,回车(这里我已经新建过了)

在vs code 中如何创建一个自己的 Vue 模板代码

然后会自动打开下面这个页面,在这里我们就可以开始新建一个vue模板了

在vs code 中如何创建一个自己的 Vue 模板代码

现在我们开始创建我们的模板了 这是一个模板例子

需要的可以直接拷贝到新建的模板文件中,然后按自己的风格改改

{
	"Print to console": {    
		"prefix": "vue",    
		"body": [     
				"<template>",     
				" <div class=\"$TM_FILENAME_BASE\">",
				"  ${0}",
				" </div>",    
				"</template>",     
				"",
				"<script>",    
				"export default {",
				" name: '$TM_FILENAME_BASE',",
				" data () {",
				"  return {",
				"",
				"  };",
				" },",
				" methods: {}",
				"}",
				"</script>",
				"",
				"<style lang='scss' scoped>",
				"",
				"</style>"
		],
		"description": "my vue template"
	}
}

模板文件中各参数的含义

“prefix”: “vue”, // 定义触发模板的,字符串代码。这里我写的时“vue”。使用就是输入“vue”然后按tab

" name: ‘$TM_FILENAME_BASE',", // $TM_FILENAME_BASE 这个变量是当前的文件名

" <div class="$TM_FILENAME_BASE">", // html代码中我习惯使用双引号,所以这里用了反斜杠“\”转义双引号

description": “my vue template” // 就是字面上的意思,即,这个模板的描述信息

" ${0}", // ${0} 是生成模板后光标的位置,你可以同时放多个

最终效果

在新建的vue文件中输入“vue”,按tab键

在vs code 中如何创建一个自己的 Vue 模板代码

就会自动生产一个vue的模板

在vs code 中如何创建一个自己的 Vue 模板代码

到此这篇关于在vs code 中如何创建一个自己的 Vue 模板代码的文章就介绍到这了,更多相关vs code 创建Vue 模板内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery加载页面的方法(页面加载完成就执行)
Jun 21 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
Sep 06 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
Oct 16 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
Nov 28 Javascript
JavaScript函数的4种调用方法详解
Apr 22 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
Jun 03 Javascript
原生Javascript封装的一个AJAX函数分享
Oct 11 Javascript
js使用DOM操作实现简单留言板的方法
Apr 10 Javascript
浅析Vue 和微信小程序的区别、比较
Aug 03 Javascript
微信小程序swiper实现文字纵向轮播提示效果
Jan 21 Javascript
浅谈Vue 函数式组件的使用技巧
Jun 16 Javascript
express异步函数异常捕获示例详解
Nov 30 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
Nov 10 #Javascript
原生JS实现弹幕效果的简单操作指南
Nov 10 #Javascript
vue解决跨域问题(推荐)
Nov 10 #Javascript
关于vue 项目中浏览器跨域的配置问题
Nov 10 #Javascript
如何在vue 中引入使用jquery
Nov 10 #jQuery
Vue + ts实现轮播插件的示例
Nov 10 #Javascript
vue router返回到指定的路由的场景分析
Nov 10 #Javascript
You might like
php mysql Errcode: 28 终极解决方法
2009/07/01 PHP
发一个php简单的伪原创程序,配合商城采集用的
2010/10/12 PHP
反射调用private方法实践(php、java)
2015/12/21 PHP
PHP里面把16进制的图片数据显示在html的img标签上(实现方法)
2017/05/02 PHP
永不消失的title提示代码
2007/02/15 Javascript
动态调用css文件——jquery的应用
2007/02/20 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
2013/04/11 Javascript
javascript获取鼠标点击元素对象(示例代码)
2013/12/20 Javascript
JS对象转换为Jquery对象示例
2014/01/26 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
javascritp添加url参数将参数加入到url中
2014/09/25 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
js基于cookie方式记住返回页面用法示例
2016/05/27 Javascript
JS获取复选框的值,并传递到后台的实现方法
2016/05/30 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
标准的js无缝滚动效果
2016/08/30 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
详解Python发送邮件实例
2016/01/10 Python
Python类装饰器实现方法详解
2018/12/21 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
详解Python 切片语法
2019/06/10 Python
Python Django框架url反向解析实现动态生成对应的url链接示例
2019/10/18 Python
python 实现目录复制的三种小结
2019/12/04 Python
python3定位并识别图片验证码实现自动登录功能
2021/01/29 Python
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
英国女性时尚精品店:THE DRESSING ROOM
2018/05/23 全球购物
餐厅经理岗位职责范本
2014/02/17 职场文书
农村面貌改造提升实施方案
2014/03/18 职场文书
企业党员公开承诺书
2014/03/26 职场文书
个人安全生产责任书
2014/07/28 职场文书
社区学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
社区义诊通知
2015/04/24 职场文书
幼儿园教师辞职信
2019/06/21 职场文书
Spring Boot 排除某个类加载注入IOC的操作
2021/08/02 Java/Android
Python实现仓库管理系统
2022/05/30 Python