VScode 插件 vue快捷生成 Vue VSCode Snippets

Vue

Snippet Purpose
vbase Single file component base with SCSS带SCSS的单文件组件库
vbase-3 Single File component Composition API with SCSS带SCSS的单文件组件组合API
vbase-3-setup Single File component setup Composition API with SCSS带SCSS的单文件组件安装组合API
vbase-3-reactive Single File component Composition API with Reactive and SCSS带有Reactive和SCSS的单文件组件组合API
vbase-css Single file component base with CSS带CSS的单文件组件库
vbase-pcss Single file component base with PostCSS带postss的单文件组件库
vbase-styl Single file component base with Stylus带触针的单文件组件底座
vbase-ts Single file component base with Typescript带Typescript的单文件组件库
vbase-ts-class Single file component base with Typescript Class Format          Typescript类格式的单文件组件库
vbase-3-ts Single File component Composition API with Typescript   带Typescript的单文件组件组合API
vbase-3-ts-setup Single File component setup Composition API with Typescript   带有Typescript的单文件组件安装组合API
vbase-ns Single file component with no styles    没有样式的单个文件组件
vbase-sass Single file component base with SASS  带SASS的单文件组件库
vbase-less Single file component base with LESS   单文件组件库

Template

Snippet Purpose
vfor v-for directive
vmodel Semantic v-model directive
vmodel-num Semantic v-model number directive
von v-on click handler with arguments
vslot-named Named slot
vel-props Component element with props
vsrc Image src binding
vstyle Inline style binding
vstyle-obj Inline style binding with objects
vclass Class binding
vclass-obj Class binding with objects
vclass-obj-mult Multiple conditional class bindings
vanim Transition component with JS hooks
vnuxtl Nuxt Routing Link
vroutename router-link Named Routing
vroutenameparam router-link Named with Parameters
vroutepath router-link Path Routing Link
vemit-child Emit event from child component
vemit-parent Emit event to parent component

Script

Snippet Purpose
vdata Component data as a function
vmethod Vue method
vcomputed Vue computed property
vwatcher Vue watcher with new and old value args
vbeforecreate beforeCreate lifecycle method
vcreated created lifecycle method
vbeforemount beforeMount lifecycle method
vmounted vmounted lifecycle method
vbeforeupdate beforeUpdate lifecycle method
vupdated updated lifecycle method
vbeforedestroy beforeDestroy lifecycle method
vdestroyed destroyed lifecycle method
vprops Props with type and default
vimport Import one component into another
vimport-dynamic Import one component that should be lazy loaded by webpack
vcomponents Import one component into another within the export statement
vimport-export Import one component into another and use it within the export statement
vmapstate import mapState from Vuex into vue component component
vmapgetters import mapGetters from Vuex into vue component component
vmapmutations import mapMutations from Vuex into vue component component
vmapactions import mapActions from Vuex into vue component component
vfilter Vue filter
vmixin Create a Vue Mixin
vmixin-use Bring a mixin into a component to use
vc-direct Vue create a custom directive
vimport-lib Import a library
vimport-gsap Import GreenSock
vanimhook-js Using the Transition component JS hooks in methods
vcommit Commit to Vuex store in methods for mutation
vdispatch Dispatch to Vuex store in methods for action
vtest A simple unit testing component

Vue Composition API

Snippet Purpose
v3reactive Vue Composition API - reactive
v3reactive-setup Vue Composition API - reactive with setup boilerplate
v3computed Vue Composition API - computed
v3watch Vue Composition API - watcher single source
v3watch-array Vue Composition API - watch as array
v3watcheffect Vue Composition API - watchEffect
v3ref Vue Ref
v3onmounted Lifecycle hook - onMounted
v3onbeforemount Lifecycle hook - onBeforeMount
v3onbeforeupdate Lifecycle hook - onBeforeUpdate
v3onupdated Lifecycle hook - onUpdated
v3onerrorcaptured Lifecycle hook - one rrorCaptured
v3onunmounted Lifecycle hook - (destroyed) onUnmounted
v3onbeforeunmount Lifecycle hook - (beforeDestroy) onBeforeUnmount
v3useinoptions Use Composition API in Options API

Vuex

Snippet Purpose
vstore Base for Vuex store.js
vgetter Vuex Getter
vmutation Vuex Mutation
vaction Vuex Action
vmodule Vuex Module
vstore-import Import vuex store into main.js
vstore2 Updated Base for Vuex store

Vue Router

Snippet Purpose
vrouter Vue Router base
vscrollbehavior Vue Router scrollBehavior
vbeforeeach Vue Router global guards beforeEach
vbeforeresolve Vue Router global guards beforeResolve
vaftereach Vue Router global guards afterEach
vbeforeenter Vue Router per-route guard beforeEnter
vbeforerouteenter Vue Router component guards beforeRouteEnter
vbeforerouteupdate Vue Router component guards beforeRouteUpdate
vbeforerouteleave Vue Router component guards beforeRouteLeave

Vue Config

Snippet Purpose
vplugin Import a plugin to main.js or plugins file
vconfig vue.config.js file, example imports a sass file into every component

Nuxt Config

Snippet Purpose
nfont link to include fonts in a nuxt project, in nuxt-config
ncss link to css assets such as normalize

Nuxt Page

Snippet Purpose
nasyncdata Nuxt asyncData
nasyncdataaxios Nuxt asyncData with Axios module
nfetch Nuxt Fetch
nfetchaxios Nuxt Fetch with Axios module
nhead Nuxt Head
nparam Nuxt Route Params

Extra (plaintext)

 

Snippet Purpose
gitignore .gitignore file presets

上一篇:MongoDB Linux下载安装与连接


下一篇:软件设计模式(1):创建者模式——单例模式