在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 相关文章推荐
js 浮动层菜单收藏
Jan 16 Javascript
用jquery实现的一个超级简单的下拉菜单
May 18 Javascript
JS实现状态栏跑马灯文字效果代码
Oct 24 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
Apr 23 Javascript
js实现贪吃蛇小游戏(容易理解)
Jan 22 Javascript
Dropify.js图片宽高自适应的方法
Nov 27 Javascript
vue表单自定义校验规则介绍
Aug 28 Javascript
解决vue.js提交数组时出现数组下标的问题
Nov 05 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
Mar 06 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
Mar 11 Javascript
JS实现页面鼠标点击出现图片特效
Aug 19 Javascript
JavaScript选择器函数querySelector和querySelectorAll
Nov 27 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 array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
thinkphp缓存技术详解
2014/12/09 PHP
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
总结PHP内存释放以及垃圾回收
2018/03/29 PHP
Avengerls vs Newbee BO3 第二场2.18
2021/03/10 DOTA
深入理解javascript中defer的作用
2013/12/11 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
轻松创建nodejs服务器(3):代码模块化
2014/12/18 NodeJs
浅谈javascript面向对象程序设计
2015/01/21 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
2016/02/17 Javascript
基于Layer+jQuery的自定义弹框
2020/05/26 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
2017/06/08 Javascript
Vue表单及表单绑定方法
2018/09/04 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
2018/11/10 Javascript
[36:43]NB vs Optic 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
[54:53]完美世界DOTA2联赛PWL S2 GXR vs PXG 第二场 11.18
2020/11/18 DOTA
使用py2exe在Windows下将Python程序转为exe文件
2016/03/04 Python
Django1.7+python 2.78+pycharm配置mysql数据库
2016/10/09 Python
好的Python培训机构应该具备哪些条件
2018/05/23 Python
pandas 数据归一化以及行删除例程的方法
2018/11/10 Python
Python字节单位转换实例
2019/12/05 Python
python调用c++返回带成员指针的类指针实例
2019/12/12 Python
CSS3简单实现照片墙
2014/12/12 HTML / CSS
佐卡伊官网:中国知名珠宝品牌
2017/02/05 全球购物
考试退步检讨书
2014/01/15 职场文书
连锁酒店店长职责范本
2014/02/13 职场文书
中学生学雷锋演讲稿
2014/04/26 职场文书
幼儿教师师德师风演讲稿
2014/08/22 职场文书
关于清明节的演讲稿2015
2015/03/18 职场文书
小学教师节活动总结
2015/03/20 职场文书
职场领导同事生日简短祝福语
2019/08/06 职场文书
Redis 限流器
2022/05/15 Redis
hive数据仓库新增字段方法
2022/06/25 数据库