推荐使用vbase-3-setup生成Vue 3组件骨架,因其直接输出语法糖,无需return、支持defineProps/defineEmits,更简洁且符合官方推荐;vbase和vbase-3分别对应Vue 2 Options API和传统Composition API,已不适用于新项目主流实践。

直接装 vue-vscode-snippets,配好 "editor.tabCompletion": "onlySnippets",输入 vbase-3-setup 按 Tab 就能生成带 <script setup></script> 的 Vue 3 组件骨架——这是目前最省事、最贴合主流项目的方式。
为什么不用 vbase 或 vbase-3?
Vue 2 的 vbase 生成 Options API 结构,已不推荐用于新项目;vbase-3 虽是 Vue 3 版本,但用的是传统 Composition API(带 export default + setup() 函数),模板里还得手动写 return { ... }。而 vbase-3-setup 直接输出 <script setup></script> 语法糖,没有冗余导出、无须显式 return、支持顶层 defineProps/defineEmits,更简洁也更符合官方推荐。
- 如果你的项目用的是 Vite + Vue 3.4+,
vbase-3-setup是默认首选 -
vbase-ts和vbase-3-ts-setup才真正启用 TypeScript 类型推导,纯 JS 项目用它们反而多出类型占位符,容易删漏 - 别在
.ts文件里输vbase-3-setup——VSCode 不会触发,它只在.vue文件中生效
Tab 补全没反应?先检查这三处
常见现象:输完 vbase-3-setup 按 Tab 没反应,或弹出其他无关补全项。
审查 Vue 管理后台的变更请求(Vue 2 + Element UI,Vue 3 + Element Plus)。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- 确认当前文件后缀是
.vue,且右下角语言模式显示为 “Vue”(不是 “HTML” 或 “Plain Text”) - 检查设置里
"editor.tabCompletion"是否设为"onlySnippets"——设成"on"会导致和 Emmet、AI 补全冲突 - 禁用
Vetur:它和vue-vscode-snippets在模板解析上重叠,尤其在<script setup></script>场景下易导致片段不触发
vbase-3-setup 生成后要立刻改什么?
它生成的是最小可用骨架,但实际开发中几乎总要调整这几处:
-
defineProps默认是空对象{},需按需填入类型,比如defineProps() -
defineEmits默认注释掉了,如果组件要 emit 事件,得取消注释并补全事件名数组,如defineEmits() -
里默认是 CSS,若项目用 SCSS,得手动把lang="scss"加上,否则后续无法使用嵌套/变量 - 别忽略
setup()函数体里的return——用<script setup></script>时它根本不存在,这点和vbase-3有本质区别
最常被忽略的点:vbase-3-setup 不生成任何逻辑代码,它只搭结构。想加 ref、computed 或 onMounted,得靠对应片段补全,比如输 vref + Tab、v3onmounted + Tab ——这些才是真正在骨架上“长出来”的部分。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










