在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 相关文章推荐
JavaScript 学习笔记二 字符串拼接
Mar 28 Javascript
js 多种变量定义(对象直接量,数组直接量和函数直接量)
May 24 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
Jan 02 Javascript
JS判断、校验MAC地址的2个实例
May 05 Javascript
特殊情况下如何获取span里面的值
May 20 Javascript
浅析JavaScript中的事件机制
Jun 04 Javascript
最好用的Bootstrap fileinput.js文件上传组件
Dec 12 Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 Javascript
vue综合组件间的通信详解
Nov 06 Javascript
原生JS检测CSS3动画是否结束的方法详解
Jan 27 Javascript
js中arguments对象的深入理解
May 14 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
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
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
jQuery 1.0.2
2006/10/11 Javascript
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
jquery实现多级下拉菜单的实例代码
2013/10/02 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
js实现div模拟模态对话框展现URL内容
2016/05/27 Javascript
jquery遍历标签中自定义的属性方法
2016/09/17 Javascript
zTree树形插件异步加载方法详解
2017/06/14 Javascript
基于JS实现网页中的选项卡(两种方法)
2017/06/16 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
2017/12/26 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
JavaScript中var、let、const区别浅析
2018/06/24 Javascript
微信小程序indexOf的替换方法(推荐)
2020/01/14 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
2020/02/06 Javascript
[01:20]PWL开团时刻DAY9——听说潮汐没用?
2020/11/10 DOTA
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
Python Tkinter模块 GUI 可视化实例
2019/11/20 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
Notino罗马尼亚网站:购买香水和化妆品
2019/07/20 全球购物
aden + anais英国官网:美国婴儿贴身用品品牌
2019/09/08 全球购物
DOUGLAS荷兰:购买香水和化妆品
2020/10/24 全球购物
妇产科护士自我鉴定
2013/10/15 职场文书
建筑施工员岗位职责
2013/11/26 职场文书
中专生自我鉴定范文
2013/12/19 职场文书
大学生水果店创业计划书
2014/01/28 职场文书
《画杨桃》教学反思
2014/04/13 职场文书
离婚协议书范本(2014版)
2014/09/28 职场文书
专业见习报告范文
2014/11/03 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
廉洁自律个人总结
2015/02/14 职场文书
学校党支部承诺书
2015/04/30 职场文书
工人先锋号事迹材料(2016精选版)
2016/03/01 职场文书
基于python实现银行管理系统
2021/04/20 Python
Mysql基础知识点汇总
2021/05/26 MySQL
Python中Matplotlib的点、线形状、颜色以及绘制散点图
2022/04/07 Python