Skip to content

v3-snippets

v3-snippets 是一个适配 Vue3 模版、路由、Api 和 ES6 常用函数的 vscode 插件

注意 :本插件不适用于 vue2

安装

为了安装扩展，需要启动命令(Ctrl + Shift + P 或 Cmd + Shift + P)并键入 Extensions。您可以选择显示已经安装的代码段或安装新的代码段。搜索 v3-snippets并安装。

支持的语言(file extensions)

JavaScript (.js)
Vue (.vue)

代码片段

下面是所有可用代码段的列表以及每个代码段的关键词。 ⇥表示“TAB”键。

vue3

关键词	代码片段
`v3setup→`	`<template><div></div></template><script setup>const props = defineProps({});const emits = defineEmits();</script><style scoped lang="scss"></style>`
`v3options→`	`<template><div></div></template><script>...</script><style lang="scss" scoped></style>`
`v3ref→`	`const ref = ref(xxx);`
`v3reactive→`	`const name = reactive({});`
`v3props→`	`const props = defineProps({ })`
`v3emits→`	`const emit = defineEmits(['...', '...'])`
`v3proxy→`	`const { proxy } = getCurrentInstance()`
`v3watch→`	`watch(xx, (newValue, oldValue) => {}, { deep: true });`
`v3computed→`	`const $1 = computed(() => {})`
`v3nextTick→`	`nextTick(() => {})`
`v3Mounted→`	`onMounted(() => {})`
`v3Updated→`	`onUpdated(() => {})`
`v3unmounted→`	`onUnmounted(() => {})`
`v3expose→`	`defineExpose({});`

vue-template

关键词	代码片段
`vText→`	`v-text="..."`
`vHtml→`	`v-html="..."`
`vShow→`	`v-show="..."`
`vIf→`	`v-if="..."`
`velse→`	`v-else`
`velseif→`	`v-else-if="..."`
`vFor→`	`v-for="... in ..." :key="..."`
`vFor(withoutKey)→`	`v-for="... in ..."`
`vOn→`	`v-on="..."`
`vBind→`	`v-bind="..."`
`vModel→`	`v-model="..."`
`vSlot→`	`v-slot="..."`
`vOnce→`	`v-once`
`iscomponent→`	`<component :is="..."></component>`

vue-router

关键词	代码片段
`vroute`	`{'path':...,name:...,component: () => import('...')},mate:...`
`vrte`	`import { useRoute } from 'vue-router' const route = useRoute()`
`vrter`	`import { useRouter } from 'vue-router' const router = useRouter()`
`vrtes`	= vrte + vrter
`beforeeach`	`router.beforeEach((to, from, next) =>{...}`
`beforeresolve`	`router.beforeResolve((to, from, next) => {...}`
`afterEach`	`router.afterEach((to, from) => {...}`
`beforeenter`	`beforeEnter(to, from, next) {...}`
`beforeRouteEnter`	`beforeRouteEnter(to, from, next) {...}`
`beforeRouteLeave`	`beforeRouteLeave(to, from, next) {...}`

Import and export

关键词	代码片段
`imp→`	`import fs from 'fs';`
`imn→`	`import 'animate.css'`
`imd→`	`import {rename} from 'fs';`
`ime→`	`import * as localAlias from 'fs';`
`ima→`	`import { rename as localRename } from 'fs';`
`env→`	`export const nameVariable = localVariable;`
`enf→`	`export const log = (parameter) => { console.log(parameter);};`

Various methods

关键词	代码片段
`fre→`	`array.forEach(currentItem => {})`
`fof→`	`for(const item of object) {}`
`fin→`	`for(const item in object) {}`
`anfn→`	`(params) => {}`
`nfn→`	`const add = (params) => {}`
`dob→`	`const {rename} = fs`
`dar→`	`const [first, second] = [1,2]`
`cob→`	`const name = {}`
`coc→`	`const name = constant`
`coa→`	`const name = []`
`sti→`	`setInterval(() => {});`
`sto→`	`setTimeout(() => {});`
`prom→`	`return new Promise((resolve, reject) => {});`
`then→`	`.then(res => {})`
`thene→`	`.then(res => {},err=>{})`
`thenc→`	`.then(res => {}).catch((err) => {});`

element plus

关键词	代码片段
`v3el-btn→`	`<el-button ...>`
`v3el-btntext→`	`<el-button text>`
`v3el-radio→`	`<el-radio>`
`v3el-checkbox`	`<el-checkbox>`

v3-admin-el

开源模版项目v3-admin-el独有代码段

关键词	代码片段
`v3Dialog→`	生成命令式弹窗 Dialog
`v3Drawer→`	生成命令式弹窗 Drawer
`v3page-hooks→`	快捷生成 usePage
`v3search-hooks→`	快捷生成 useSearch
`v3date-json→`	快捷生成表单时间选择框 json
`v3input-json→`	快捷生成表单输入框 json
`v3radio-json→`	快捷生成表单单选框 json
`v3select-json→`	快捷生成表单下拉选择框 json
`v3daterange-json→`	快捷生成表单时间区间选择框 json