如何为VueJS 2 TypeScript项目安装Storybook？三种安装方式有何区别？

以下对比完全不考虑npm/yarn/pnpm这类包管理器的差异，只看安装命令本身的行为和适配性：

npx -p @storybook/cli sb init #

• 这是Storybook官方维护的通用初始化命令，执行后会自动扫描项目实际技术栈，精准匹配对应版本的依赖
• 针对Vue2+TS项目，它会自动安装Vue2专属的Storybook核心包，同步补全所有配套依赖：包括TS类型声明、和项目现有构建工具（webpack/Vite）的适配插件
• 自动生成完整的.storybook配置目录，配置里已经默认开启TS解析、Vue单文件组件识别的规则，不需要手动调整基础配置
• 会自动在package.json中补充启动、构建Storybook的脚本，同时生成示例组件和对应的story文件，装完直接运行脚本就能正常启动，对入门新手最友好
• 版本匹配逻辑严谨，不会出现把Vue3专属的Storybook包错装到Vue2项目里的低级错误

vue add storybook #

• 这是Vue CLI插件生态下的第三方Storybook集成方案，并非Storybook官方直接维护
• 仅适配纯Vue CLI脚手架生成的Vue2项目，如果项目不是用Vue CLI搭建的（比如是自定义的Vite+Vue2工程、基于其他模板二次开发的项目），大概率会因为找不到Vue CLI的固定配置结构，直接安装失败
• TS支持和插件版本强绑定：早年的插件版本默认只安装JS版的Storybook核心，需要手动补TS依赖、手动配置TS解析规则，部分场景下会出现TS识别不了story语法的报错
• 版本迭代节奏远慢于官方CLI，通常比官方最新稳定版落后2-3个大版本，很多新的Storybook特性无法直接使用
• 生成的配置会深度绑定Vue CLI的webpack特殊规则，后续如果切换构建工具，迁移成本很高

yarn add --dev @storybook/vue（纯手动安装模式） #

• 这个操作仅会把Vue2版的Storybook核心包装入项目的开发依赖，没有任何自动化初始化逻辑
• 装完后几乎所有环节都需要手动补全：不会自动创建.storybook配置目录、不会生成配置入口文件、不会打通和现有构建工具的适配、不会自动安装TS类型依赖、不会在package.json里添加启动脚本
• 对TS项目来说，需要手动处理的内容包括但不限于：安装配套的TS类型包、编写配置告诉Storybook怎么解析TS语法和Vue单文件组件、调整构建配置打通热更新逻辑，新手装完之后基本要翻大量文档才能让Storybook正常运行
• 这种方式的灵活度最高，但完全不适合刚入门的新手使用

内容的提问来源于stack exchange，提问作者Radek Svítil