nuxt2-storybook-vite：环境搭建、基础使用 / nuxt项目组件库

一、创建 nuxt2 项目

yarn create nuxt-app <项目名>

二、安装 storybook

2.1、初始化 Storybook

pnpm add -g @storybook/cli

npx -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 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": "./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

启动成功，操作页面组件均没有问题

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是一种用于开发和测试组件的工具，可以让开发人员将组件独立开发和测试，然后再集成到应用程序中。

七、欢迎交流指正

参考链接

将 Nuxt 模块放入 Storybook答案 - 爱码网

关于将 Storybook 与 Nuxt.js 结合使用的(几乎)综合指南_vue.js_weixin_0010034-Vue

安装 - NuxtJS | Nuxt.js 中文网