VSCode snippets 自定义Vue3代码片段(持续更新）

在编写Vue代码时发现VSCode中的各类snippets插件无法提供一些常用的代码片段，为避免重复造轮子，提高编码效率，特意自己定义了一些代码片段。为方便初学者，提供了自定义代码片断的方法。
附：辅助工具https://snippet-generator.app/?description=&tabtrigger=&snippet=&mode=vscode

一、 自定义代码片断的方法

1.打开命令面板（Ctrl+Shift+P)

2. 输入 user Snippets,点击配置用户代码片段

3. 新建全局代码片段文件，并给文件命名（如mysnippets)

4. 复制下方代码，替换掉文件中的内容

2. VSCode Vue3自定义代码片段

{//fn-> 标准函数格式"standard function":{"prefix":"fn","body":["function ${1:name}(${2:params}){","  $3","}"],"description":"standard function"},// export arrow functions"export arrow function":{"prefix":"exarrf","body":["export const ${1:fnname} = ($2) =>{","  $3","}"],"description":"export arrow function"},// arrow functions"arrow function":{"prefix":"arrf","body":["const ${1:fnname} = ($2) =>{","  $3","}"],"description":"arrow function"},// export interface"export interface":{"prefix":"expi","body":["export interface ${1:name}{","  $2","}"],"description":"export interface"},// request-get"request-get":{"prefix":"reqget","body":["export const ${1:req} = ($2)=>xgxaxios.get<any,any>(API.$3) "],"description":"request-get"},//request-post"request-post":{"prefix":"reqpost","body":["export const ${1:req} = ($2)=>xgxaxios.post<any,any>(API.$3,$4) "],"description":"request-post"},// request result"requst_result":{"prefix":"reqresult","body":["let result = await req$1($2)","  if (result.code == 200) {","    ElMessage({","      type: \"success\",","      message: result.message","    })","  } else {","    ElMessage({","      type: \"error\",","      message: result.message","    })","  }"],"description":"requst_result"},// impr-> 从vue中导入reactive"import { reactive } from 'vue';":{"prefix":"impr","body":["import { reactive } from 'vue';"],"description":"import { reactive } from 'vue';"},// impv-> 从vue中导入..."import { } from 'vue';":{"prefix":"impv","body":["import { $1 } from 'vue';"],"description":"import { } from 'vue';"},// livfor->  <li>标签中的v-for"li v-for":{"prefix":"livfor","body":["<li v-for=\"item in $1\" :key=\"item.${2:id}\">","    {{ ${3:item} }}","</li>"],"description":"li v-for"},//触发自定义事件"defineEmits":{"prefix":"emit","body":["let $$emit = defineEmits(['$1']);"],"description":"defineEmits"},// <el-form></el-form>"el-form":{"prefix":"elf","body":["<el-form>","  <el-form-item label=\"$1\">","    $2","  </el-form-item>","</el-form>"],"description":"<el-form>"},//<el-form :inline></el-form>"el-form :inline":{"prefix":"elfi","body":["<el-form :inline=\"true\">","  <el-form-item label=\"$1\">$2</el-form-item>","</el-form>"],"description":"el-form :inline"},//<el-form-item></el-form-item>"el-form-item":{"prefix":"elfit","body":["<el-form-item label=\"$1\">$2</el-form-item>"],"description":"el-form-item"},// <el-input></el-input>"el-input":{"prefix":"eli","body":["<el-input placeholder=\"$1\"></el-input>"],"description":"el-input"},"el-table":{"prefix":"eltable","body":["<el-table :data=\"$1\" border>","  <el-table-column label=\"$2\" prop=\"$3\"/>","</el-table>"],"description":"el-table"},//<el-table-column>$1</el-table-column>"el-table-column":{"prefix":"eltc","body":["<el-table-column prop=\"$2\" label=\"$1\"/>"],"description":"el-table-column"},//<el-select></el-select>"el-select":{"prefix":"els","body":["<el-select>","  <el-option label=\"$1\"></el-option>","</el-select>"],"description":"el-select"},//<el-option></el-option>"el-option":{"prefix":"elo","body":["<el-option label=\"$1\"></el-option>"],"description":"el-option"},//<el-button type="primary"></el-button>"el-button-primary":{"prefix":"elbp","body":["<el-button @click=\"\" type=\"primary\">$1</el-button>"],"description":"el-button-primary"},//<el-button type="success"></el-button>"el-button-success":{"prefix":"elbs","body":["<el-button @click=\"\" type=\"success\">$1</el-button>"],"description":"el-button-success"},//<el-button type="info"></el-button>"el-button-info":{"prefix":"elbi","body":["<el-button @click=\"\" type=\"info\">$1</el-button>"],"description":"el-button-info"},//<el-button type="warning"></el-button>"el-button-warning":{"prefix":"elbw","body":["<el-button @click=\"\" type=\"warning\">$1</el-button>"],"description":"el-button-warning"},//<el-button type="danger"></el-button>"el-button-danger":{"prefix":"elbd","body":["<el-button @click=\"\" type=\"danger\">$1</el-button>"],"description":"el-button-danger"},//<el-card></el-card>"el-card":{"prefix":"elcard","body":["<el-card>","  $1","</el-card>"],"description":"el-card"},//<el-dialog></el-dialog>"el-dialog":{"prefix":"eldialog","body":["<el-dialog v-model=\"\" title=\"$1\">","  $2","</el-dialog>"],"description":"el-dialog"},//<el-pagination>"el-pagination":{"prefix":"elpagination","body":["<el-pagination v-model:current-page=\"pageNo\" v-model:page-size=\"pageSize\" ","  :page-sizes=\"[10, 20, 30, 50]\"","  :background=\"true\" ","  layout=\"jumper, prev, pager, next, ->,sizes,total\" :total=\"total\"","  @size-change=\"handleSizeChange\"","  @current-change=\"handleCurrentChange\"/>"],"description":"el-pagination"},//<el-pagination> var function define"el-pagination相关变量与函数":{"prefix":"elpavf","body":["//分页器相关变量","//默认页码","let pageNo = ref<number>(1)","//每页展示的数据条数","let pageSize = ref<number>(10)","//需要展示的数据总条数","let total = ref<number>(0)","//分页器相关函数","//@size-change回调函数","const handleSizeChange = (val: number) => {","  ","}","//@current-change回调函数","const handleCurrentChange = (val: number) => {","  ","}"],"description":"el-pagination相关变量与函数"},//<el-popconfirm></el-popconfirm>"el-popconfirm":{"prefix":"elpopconfirm","body":["<el-popconfirm title=\"$1\">","  <template #reference>","    $2","  </template>","</el-popconfirm>"],"description":"el-popconfirm"},//<template #="{row,index}"></template>"template #":{"prefix":"tempr","body":["<template #=\"{ row, index }\">","  $1","</template>"],"description":"template #"},// 变量代码折叠"region define variables":{"prefix":"regv","body":["//#region define variables","$1","//#endregion"],"description":"region define variables"},// import 代码折叠"region import":{"prefix":"regi","body":["//#region import","$1","//#endregion import"],"description":"region import"},// function 代码折叠"region function":{"prefix":"regf","body":["//#region function","$1","//#endregion function"],"description":"region function"},//数据验证函数"validator function":{"prefix":"validator function","body":["const validator$1 = (_rule: any, value: any, callback: any) => {","    $2","}"],"description":"validator function"}}