기사 디렉토리
조각 설정
[설정] - [사용자 미리보기] - [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打印输出"
}