一、创建 nuxt2 项目
yarn create nuxt-app <项目名>
二、安装 storybook
2.1、初始化 Storybook
pnpm add -g @storybook/cli
npx -p @storybook/cli sb init
命令解释
2.2、本文选择 vite
2.3、Failed to load preset: "@storybook\\vue-vite\\preset"
解决报错
yarn add vite
因为已经此时已经安装了storybook，我们现在 执行 yarn storybook 启动
yarn storybook
2.4、Error: Failed to resolve entry for package "unfetch". The package may have incorrect main/module/exports specified in its package.json.
这个错误通常是由于“unfetch”模块在其package.json文件中未正确指定main或module导致的。
我们尝试以下几个步骤：
1、确认你的项目已安装了“unfetch”模块并且版本正确。
2、检查“unfetch”模块的package.json文件，指定其main或module属性。
3、检查package.json中exports内容：
"exports": { ".": { "import": "./src/index.mjs", "default": "./src/index.js" }, }
改为
"exports": { ".": { "import": "./src/index.mjs", "default": "./src/index.js" }, }
问题解决了
2.5、再次启动storybook，启动成功
2.6、当点击页面内容时候，报错如下图
报错原因
yarn add @vitejs/plugin-vue
这个错误是由于在使用 Vite 构建项目时，未安装 @vitejs/plugin-vue 插件导致的。@vitejs/plugin-vue 插件提供了处理 .vue 文件的能力。
在项目根目录下的 vite.config.js 文件中添加以下配置：
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [ vue() ] })
2.7、再次执行 yarn storybook，上一个错误已解决，新报错如下图
报错原因
这个错误是由于在使用 @vitejs/plugin-vue 插件构建项目时，需要安装 Vue.js 3.2.25 或更高版本，并且 Vue.js 编译器也需要被安装。
本文 nuxt2，使用的是 vue2.x 的版本，我们要使用 vue2 的基础上使用 vite，需要安装插件，进行vite配置。
所以我们希望在nuxt2 / vue2 项目使用vite，下文：
2.8、vue2项目想要使用vite怎么用
Vue 2 项目并不支持 Vite，因为 Vite 是基于 ESM（ES6 模块）构建的工具，而 Vue 2 是基于 CommonJS 构建的。我们可以通过使用 vite-plugin-vue2 插件来实现在 Vue 2 项目中使用 Vite。下面是使用 vite-plugin-vue2 插件的步骤：
2.8.1、首先安装 Vite 和 vite-plugin-vue2
yarn add vite vite-plugin-vue2 --save-dev
2.8.2、在项目根目录创建 vite.config.js 文件，添加以下内容：
const { createVuePlugin } = require('vite-plugin-vue2') module.exports = { plugins: [ createVuePlugin() ] }
这会告诉 Vite 在构建时加载 Vue 2 插件。
注意，由于 Vue 2 不支持 ESM，因此构建过程不会像 Vue 3 项目那样高效。因此，在使用 Vue 2 项目时，使用 Vite 可能会导致构建时间变长。
2.9、再次启动 yarn storybook
启动成功，操作页面组件均没有问题
2.10、 在story.js文件使用element
当组件内部使用了element时候，我们需要给组件提供所谓“element环境” / 引入并使用 element
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import Vue from "vue"; Vue.use(ElementUI)
经测试，成功
2.11、story引入的组件使用了别名 / alias
需要在story的vite配置文件 vite.config.js文件内配置别名，在nuxt.config.js中配置无效，因为本质上是两个项目
经测试，成功
三、部署
上文虽然修改过unfetch的package.json的exports的指定入口，但是，修改与否，都能正常的执行 yarn build-storybook ，所以，在服务器上拉取代码、打包、部署应该都是流畅的。
yarn build-storybook
打包后生成 storybook-static 静态资源
使用 http-server 启动服务，正常
服务端使用 nginx 启动同理
四、详细使用
待补充
五、storybook 优缺点
5.1、优点
5.1.1、更高效的开发，Storybook 可以帮助开发人员更快地开发和测试 UI 组件，不需要等待整个应用程序部署，而只需要在 Storybook 中测试和调试组件。
5.1.2、更好的可维护性，Storybook 提供了一个容易理解和管理的 UI 组件库，使得组件的可维护性更高。
5.1.3、更好的文档化，Storybook 可以生成可视化的文档，帮助开发人员快速了解组件的用法和 API。
5.1.4、更好的协作，Storybook 可以作为一个团队中开发人员之间共享和讨论组件的平台。这使得团队成员可以更容易地理解和使用组件，同时也可以更好地协作和交流。
5.1.5、更好的可扩展性，Storybook 可以与其他工具和框架集成，比如 React、Vue、Angular 和 Ember 等。这使得开发人员可以使用他们熟悉的工具和框架，并且可以相对轻松地将 Storybook 集成到自己的工作流程中。
5.2、缺点
5.2.1、Storybook是一个本地开发工具，因此它不能用于构建和部署生产应用程序，打包后的静态资源可用来部署。
5.2.2、Storybook不能模拟所有的浏览器和设备的环境，因此在某些情况下，它可能无法准确模拟应用程序中的环境。
5.2.3、Storybook不是一个完整的测试框架，它只能测试组件的外观和行为，无法执行完整的端到端测试。
5.2.4、Storybook需要开发人员手动配置，以确保所有组件都被正确显示和测试。
5.2.5、Storybook可能会产生额外的开销和复杂性，特别是对于小型项目来说。
5.2.6、无法处理复杂路由，由于 Storybook 是一个独立的开发环境，它并不包含完整的路由功能。如果您需要在组件故事中处理复杂的路由，可能会遇到一些限制。
5.2.7、仅支持部分前端框架，Storybook 支持多种前端框架，如 React、Vue、Angular 等，但并不是所有的前端框架都得到了完全的支持。有些框架可能需要额外的配置或插件才能正常工作。
5.2.8、无法直接与应用程序集成，Storybook 旨在提供一个隔离的开发环境，因此它无法直接与应用程序的其他部分进行集成。如果您需要与应用程序的其他部分进行交互，可能需要额外的配置或开发工作。
5.2.9、可能需要手动配置，虽然 Storybook 提供了一些自动化的配置选项，但在某些情况下可能需要手动配置才能满足您的需求。如果您需要更高级的功能或定制化配置，可能需要花费更多时间和精力。
虽然Storybook有一些限制，但它仍然是开发组件的非常有用的工具。
开发人员可以根据自己的需求评估它是否适合自己的项目。
六、过程记录
记录一、理解Storybook
Storybook是一种用于开发和测试组件的工具，可以让开发人员将组件独立开发和测试，然后再集成到应用程序中。
七、欢迎交流指正
参考链接
关于将 Storybook 与 Nuxt.js 结合使用的(几乎)综合指南_vue.js_weixin_0010034-Vue
