1. Create a nuxt2 project
Installation - NuxtJS | Nuxt.js Chinese Site
yarn create nuxt-app <项目名>
2. Install storybook
2.1. Initialize Storybook
pnpm add -g @storybook/clinpx -p @storybook/cli sb initcommand explanation
| serial number | Order | command explanation |
| 1 | npx -p @storybook/cli sb init | is a command line directive that helps you initialize the |
| 2 | npx | is a way to run a command without installing the package, it will temporarily download and run the package. For example here, we use `npx` to run `@storybook/cli` without installing it globally first. |
| 3 | -p | An option to `npx` that specifies which packages to install and run. |
| 4 | @storybook/cli | `@storybook/cli` is a command-line toolkit for Storybook that contains commands for generating and managing Storybook projects. |
| 5 | sb init | `sb init` is a command provided by `@storybook/cli` that initializes a new Storybook project. Executing this command will create a new Storybook project in the current working directory and automatically add the necessary configuration and files for you. |
| When you run `npx -p @storybook/cli sb init` in your project, it will help you quickly initialize a new Storybook project in which you can develop and test your components. | ||
2.2. This article chooses vite
2.3、Failed to load preset: "@storybook\\vue-vite\\preset"
Solve the error
yarn add viteBecause storybook has been installed at this time, we now execute yarn storybook startup
yarn storybook2.4、Error: Failed to resolve entry for package "unfetch". The package may have incorrect main/module/exports specified in its package.json.
This error is usually caused by the "unfetch" module not properly specifying main or module in its package.json file.
We try the following steps:
1. Make sure your project has installed the "unfetch" module and the version is correct.
2. Check the package.json file of the "unfetch" module and specify its main or module attribute.
3. Check the exports content in package.json:
"exports": {
".": {
"import": "./index.mjs",
"default": "./index.js"
},
}changed to
"exports": {
".": {
"import": "./src/index.mjs",
"default": "./src/index.js"
},
}
The problem is solved
2.5. Start storybook again and start successfully
2.6. When clicking on the content of the page, an error is reported as shown in the figure below
Error reason
yarn add @vitejs/plugin-vueThis error is caused by not installing the @vitejs/plugin-vue plugin when using Vite to build the project. The @vitejs/plugin-vue plugin provides the ability to process .vue files.
Add the following configuration to the file in the root directory of the project vite.config.js:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue()
]
})
2.7. Execute yarn storybook again, the previous error has been resolved, and the new error is as shown in the figure below
Error reason
This error is due to the need to install Vue.js 3.2.25 or later when building a project using the @vitejs/plugin-vue plugin, and the Vue.js compiler also needs to be installed.
In this article, nuxt2 uses the version of vue2.x. We want to use vite on the basis of vue2, and we need to install a plug-in and configure vite.
So we hope to use vite in the nuxt2 / vue2 project, as follows:
2.8 How to use vite for vue2 project
The Vue 2 project does not support Vite, because Vite is a tool built on ESM (ES6 modules), and Vue 2 is built on CommonJS. vite-plugin-vue2We can use Vite in Vue 2 project by using plugin. Here are vite-plugin-vue2the steps to use the plugin:
2.8.1. First install Vite andvite-plugin-vue2
yarn add vite vite-plugin-vue2 --save-dev
2.8.2. Create vite.config.jsa file in the project root directory and add the following content:
const { createVuePlugin } = require('vite-plugin-vue2')
module.exports = {
plugins: [
createVuePlugin()
]
}
This will tell Vite to load the Vue 2 plugin at build time.
Note that since Vue 2 does not support ESM, the build process will not be as efficient as for Vue 3 projects. Therefore, using Vite may result in longer build times when working with Vue 2 projects.
2.9, start yarn storybook again
The startup is successful, and there is no problem in operating page components
2.10. Use element in story.js file
When the element is used inside the component, we need to provide the component with the so-called "element environment" / introduce and use the element
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import Vue from "vue";
Vue.use(ElementUI)
tested successfully
2.11. The components introduced by story use an alias/alias
The alias needs to be configured in the vite configuration file vite.config.js of the story, and the configuration in nuxt.config.js is invalid because it is essentially two projects
tested successfully
3. Deployment
Although the specified entry of the exports of unfetch's package.json has been modified above, yarn build-storybook can be executed normally regardless of whether the modification is made. Therefore, code fetching, packaging, and deployment on the server should all be smooth.
yarn build-storybook
Generate storybook-static static resources after packaging
Use http-server to start the service, normal
The server uses nginx to start the same
Four, detailed use
To be added
Five, storybook advantages and disadvantages
5.1. Advantages
5.1.1. More efficient development, Storybook can help developers develop and test UI components faster, without waiting for the entire application to be deployed, but only need to test and debug components in Storybook.
5.1.2. Better maintainability. Storybook provides an easy-to-understand and manage UI component library, which makes components more maintainable.
5.1.3. Better documentation. Storybook can generate visual documentation to help developers quickly understand component usage and API.
5.1.4, Better collaboration, Storybook can be used as a platform for sharing and discussing components among developers in a team. This makes it easier for team members to understand and use components while also collaborating and communicating better.
5.1.5. Better scalability, Storybook can be integrated with other tools and frameworks, such as React, Vue, Angular, and Ember. This allows developers to use tools and frameworks they are familiar with, and integrate Storybook into their own workflows with relative ease.
5.2. Disadvantages
5.2.1. Storybook is a local development tool, so it cannot be used to build and deploy production applications, and the packaged static resources can be used for deployment.
5.2.2. Storybook cannot simulate the environment of all browsers and devices, so in some cases, it may not be able to accurately simulate the environment in the application.
5.2.3. Storybook is not a complete testing framework. It can only test the appearance and behavior of components, and cannot perform complete end-to-end testing.
5.2.4. Storybook requires manual configuration by developers to ensure that all components are displayed and tested correctly.
5.2.5, Storybook may generate additional overhead and complexity, especially for small projects.
5.2.6. Can't handle complex routing, because Storybook is an independent development environment, it does not contain complete routing functions. If you need to handle complex routing in component stories, you might run into some limitations.
5.2.7. Only some front-end frameworks are supported. Storybook supports a variety of front-end frameworks, such as React, Vue, Angular, etc., but not all front-end frameworks are fully supported. Some frameworks may require additional configuration or plugins to work properly.
5.2.8. No direct integration with the application, Storybook is designed to provide an isolated development environment, so it cannot be directly integrated with other parts of the application. Additional configuration or development work may be required if you need to interact with other parts of the application.
5.2.9. Manual configuration may be required. Although Storybook provides some automatic configuration options, manual configuration may be required in some cases to meet your needs. If you need more advanced features or custom configurations, it may take more time and effort.
Although Storybook has some limitations, it is still a very useful tool for developing components.
Developers can evaluate whether it is suitable for their projects according to their needs.
6. Process records
Record 1. Understanding Storybook
Storybook is a tool for developing and testing components that allows developers to develop and test components independently before integrating them into applications.
7. Welcome to exchange and correct
reference link
Putting Nuxt modules into Storybook Answers - Code World
A (Almost) Comprehensive Guide to Using Storybook with Nuxt.js_vue.js_weixin_0010034-Vue