在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 相关文章推荐
小议Function.apply() 之一------(函数的劫持与对象的复制)
Nov 30 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
Mar 18 Javascript
将文本输入框内容加入表中的js代码
Aug 18 Javascript
jQuery中dom元素上绑定的事件详解
Apr 24 Javascript
JavaScript设计模式初探
Jan 07 Javascript
jquery代码规范让代码越来越好看
Feb 03 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
你应该知道的几类npm依赖包管理详解
Oct 06 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
javascript trie前缀树的示例
Jan 29 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
Dec 09 Javascript
vue项目中js-cookie的使用存储token操作
Nov 13 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
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
php中根据某年第几天计算出日期年月日的代码
2011/02/24 PHP
浅析十款PHP开发框架的对比
2013/07/05 PHP
PHP包含文件函数include、include_once、require、require_once区别总结
2014/04/05 PHP
php获取ip及网址的简单方法(必看)
2017/04/01 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
jquery validate.js表单验证的基本用法入门
2010/05/13 Javascript
jQuery 在光标定位的地方插入文字的插件
2012/05/10 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
React学习之事件绑定的几种方法对比
2017/09/24 Javascript
vue解决跨域路由冲突问题思路解析
2017/11/03 Javascript
解读vue生成的文件目录结构及说明
2017/11/27 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
在axios中使用params传参的时候传入数组的方法
2018/09/25 Javascript
基于js Canvas实现二次贝塞尔曲线
2018/12/25 Javascript
mpvue微信小程序开发之实现一个弹幕评论
2019/11/24 Javascript
使用python编写脚本获取手机当前应用apk的信息
2014/07/21 Python
详解django三种文件下载方式
2018/04/06 Python
python实现图片识别汽车功能
2018/11/30 Python
python dict 相同key 合并value的实例
2019/01/21 Python
python在回调函数中获取返回值的方法
2019/02/22 Python
python2和python3在处理字符串上的区别详解
2019/05/29 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
营销与策划应届生求职信
2013/11/04 职场文书
工地安全标语
2014/06/07 职场文书
小学课外活动总结
2014/07/09 职场文书
广告设计专业毕业生自我鉴定
2014/09/27 职场文书
文明家庭事迹材料
2014/12/20 职场文书
2015年体育教学工作总结
2015/05/20 职场文书
被委托人身份证明
2015/08/07 职场文书
《成长的天空》读后感3篇
2019/12/06 职场文书
Java基于字符界面的简易收银台
2021/06/26 Java/Android
js 数组 fill() 填充方法
2021/11/02 Javascript
python解析照片拍摄时间进行图片整理
2022/07/23 Python