在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 相关文章推荐
使用TextRange获取输入框中光标的位置的代码
Mar 08 Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
Dec 06 Javascript
javascript实现文字图片上下滚动的具体实例
Jun 28 Javascript
Javascript中call的两种用法实例
Dec 13 Javascript
js实现汉字排序的方法
Jul 23 Javascript
Node.js开发者必须了解的4个JS要点
Feb 21 Javascript
教你快速搭建Node.Js服务器的方法教程
Mar 30 Javascript
使用react render props实现倒计时的示例代码
Dec 06 Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 Javascript
详解webpack的文件监听实现(热更新)
Sep 11 Javascript
解决vue-loader加载不上的问题
Oct 21 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
强烈声明: 不要使用(include/require)_once
2013/06/06 PHP
深入Nginx + PHP 缓存详解
2013/07/11 PHP
PHP中使用Memache作为进程锁的操作类分享
2015/03/30 PHP
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
2012/08/14 Javascript
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
ext中store.load跟store.reload的区别示例介绍
2014/06/17 Javascript
浅谈document.write()输出样式
2015/05/07 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
jQuery插件支持同一页面被多次调用
2016/02/14 Javascript
JS使用onerror捕获异常示例
2016/08/03 Javascript
对js中回调函数的一些看法
2016/08/29 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
基于JavaScript实现数码时钟效果
2020/03/30 Javascript
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
javascript设计模式之装饰者模式
2020/01/30 Javascript
js实现简单的轮播图效果
2020/12/13 Javascript
python实现zencart产品数据导入到magento(python导入数据)
2014/04/03 Python
Python标准库内置函数complex介绍
2014/11/25 Python
Python中标准模块importlib详解
2017/04/16 Python
如何解决cmd运行python提示不是内部命令
2020/07/01 Python
基于Python实现天天酷跑功能
2021/01/06 Python
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
Java如何获得ResultSet的总行数
2016/09/03 面试题
2013英文求职信模板范文
2013/11/15 职场文书
教师申诉制度
2014/01/29 职场文书
初中优秀班集体申报材料
2014/05/01 职场文书
学校政风行风评议工作总结
2014/10/21 职场文书
晚会开幕词
2015/01/28 职场文书
店长岗位职责
2015/02/11 职场文书
PyTorch dropout设置训练和测试模式的实现
2021/05/27 Python
Nginx location 和 proxy_pass路径配置问题小结
2021/09/04 Servers
利用正则表达式匹配浮点型数据
2022/05/30 Java/Android