# vscode vuejs初始化插件vueinit

**URL:** <https://forum.beginner.center/t/topic/2546>\
**Category:** 🛠工具与编程\
**Tags:** vuejs\
**Created:** [2025 年12 月 26 日 03:54 UTC](https://forum.beginner.center/t/topic/2546 "2025-12-26T03:54:16Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

作者： ![doggie](https://forum.beginner.center/user_avatar/forum.beginner.center/doggie/32/550_2.png) [@doggie](https://forum.beginner.center/u/doggie)\
发布日期： [2025 年12 月 26 日 03:54 UTC](https://forum.beginner.center/t/topic/2546/1 "2025-12-26T03:54:16Z")

</div>

# 下载链接

> **[Vuejs Snippets - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=devlos.vuejs-snippets)**
>
> Extension for Visual Studio Code - Vuejs snippets to increase your productivity (supports vue 3)

# 演示

# 使用说明

### Vue

| Snippet | Purpose |
| --- | --- |
| `vueinit` | Single file component with script setup, template, and style |
| `vuesfinit` | Single file component with script setup function, template, and style |
| `vuescript` | vue script tag |
| `vuetemplate` | vue template tag |
| `vuestyle` | vue style tag |

### TypeScript Vue

| Snippet | Purpose |
| --- | --- |
| `vuetsinit` | TypeScript Vue SFC with script setup |
| `vuetsdefineprops` | TypeScript define props with interface |
| `vuetsdefineemits` | TypeScript define emits with type interface |
| `vuetsref` | TypeScript ref with type annotation |
| `vuetsreactive` | TypeScript reactive state with interface |
| `vuetscomputed` | TypeScript computed property with type annotation |

### Script

| Snippet | Purpose |
| --- | --- |
| `vuedefineprops` | define properties |
| `vuecomputed` | computed property |
| `vuewatch` | watcher |
| `vueprovide` | vue provide |
| `vueinject` | vue inject |
| `vueonmounted` | mounted lifecycle method |
| `vueonunmounted` | mounted lifecycle method |
| `vueonbeforemount` | beforeMount lifecycle method |
| `vueonbeforeunmount` | beforeMount lifecycle method |
| `vueonbeforeupdate` | beforeUpdate lifecycle method |
| `vueonupdated` | updated lifecycle method |
| `vueonactivated` | keepalive lifecycle method |
| `vueondeactivated` | keepalive lifecycle method |
| `vueonrendertracked` | called when a reactive dependency has been tracked |
| `vueonrendertriggered` | reactive dependency triggers the component’s render effect to be re-run |

### Template

| Snippet | Purpose |
| --- | --- |
| `vtext` | v-text |
| `vhtml` | inserting html |
| `vshow` | setting element to display one |
| `vif` | removing or adding element to dom |
| `velse` | v-else |
| `velseif` | use along side v-if |
| `vfor` | v-for directive |
| `von` | v-on click handler with arguments |
| `vbind` | binding onto attributes |
| `vmodel` | Semantic v-model directive |
| `vslot` | denotes named slot |
| `vpre` | skip compilation for this element and its children |
| `vonce` | evaluate only once |
| `vmemo` | memoize data |
| `vcloak` | Used to hide un-compiled template until it is ready |
| `vkey` | key |
| `vref` | reference to a dom element |