비주얼 스튜디오 코드 뷰 조각 개요


조각 설정
[설정] - [사용자 미리보기] - [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 作用域插槽模板": {
		"prefix": "tsc",
		"body": [
			"<template slot-scope=\"scope\">",
			"",
			"</template>",
		],
		"description": "template 作用域插槽模板"
	}

둘째, 신속한 응답 논문

1. 오류 응답! 200 팁

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

2. 성공 신속한 응답 (200)

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

세, Axios의 논문을 요청

1. Axios의 요청을받을

"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의 포스트 요청

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의 요청을 넣어

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 이벤트

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

4.2. 확인 이벤트

"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. 삭제 이벤트 확인

"删除确认 事件": {
		"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. 페이지 점프 이벤트

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

4.5. 버튼을 지우기 입력 이벤트 취소

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

4.6. 유효성 검사 규칙 이벤트

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

다섯째, 로그 출력 논문

5.1. 단점 출력

"cons打印输出": {
		"prefix": "clog",
		"body": [
			"console.log()"
		],
		"description": "cons打印输出"
	}
게시 된 976 개 원래 기사 · 원 찬양 (151) ·은 25 만 + 조회수

추천

출처blog.csdn.net/weixin_40816738/article/details/105338556