Visual Studio Code Vue代码片段 总览

代码片段设置
【设置】-【用户代码片段】-【xxx.code.snippets】

默认xxx.code.snippets文件内容：
{}

一、模板篇

1. 初始化.vue       文件模板

"Vue init template": {
		"prefix": "tss",
		"body": [
			"<!-- 模板区域 -->",
			"<template>",
			"<div>",
			"<!-- 模板内容 -->",
			"",
			"</div>",
			"</template>",
			"",
			"<!-- 行为区域 -->",
			"<script>",
			"export default {",
			"  // 数据存放区域",
			"  data () {",
			"    return {",
			"    }",
			"  },",
			"  // 生命周期函数",
			"  created () {",
			"  },",
			"  // 方法函数",
			"  methods: {",
			"  },",
			"  // 计算属性",
			"  computed: {",
			"  }",
			"}",
			"</script>",
			"<!-- 样式区域 -->",
			"<style lang='less' scoped>",
			"",
			"</style>",
			""
		],
		"description": "Vue init template"
	}

2. template 作用域插槽模板

	"template 作用域插槽模板": {
		"prefix": "tsc",
		"body": [
			"<template slot-scope=\"scope\">",
			"",
			"</template>",
		],
		"description": "template 作用域插槽模板"
	}

二、响应提示篇

1. error       响应 ！200提示

"err200 消息提示": {
		"prefix": "err2",
		"body": [
			" if (res.meta.status !== 200) {",
			"   return this.\\$message.error('失败')",
			" }",
			" this.\\$message.success('成功！')"
		],
		"description": "err200 消息提示"
	}

2. success 响应     200提示

"success 消息提示": {
		"prefix": "sucmsg",
		"body": [
			"this.\\$message.success('成功')"
		],
		"description": "success 消息提示"
	}

三、axios请求篇

1. axios get    请求

"axios get请求": {
		"prefix": "aget",
		"body": [
			"const { data:res } = await this.\\$http.get('')",
			" if (res.meta.status !== 200) {",
			"   return this.\\$message.error('失败')",
			" }",
			" this.\\$message.success('成功！')"
		],
		"description": "axios get请求"
	}

2. axios post   请求

axios post请求": {
		"prefix": "apost",
		"body": [
			"const { data:res } = await this.\\$http.post('')",
			" if (res.meta.status !== 200) {",
			"   return this.\\$message.error('失败')",
			" }",
			" this.\\$message.success('成功！')"
		],
		"description": "axios post请求"
	}

3. axios put    请求

axios put请求": {
		"prefix": "apost",
		"body": [
			"const { data:res } = await this.\\$http.put('')",
			" if (res.meta.status !== 200) {",
			"   return this.\\$message.error('失败')",
			" }",
			" this.\\$message.success('成功！')"
		],
		"description": "axios put请求"
	}

4. axios delete请求

axios delete请求": {
		"prefix": "apost",
		"body": [
			"const { data:res } = await this.\\$http.delete('')",
			" if (res.meta.status !== 200) {",
			"   return this.\\$message.error('失败')",
			" }",
			" this.\\$message.success('成功！')"
		],
		"description": "axios delete请求"
	}

四、事件篇

4.1. @click    Event

"@click 事件": {
		"prefix": "@cli",
		"body": [
			"@click=\"\""
		],
		"description": "打印输出"
	}

4.2. confirm   Event

"confirm 事件": {
		"prefix": "conf",
		"body": [
			"  const confirmResult = await this.\\$confirm('此操作将永久删除该文件, 是否继续?', '提示', {",
			"    confirmButtonText: '确定',",
			"    cancelButtonText: '取消',",
			"    type: 'warning'",
			"  }).catch(err => err)",
			"  if (confirmResult !== 'confirm') {",
			"    return this.\\$message.info('已经取消了删除！')",
			"  }",
		],
		"description": "confirm 事件"
	}

4.3. 确认删除 Event

"删除确认 事件": {
		"prefix": "cdel",
		"body": [
			"async removeById (id) {",
			"  const confirmResult = await this.\\$confirm('此操作将永久删除该文件, 是否继续?', '提示', {",
			"    confirmButtonText: '确定',",
			"    cancelButtonText: '取消',",
			"    type: 'warning'",
			"  }).catch(err => err)",
			"  if (confirmResult !== 'confirm') {",
			"    return this.\\$message.info('已经取消了删除！')",
			"  }",
			"  const { data: res } = await this.\\$http.delete(",
			" `goods/\\${id}`)",
			"  if (res.meta.status !== 200) {",
			"    return this.\\$message.error('删除xx失败')",
			"  }",
			"  this.\\$message.success('删除xx成功！')",
			"  this.getXXXlist()",
			"}",
		],
		"description": "删除确认 事件"
	}

4.4. 页面跳转 Event

"页面跳转 事件": {
		"prefix": "$ro",
		"body": [
			"this.$router.push('/xxpage')",
		],
		"description": "页面跳转 事件"
	}

4.5. 取消按钮 清空input Event

"取消按钮 清空input 事件": {
		"prefix": "$refs",
		"body": [
			"this.\\$refs.xxxFromRef.resetFields()",
		],
		"description": "取消按钮 清空input 事件"
	}

4.6. 校验规则 Event

"校验规则 事件": {
		"prefix": "rq",
		"body": [
			"name: [",
			"  { required: true, message: '请输入活动名称', trigger: 'blur' },",
			"  { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }",
			"]",
		],
		"description": "校验规则 事件"
	}

五、日志输出篇

5.1. cons打印输出

"cons打印输出": {
		"prefix": "clog",
		"body": [
			"console.log()"
		],
		"description": "cons打印输出"
	}