在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 相关文章推荐
浅析onsubmit校验表单时利用ajax的return false无效问题
Jul 10 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
Dec 19 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
Aug 25 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
Dec 08 Javascript
vue 2.0封装model组件的方法
Aug 03 Javascript
JS SetInterval 代码实现页面轮询
Aug 11 Javascript
Angular2 http jsonp的实例详解
Aug 31 Javascript
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 Javascript
vue 解决provide和inject响应的问题
Nov 12 Javascript
js实现简单商品筛选功能
Feb 02 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
LotusPhp笔记之:基于ObjectUtil组件的使用分析
2013/05/06 PHP
md5 16位二进制与32位字符串相互转换示例
2013/12/30 PHP
Zend Framework动作助手Url用法详解
2016/03/05 PHP
Array.slice()与Array.splice()的返回值类型
2006/10/09 Javascript
jquery一般方法介绍 入门参考
2011/06/21 Javascript
使用Java实现简单的server/client回显功能的方法介绍
2013/05/03 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
2016/06/18 Javascript
Ajax验证用户名或昵称是否已被注册
2017/04/05 Javascript
nodejs入门教程二:创建一个简单应用示例
2017/04/24 NodeJs
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
Angular4学习之Angular CLI的安装与使用教程
2018/01/04 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
2019/05/14 jQuery
实例讲解React 组件
2020/07/07 Javascript
深入了解JavaScript词法作用域
2020/07/29 Javascript
通过实例了解Render Props回调地狱解决方案
2020/11/04 Javascript
[05:03]2018DOTA2亚洲邀请赛主赛事首日回顾
2018/04/04 DOTA
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
python基础教程之自定义函数介绍
2014/08/29 Python
Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
2016/07/02 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
即兴演讲稿
2014/01/04 职场文书
前台文员个人求职信范文
2014/01/05 职场文书
秋季运动会通讯稿
2014/01/24 职场文书
机关单位人员学雷锋心得体会
2014/03/10 职场文书
《蚕姑娘》教学反思
2014/04/15 职场文书
书香校园建设方案
2014/05/02 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
写给同学的新学期寄语
2015/02/27 职场文书
2016年入党心得体会范文
2016/01/23 职场文书
mysql批量新增和存储的方法实例
2021/04/07 MySQL
解决Python字典查找报Keyerror的问题
2021/05/26 Python
delete in子查询不走索引问题分析
2022/07/07 MySQL