1. Crea un proyecto nuxt2
Instalación - NuxtJS | Sitio web chino Nuxt.js
yarn create nuxt-app <项目名>
2. Instalar el libro de cuentos
2.1 Inicializar el libro de cuentos
pnpm add -g @storybook/clinpx -p @storybook/cli sb initexplicación del comando
| número de serie | Orden | explicación del comando |
| 1 | npx -p @storybook/cli sb inicio | es una directiva de línea de comando que le ayuda a inicializar el |
| 2 | npx | es una forma de ejecutar un comando sin instalar el paquete, descargará y ejecutará temporalmente el paquete. Por ejemplo, aquí usamos `npx` para ejecutar `@storybook/cli` sin instalarlo globalmente primero. |
| 3 | -pag | Una opción para `npx` que especifica qué paquetes instalar y ejecutar. |
| 4 | @storybook/cli | `@storybook/cli` es un conjunto de herramientas de línea de comandos para Storybook que contiene comandos para generar y administrar proyectos de Storybook. |
| 5 | algn inicio | `sb init` es un comando proporcionado por `@storybook/cli` que inicializa un nuevo proyecto de Storybook. La ejecución de este comando creará un nuevo proyecto de Storybook en el directorio de trabajo actual y agregará automáticamente la configuración y los archivos necesarios. |
| Cuando ejecuta `npx -p @storybook/cli sb init` en su proyecto, le ayudará a inicializar rápidamente un nuevo proyecto de Storybook en el que podrá desarrollar y probar sus componentes. | ||
2.2 Este artículo elige vite
2.3、Error al cargar el ajuste preestablecido: "@storybook\\vue-vite\\preset"
Resuelve el error
yarn add viteDebido a que el libro de cuentos se instaló en este momento, ahora ejecutamos el inicio del libro de cuentos de hilo.
yarn storybook2.4、Error: No se pudo resolver la entrada del paquete "descargar". Es posible que el paquete tenga exportaciones/módulos/principales incorrectos especificados en su paquete.json.
Este error generalmente se debe a que el módulo "descargar" no especifica correctamente main o module en su archivo package.json.
Probamos los siguientes pasos:
1. Asegúrese de que su proyecto haya instalado el módulo "unfetch" y que la versión sea correcta.
2. Verifique el archivo package.json del módulo "unfetch" y especifique su atributo principal o de módulo.
3. Verifique el contenido de las exportaciones en package.json:
"exports": {
".": {
"import": "./index.mjs",
"default": "./index.js"
},
}cambiado a
"exports": {
".": {
"import": "./src/index.mjs",
"default": "./src/index.js"
},
}
El problema esta resuelto
2.5. Inicie el libro de cuentos nuevamente y comience con éxito
2.6 Al hacer clic en el contenido de la página, se informa un error como se muestra en la siguiente figura
Motivo del error
yarn add @vitejs/plugin-vueEste error se debe a que no se instaló el complemento @vitejs/plugin-vue cuando se usa Vite para compilar el proyecto. El complemento @vitejs/plugin-vue proporciona la capacidad de procesar archivos .vue.
Agregue la siguiente configuración al archivo en el directorio raíz del proyecto vite.config.js:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue()
]
})
2.7 Ejecute Yarn Storybook nuevamente, el error anterior se resolvió y el nuevo error se muestra en la siguiente figura
Motivo del error
Este error se debe a la necesidad de instalar Vue.js 3.2.25 o posterior al crear un proyecto utilizando el complemento @vitejs/plugin-vue, y también es necesario instalar el compilador Vue.js.
En este artículo, nuxt2 usa la versión vue2.x. Queremos usar vite sobre la base de vue2 y necesitamos instalar un complemento y configurar vite.
Entonces esperamos usar vite en el proyecto nuxt2/vue2, de la siguiente manera:
2.8 Cómo usar vite para el proyecto vue2
El proyecto Vue 2 no es compatible con Vite, porque Vite es una herramienta basada en ESM (módulos ES6) y Vue 2 está basada en CommonJS. vite-plugin-vue2Podemos usar Vite en el proyecto Vue 2 usando un complemento. Estos son vite-plugin-vue2los pasos para usar el complemento:
2.8.1 Primero instale Vite yvite-plugin-vue2
yarn add vite vite-plugin-vue2 --save-dev
2.8.2 Cree vite.config.jsun archivo en el directorio raíz del proyecto y agregue el siguiente contenido:
const { createVuePlugin } = require('vite-plugin-vue2')
module.exports = {
plugins: [
createVuePlugin()
]
}
Esto le indicará a Vite que cargue el complemento Vue 2 en el momento de la compilación.
Tenga en cuenta que, dado que Vue 2 no es compatible con ESM, el proceso de compilación no será tan eficiente como para los proyectos de Vue 3. Por lo tanto, usar Vite puede resultar en tiempos de compilación más largos cuando se trabaja con proyectos de Vue 2.
2.9, empezar de nuevo el libro de cuentos
El inicio es exitoso y no hay problemas para operar los componentes de la página.
2.10 Usar elemento en el archivo story.js
Cuando el elemento se usa dentro del componente, debemos proporcionar al componente el llamado "entorno del elemento" / introducir y usar el elemento.
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import Vue from "vue";
Vue.use(ElementUI)
probado con éxito
2.11 Los componentes introducidos por la historia utilizan un alias/alias
El alias debe configurarse en el archivo de configuración de vite vite.config.js de la historia, y la configuración en nuxt.config.js no es válida porque son esencialmente dos proyectos.
probado con éxito
3. Implementación
Aunque la entrada especificada de las exportaciones de package.json de unfetch se ha modificado anteriormente, independientemente de si se realiza la modificación, Yarn build-storybook se puede ejecutar normalmente, por lo que la recuperación, el empaquetado y la implementación del código en el servidor deberían ser fluidos.
yarn build-storybook
Genere recursos estáticos estáticos de libros de cuentos después del empaquetado
Utilice el servidor http para iniciar el servicio, normal
El servidor usa nginx para iniciar lo mismo.
Cuatro, uso detallado
Para ser agregado
Cinco, ventajas y desventajas del libro de cuentos.
5.1 Ventajas
5.1.1. Desarrollo más eficiente, Storybook puede ayudar a los desarrolladores a desarrollar y probar componentes de la interfaz de usuario más rápido, sin esperar a que se implemente toda la aplicación, sino que solo necesitan probar y depurar los componentes en Storybook.
5.1.2 Mejor mantenibilidad Storybook proporciona una biblioteca de componentes de interfaz de usuario fácil de entender y administrar, lo que hace que los componentes sean más fáciles de mantener.
5.1.3 Mejor documentación Storybook puede generar documentación visual para ayudar a los desarrolladores a comprender rápidamente el uso de los componentes y la API.
5.1.4, Mejor colaboración, Storybook se puede utilizar como plataforma para compartir y discutir componentes entre los desarrolladores de un equipo. Esto facilita que los miembros del equipo comprendan y utilicen los componentes y al mismo tiempo colaboren y se comuniquen mejor.
5.1.5 Mejor escalabilidad, Storybook se puede integrar con otras herramientas y marcos, como React, Vue, Angular y Ember. Esto permite a los desarrolladores utilizar herramientas y marcos con los que están familiarizados e integrar Storybook en sus propios flujos de trabajo con relativa facilidad.
5.2 Desventajas
5.2.1 Storybook es una herramienta de desarrollo local, por lo que no se puede utilizar para crear e implementar aplicaciones de producción, y los recursos estáticos empaquetados se pueden usar para la implementación.
5.2.2 Storybook no puede simular el entorno de todos los navegadores y dispositivos, por lo que, en algunos casos, es posible que no pueda simular con precisión el entorno de la aplicación.
5.2.3 Storybook no es un marco de prueba completo. Solo puede probar la apariencia y el comportamiento de los componentes, y no puede realizar pruebas completas de un extremo a otro.
5.2.4 Storybook requiere una configuración manual por parte de los desarrolladores para garantizar que todos los componentes se muestren y prueben correctamente.
5.2.5, Storybook puede generar gastos generales y complejidad adicionales, especialmente para proyectos pequeños.
5.2.6 No se puede manejar enrutamiento complejo porque Storybook es un entorno de desarrollo independiente y no contiene funciones de enrutamiento completas. Si necesita manejar enrutamiento complejo en historias de componentes, es posible que se encuentre con algunas limitaciones.
5.2.7 Solo se admiten algunos marcos de interfaz de usuario. Storybook admite una variedad de marcos de interfaz de usuario, como React, Vue, Angular, etc., pero no todos los marcos de interfaz de usuario son totalmente compatibles. Algunos marcos pueden requerir configuración o complementos adicionales para funcionar correctamente.
5.2.8 Sin integración directa con la aplicación, Storybook está diseñado para proporcionar un entorno de desarrollo aislado, por lo que no se puede integrar directamente con otras partes de la aplicación. Es posible que se requiera trabajo de configuración o desarrollo adicional si necesita interactuar con otras partes de la aplicación.
5.2.9 Es posible que se requiera configuración manual. Aunque Storybook proporciona algunas opciones de configuración automática, en algunos casos es posible que se requiera configuración manual para satisfacer sus necesidades. Si necesita funciones más avanzadas o configuraciones personalizadas, puede requerir más tiempo y esfuerzo.
Aunque Storybook tiene algunas limitaciones, sigue siendo una herramienta muy útil para desarrollar componentes.
Los desarrolladores pueden evaluar si es adecuado para sus proyectos según sus necesidades.
6. Registros de proceso
Registro 1. Comprensión del libro de cuentos
Storybook es una herramienta para desarrollar y probar componentes que permite a los desarrolladores desarrollar y probar componentes de forma independiente antes de integrarlos en las aplicaciones.
7. Bienvenido a intercambiar y corregir
Link de referencia
Poner módulos de Nuxt en Storybook Answers - Code World
Una guía (casi) completa para usar Storybook con Nuxt.js_vue.js_weixin_0010034-Vue