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

港控/mmm° 2024-03-24 20:43 17阅读 0赞

#### 一、创建 nuxt2 项目 ####

[安装 - NuxtJS | Nuxt.js 中文网][- NuxtJS _ Nuxt.js]

yarn create nuxt-app <项目名>

![7f6402dc202446218880d4a7c9ded456.png][]

#### 二、安装 storybook ####

#### 2.1、初始化 Storybook ####

pnpm add -g @storybook/cli

npx -p @storybook/cli sb init

**命令解释**

<table style="width:680px;"> 
 <tbody> 
  <tr> 
   <td>序号</td> 
   <td>命令</td> 
   <td>命令解释</td> 
  </tr> 
  <tr> 
   <td>1</td> 
   <td>npx -p @storybook/cli sb init</td> 
   <td>是一个命令行指令，它可以帮助你在你的项目中初始化</td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td>npx</td> 
   <td>是一种在不安装包的情况下运行命令的方式，它会临时下载和运行包。比如在这里，我们使用 `npx` 来运行 `@storybook/cli`，而不需要先全局安装它。</td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td>-p</td> 
   <td>`npx` 的一个选项，它用来指定需要安装和运行的包。</td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td>@storybook/cli</td> 
   <td>`@storybook/cli` 是 Storybook 的一个命令行工具包，它包含了一些用来生成和管理 Storybook 项目的指令。</td> 
  </tr> 
  <tr> 
   <td>5</td> 
   <td>sb init</td> 
   <td>`sb init` 是 `@storybook/cli` 提供的一个命令，它可以初始化一个新的 Storybook 项目。执行这个命令会在当前工作目录下创建一个新的 Storybook 项目，并且自动为你添加必要的配置和文件。</td> 
  </tr> 
  <tr> 
   <td colspan="3">当你在你的项目中运行 `npx -p @storybook/cli sb init` 时，它会帮助你快速初始化一个新的 Storybook 项目，方便你在其中开发和测试你的组件。</td> 
  </tr> 
 </tbody> 
</table>

#### 2.2、本文选择 vite ####

![82c47fc7118140fca9a27b62653f33bd.png][]

#### 2.3、Failed to load preset: "@storybook\\\\vue-vite\\\\preset" ####

![b288f662dd714312bed2d08ba86ef9b8.png][]

解决报错

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. ####

![0ada98c1a4e1424f826ea3d5a3fd6cd6.png][]

这个错误通常是由于“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"
        },
    }

![da06ab6922b4472eb23a6b65f588f356.png][]

问题解决了

#### 2.5、再次启动storybook，启动成功 ####

![af73477735b8407dbf345bdd49aa93e4.png][]

#### 2.6、当点击页面内容时候，报错如下图 ####

![9caa16bbbe824bc8b97788ffb53c21da.png][]

![a0ff213ea06b400b8833493ce9f639ec.png][]

**报错原因**

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，上一个错误已解决，新报错如下图 ####

![5bc14691da394886a50ea733120ebf0d.png][]

报错原因

这个错误是由于在使用 @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 ####

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

![b7a8143450314eaca0f1f3ef1f48f2a0.png][]

![73eaf891a9b44c96811bea04a443163b.png][]

![eca5587fb490466a80d6080586d3374c.png][]

#### 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)

![4a8b172baed54dbe877c887649b1b5a9.png][]

经测试，成功

#### 2.11、story引入的组件使用了别名 / alias ####

需要在story的vite配置文件 vite.config.js文件内配置别名，在nuxt.config.js中配置无效，因为本质上是两个项目

![15f0f5bc121a42eaa2b28d2cd1be4a0a.png][]

经测试，成功

#### 三、部署 ####

上文虽然修改过unfetch的package.json的exports的指定入口，但是，修改与否，都能正常的执行 yarn build-storybook ，所以，在服务器上拉取代码、打包、部署应该都是流畅的。

yarn build-storybook

![d5ab014351f1419b897ddc3735ad40fa.png][]

打包后生成 storybook-static 静态资源

使用 http-server 启动服务，正常

服务端使用 nginx 启动同理

![d515be393d9a41478a52af1757825e56.png][]

#### 四、详细使用 ####

待补充

#### 五、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答案 - 爱码网][Nuxt _ Storybook_ -]

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

[安装 - NuxtJS | Nuxt.js 中文网][- NuxtJS _ Nuxt.js]

[- NuxtJS _ Nuxt.js]: https://www.nuxtjs.cn/guide/installation
[7f6402dc202446218880d4a7c9ded456.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/42f0ff6edef64dde90cf51a88746fd14.png
[82c47fc7118140fca9a27b62653f33bd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/a8d4bb53877a4c52b4125ee22220ddf5.png
[b288f662dd714312bed2d08ba86ef9b8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/5fd877dbec1c42b0a716e12b20fc05cf.png
[0ada98c1a4e1424f826ea3d5a3fd6cd6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/036a8d0c9d464eeaadb36fba02b3b47a.png
[da06ab6922b4472eb23a6b65f588f356.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/1d048882a5e34692993186eb7f592284.png
[af73477735b8407dbf345bdd49aa93e4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/91b853bc67f44d909416b74ac8223c6e.png
[9caa16bbbe824bc8b97788ffb53c21da.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/81aa93393f9545ee8079f89fc0618f68.png
[a0ff213ea06b400b8833493ce9f639ec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/26f97c0772c3457c96093de8ba675163.png
[5bc14691da394886a50ea733120ebf0d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/1e82673164c74c5384119b55321a0b83.png
[b7a8143450314eaca0f1f3ef1f48f2a0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/fcfd7c2722f34e33b07ec2e5f0e6283b.png
[73eaf891a9b44c96811bea04a443163b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/411e5d82c5ca41c5a572258ab2a1df6c.png
[eca5587fb490466a80d6080586d3374c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/bc29d0c56d0147eeaf797ea787c14468.png
[4a8b172baed54dbe877c887649b1b5a9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/390b48c839f34fa19295fbb86cd0df5d.png
[15f0f5bc121a42eaa2b28d2cd1be4a0a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/1dad3c415a864dda9970c952e763e2c9.png
[d5ab014351f1419b897ddc3735ad40fa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/2f97171ee2674d06a2d78b547ff0cd23.png
[d515be393d9a41478a52af1757825e56.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/a3d8c420625b455eb0ca27ff532c93fc.png
[Nuxt _ Storybook_ -]: https://www.likecs.com/ask-183495.html
[Storybook _ Nuxt.js _vue.js_weixin_0010034-Vue]: https://devpress.csdn.net/vue/62f1c88ec6770329307f58ec.html