在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 相关文章推荐
jQuery Ajax请求状态管理器打包
May 03 Javascript
jquery学习总结(超级详细)
Sep 04 Javascript
jQuery选择器全集详解
Nov 24 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
Dec 05 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
Angular利用trackBy提升性能的方法
Jan 26 Javascript
使用JS判断移动端手机横竖屏状态
Jul 30 Javascript
JavaScript数组特性与实践应用深入详解
Dec 30 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 Javascript
vuex实现购物车功能
Jun 28 Javascript
vue实现把接口单独存放在一个文件方式
Aug 13 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
国产动画《伍六七》原声大碟大卖,啊哈娱乐引领音乐赋能IP的新尝试
2020/03/08 国漫
php 代码优化之经典示例
2011/03/24 PHP
PHP中date()日期函数有关参数整理
2011/07/19 PHP
PHPMailer邮件发送的实现代码
2013/05/04 PHP
深入解析php中的foreach问题
2013/06/30 PHP
Yii2.0 模态弹出框+ajax提交表单
2016/05/22 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
javascript 函数使用说明
2010/04/07 Javascript
基于jquery的bankInput银行卡账号格式化
2012/08/22 Javascript
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
Vue中使用vux的配置详解
2017/05/05 Javascript
es6学习之解构时应该注意的点
2017/08/29 Javascript
vue iview组件表格 render函数的使用方法详解
2018/03/15 Javascript
React手稿之 React-Saga的详解
2018/11/12 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
基于javascript实现日历功能原理及代码实例
2020/05/07 Javascript
[01:18:43]2014 DOTA2华西杯精英邀请赛5 24 iG VS DK
2014/05/25 DOTA
pyqt5的QComboBox 使用模板的具体方法
2018/09/06 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
Python 中pandas索引切片读取数据缺失数据处理问题
2019/10/09 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
Python将字典转换为XML的方法
2020/08/01 Python
aec加密 php_php aes加密解密类(兼容php5、php7)
2021/03/14 PHP
如何唤起类中的一个方法
2013/11/29 面试题
毕业自我评价范文
2013/11/17 职场文书
文明礼仪小标兵事迹
2014/01/12 职场文书
2014三八妇女节活动总结
2014/03/01 职场文书
幼儿园感谢信
2015/01/21 职场文书
继承权公证书范本
2015/01/23 职场文书
采购员工作总结范文
2015/08/12 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript