在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 相关文章推荐
splice slice区别
Oct 09 Javascript
Jquery实现视频播放页面的关灯开灯效果
May 27 Javascript
js生成缩略图后上传并利用canvas重绘
May 15 Javascript
JS插件overlib用法实例详解
Dec 26 Javascript
浅谈JavaScript for循环 闭包
Jun 22 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
Vue.js组件tree实现省市多级联动
Dec 02 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
Apr 26 Javascript
vue响应式系统之observe、watcher、dep的源码解析
Apr 09 Javascript
JS实现的贪吃蛇游戏案例详解
May 01 Javascript
vue多页面项目中路由使用history模式的方法
Sep 23 Javascript
H5 js点击按钮复制文本到粘贴板
Nov 19 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 include,include_once,require,require_once
2008/09/05 PHP
PHP实现把数字ID转字母ID
2013/08/12 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
php抽象方法和抽象类实例分析
2016/12/07 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
2010/03/14 Javascript
js 静态动态成员 and 信息的封装和隐藏
2011/05/29 Javascript
解析js如何获取当前url中的参数值并复制给input
2013/06/23 Javascript
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
nodejs命令行参数处理模块commander使用实例
2014/09/17 NodeJs
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
浅谈$_FILES数组为空的原因
2017/02/16 Javascript
jquery.picsign图片标注组件实例详解
2018/02/02 jQuery
vue 自定义 select内置组件
2018/04/10 Javascript
使用node搭建自动发图文微博机器人的方法
2019/03/22 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
2020/05/18 Javascript
打开电脑上的QQ的python代码
2013/02/10 Python
python中异常捕获方法详解
2017/03/03 Python
Numpy 将二维图像矩阵转换为一维向量的方法
2018/06/05 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
python 实现return返回多个值
2019/11/19 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
CSS3解析抖音LOGO制作的方法步骤
2019/04/11 HTML / CSS
Shoes For Crews法国官网:美国领先的防滑鞋设计和制造商
2018/01/01 全球购物
美国校服网上商店:French Toast
2019/10/08 全球购物
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
大学生就业意向书范文
2014/04/01 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
个人年终总结怎么写
2015/03/09 职场文书
亮剑观后感300字
2015/06/05 职场文书
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS
SpringBoot集成Redis的思路详解
2021/10/16 Redis
浅谈克隆 JavaScript
2021/11/02 Javascript
我收到了德劲DE1107
2022/04/05 无线电