nuxt2-storybook-vite：环境搭建、基础使用 / nuxt项目组件库
一、创建 nuxt2 项目
安装 - NuxtJS | Nuxt.js 中文网
yarn create nuxt-app <项目名>
二、安装 storybook
2.1、初始化 Storybook
pnpm add -g @storybook/clinpx -p @storybook/cli sb init命令解释
| 序号 | 命令 | 命令解释 |
| 1 | npx -p @storybook/cli sb init | 是一个命令行指令，它可以帮助你在你的项目中初始化 |
| 2 | npx | 是一种在不安装包的情况下运行命令的方式，它会临时下载和运行包。比如在这里，我们使用 `npx` 来运行 `@storybook/cli`，而不需要先全局安装它。 |
| 3 | -p | `npx` 的一个选项，它用来指定需要安装和运行的包。 |
| 4 | @storybook/cli | `@storybook/cli` 是 Storybook 的一个命令行工具包，它包含了一些用来生成和管理 Storybook 项目的指令。 |
| 5 | sb init | `sb init` 是 `@storybook/cli` 提供的一个命令，它可以初始化一个新的 Storybook 项目。执行这个命令会在当前工作目录下创建一个新的 Storybook 项目，并且自动为你添加必要的配置和文件。 |
| 当你在你的项目中运行 `npx -p @storybook/cli sb init` 时，它会帮助你快速初始化一个新的 Storybook 项目，方便你在其中开发和测试你的组件。 | ||
2.2、本文选择 vite
2.3、Failed to load preset: "@storybook\\vue-vite\\preset"
解决报错
yarn add vite因为已经此时已经安装了storybook，我们现在 执行 yarn storybook 启动
yarn storybook2.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": "./index.mjs",
"default": "./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
启动成功，操作页面组件均没有问题
三、部署
上文虽然修改过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是一种用于开发和测试组件的工具，可以让开发人员将组件独立开发和测试，然后再集成到应用程序中。
七、欢迎交流指正
参考链接
将 Nuxt 模块放入 Storybook答案 - 爱码网
关于将 Storybook 与 Nuxt.js 结合使用的(几乎)综合指南_vue.js_weixin_0010034-Vue
安装 - NuxtJS | Nuxt.js 中文网