在vscode 中设置 vue模板内容的方法


Posted in Javascript onSeptember 02, 2020

vscode中设置 vue 模板内容缘由设置要求1:vscode 先下载插件 `vetur`2: 菜单栏 -文件 - 首选项 - 用户代码片段3:使用

缘由

由于每次在 vscode 中创建vue的文件的时候,都需要手动书写
templete,模板
script,脚本
style,样式
这些重复和繁琐的事情,是可以定义一个模板信息的

设置要求

1:vscode 先下载插件 vetur

在vscode 中设置 vue模板内容的方法

2: 菜单栏 -文件 - 首选项 - 用户代码片段

在vscode 中设置 vue模板内容的方法

以下是借鉴一下谷粒商城的 提供 vue 模板信息 和 httpget、httppost请求

{
	"生成vue模板": {
		"prefix": "vue",
		"body": [
			"<template>",
			"<div></div>",
			"</template>",
			"",
			"<script>",
			"//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)",
			"//例如:import 《组件名称》 from '《组件路径》';",
			"",
			"export default {",
			" //import引入的组件需要注入到对象中才能使用",
			"components: {},",
			"props: {},",
			"data() {",
			"//这里存放数据",
			"return {",
			"",
			"};",
			"},",
			"//计算属性 类似于data概念",
			"computed: {},",
			"//监控data中的数据变化",
			"watch: {},",
			"//方法集合",
			"methods: {",
			"",
			"},",
			"//生命周期 - 创建完成(可以访问当前this实例)",
			"created() {",
			"",
			"},",
			"//生命周期 - 挂载完成(可以访问DOM元素)",
			"mounted() {",
			"",
			"},",
			"beforeCreate() {}, //生命周期 - 创建之前",
			"beforeMount() {}, //生命周期 - 挂载之前",
			"beforeUpdate() {}, //生命周期 - 更新之前",
			"updated() {}, //生命周期 - 更新之后",
			"beforeDestroy() {}, //生命周期 - 销毁之前",
			"destroyed() {}, //生命周期 - 销毁完成",
			"activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发",
			"}",
			"</script>",
			"<style scoped>",
			"$4",
			"</style>"
		],
		"description": "生成vue模板"
	},
	"http-get请求": {
	"prefix": "httpget",
	"body": [
		"this.\\$http({",
		"url: this.\\$http.adornUrl(''),",
		"method: 'get',",
		"params: this.\\$http.adornParams({})",
		"}).then(({ data }) => {",
		"})"
	],
	"description": "httpGET请求"
 },
 "http-post请求": {
	"prefix": "httppost",
	"body": [
		"this.\\$http({",
		"url: this.\\$http.adornUrl(''),",
		"method: 'post',",
		"data: this.\\$http.adornData(data, false)",
		"}).then(({ data }) => { });" 
	],
	"description": "httpPOST请求"
 }
}

3:使用

在新创建的vue文件中,根据刚才的文件名就可以快速生成模板中的文件内容

在vscode 中设置 vue模板内容的方法

比如,此时就是设置的 vue

总结

到此这篇关于在vscode 中设置 vue模板内容的方法的文章就介绍到这了,更多相关vscode 设置 vue模板内容内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
再谈ie和firefox下的document.all属性
Oct 21 Javascript
JavaScript 组件之旅(一)分析和设计
Oct 28 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
Apr 11 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
Dec 18 Javascript
判断iframe里的页面是否加载完成
Jun 06 Javascript
jQuery调取jSon数据并展示的方法
Jan 29 Javascript
Bootstrap实现各种进度条样式详解
Apr 13 Javascript
JS实现标签滚动切换效果
Dec 25 Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 Javascript
使用pkg打包ThinkJS项目的方法步骤
Dec 30 Javascript
小程序中手机号识别的示例
Dec 14 Javascript
JavaScript array常用方法代码实例详解
Sep 02 #Javascript
Vue前端判断数据对象是否为空的实例
Sep 02 #Javascript
详解JavaScript 事件流
Sep 02 #Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 #Javascript
jQuery中getJSON跨域原理的深入讲解
Sep 02 #jQuery
JavaScript交换变量常用4种方法解析
Sep 02 #Javascript
Vue-cli打包后部署到子目录下的路径问题说明
Sep 02 #Javascript
You might like
PHP网页游戏学习之Xnova(ogame)源码解读(十四)
2014/06/26 PHP
yii2.0实现验证用户名与邮箱功能
2015/12/22 PHP
php实现等比例压缩图片
2018/07/26 PHP
php实现将数据做成json的格式给前端使用
2018/08/21 PHP
ThinkPHP 3.2.3实现加减乘除图片验证码
2018/12/05 PHP
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
jquery photoFrame 图片边框美化显示插件
2010/06/28 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
2013/08/02 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
jquery 按键盘上的enter事件
2014/05/11 Javascript
jQuery中clone()方法用法实例
2015/01/16 Javascript
JS实现来回出现文字的状态栏特效代码
2015/10/31 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
2016/04/01 Javascript
实例浅析js的this
2016/12/11 Javascript
jquery实现下拉框多选方法介绍
2017/01/03 Javascript
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
基于vue展开收起动画的示例代码
2018/07/05 Javascript
15个顶级开源JavaScript框架和库
2018/10/10 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
举例讲解Python中的算数运算符的用法
2015/05/13 Python
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
Python通过future处理并发问题
2017/10/17 Python
python+django加载静态网页模板解析
2017/12/12 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
基于python使用tibco ems代码实例
2019/12/20 Python
Pycharm安装第三方库失败解决方案
2020/11/17 Python
美术国培研修感言
2014/02/12 职场文书
挂科检讨书范文
2014/02/20 职场文书
物理学专业求职信
2014/07/04 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
师德师风剖析材料
2014/09/30 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
中层干部考核评语
2015/01/04 职场文书
医德医风学习心得体会
2016/01/25 职场文书
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang