在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 相关文章推荐
MooTools 1.2介绍
Sep 14 Javascript
说说JSON和JSONP 也许你会豁然开朗
Sep 02 Javascript
Javascript动态引用CSS文件的2种方法介绍
Jun 06 Javascript
JavaScript不刷新实现浏览器的前进后退功能
Nov 05 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
jQuery时间轴插件使用详解
Jul 16 Javascript
jquery合并表格中相同文本的相邻单元格
Jul 17 Javascript
jQuery+HTML5美女瀑布流布局实现方法
Sep 21 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
小程序实现授权登陆的解决方案
Dec 02 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
Dec 05 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
Sep 06 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安装全攻略:APACHE
2006/10/09 PHP
Windows下利用Gvim写PHP产生中文乱码问题解决方法
2011/04/20 PHP
php下拉选项的批量操作的实现代码
2013/10/14 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
2016/06/17 Javascript
基于JavaScript实现轮播图代码
2016/07/14 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
JS给按钮添加跳转功能类似a标签
2017/05/30 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
javascript触发模拟鼠标点击事件
2019/06/26 Javascript
javascript面向对象三大特征之多态实例详解
2019/07/24 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中函数的用法实例教程
2014/09/08 Python
python使用datetime模块计算各种时间间隔的方法
2015/03/24 Python
python算法演练_One Rule 算法(详解)
2017/05/17 Python
python模块smtplib实现纯文本邮件发送功能
2018/05/22 Python
python爬虫之自制英汉字典
2019/06/24 Python
用python生成与调用cntk模型代码演示方法
2019/08/26 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
使用Python实现 学生学籍管理系统
2019/11/26 Python
python中upper是做什么用的
2020/07/20 Python
python实现按日期归档文件
2021/01/30 Python
阿波罗盒子:Apollo Box
2017/08/14 全球购物
SQL数据库笔试题
2016/03/08 面试题
EJB timer的种类
2014/10/28 面试题
11月升旗仪式讲话稿
2014/02/15 职场文书
消防安全员岗位职责
2014/03/10 职场文书
2015年房地产个人工作总结
2015/05/26 职场文书
干部考核工作总结2015
2015/07/24 职场文书
入党宣誓大会后的感想
2015/08/10 职场文书
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android