Estoy investigando opciones para un nuevo proyecto en el trabajo. Estamos pensando en usar nuxt (o simplemente vue 3 regular) y crear una biblioteca donde guardaremos nuestros componentes compartidos.
Estoy tratando de hacer la configuración inicial, pero tengo problemas. Seguí este tutorial para crear la biblioteca y le agregué mecanografiado. Creé un componente de muestra con un contador y lo exporté.
El problema es que cuando importo el componente de mi biblioteca en un proyecto de consumo (ya sea el proyecto nuxt o un proyecto vanilla vite vue), parece que el componente no es reactivo. Se supone que su contador interno aumenta cuando se hace clic en él, pero no se actualiza. No hay errores ni advertencias en la consola.
Otro problema es que su CSS no se está aplicando. Tiene un estilo básico definido en el componente, pero no es visible. Creé un repositorio de reproducción mínima con instrucciones de configuración aquí: https://github.com/drekembe/vite-reproduction-2342
He intentado buscar problemas similares o depurarlos yo mismo, pero no he llegado a ninguna parte.
Cualquier ayuda es muy apreciada.
En su carpeta de components ejecute:
yarn buildentonces corre :
yarn link en la carpeta my-vite-app ejecuta:
yarn link "components" en maint.ts importa el estilo:
import { createApp } from 'vue' import App from './App.vue' import 'components/dist/style.css' createApp(App).mount('#app')Encontré este problema hoy con mi paquete y, finalmente, encontré que el verdadero culpable es el node_module dentro del paquete que probamos localmente. Si instala el paquete local mediante npm link o lo instala directamente con la ruta de la carpeta como "components": "../components" , su node_module se verá así:
node_modules | --components | --node_modules <-- the culprit here Su paquete se enviará con su propio node_module y dentro de ese módulo tiene un paquete vue que es independiente del paquete vue que está utilizando en su aplicación. Entonces sus componentes no funcionarían como se esperaba.
Para probarlo, simplemente elimine node_modules/components/node_modules y vite cache node_modules/.vite luego vuelva a ejecutar yarn dev . Verá que su componente funciona bien ahora.
components de la carpeta de su paquete, ejecute npm pack para empaquetar su paquete. Creará un tarball para su paquete . La salida es el archivo components-0.0.0.tgz dentro de la carpeta de components . Esta es la parte más importante porque npm pack creará un paquete de su paquete similar al que publicará en el registro de npm.my-vite-app agregue su paquete a package.json : "components": "file:../components/components-0.0.0.tgz"yarn para instalar el paquete y yarn dev para ejecutar la aplicación y ver si sus componentes funcionan.