npm lanza la biblioteca de componentes personalizados vue3
Crear proyecto
vue create test-ui
Componente personalizado
Cree un componente personalizado. El nombre del componente se basa en sus necesidades. Es mejor tener un componente por carpeta. La siguiente imagen es mi ejemplo.
El
componente src/components es el mismo que cuando escribes una página. Los llamados componentes son convenientes y prácticos. No necesitas mover repetidamente la página a diferentes proyectos. Puedes instalarlo directamente en tu proyecto local. La imagen de abajo es un ejemplo.
Después de escribir el componente, puede probar si se puede usar normalmente en App.vue.
Listo para su lanzamiento
Encapsulación de componentes
Cree un nuevo archivo index.js en el directorio de componentes y escriba los componentes que desea publicar en él.
Configuración de embalaje de componentes
Modifique el archivo package.json y configure el comando de empaquetado
–target lib palabra clave para especificar el directorio para el empaquetado
–name el nombre del archivo empaquetado
–dest el nombre de la carpeta empaquetada
Empezar a empacar
Ejecutar comando de empaquetado
npm run package
Una vez completado el empaquetado, habrá una carpeta cjulyUI adicional en el directorio del proyecto, que almacena los archivos empaquetados.
Inicialice el paquete.json del paquete.
Ingrese al directorio del paquete y ejecute el comando de inicialización. Después de la ejecución, se generará un archivo package.json debajo del paquete.
cd .\cjulyUI\
npm init -y
Definir el nombre de la biblioteca de componentes que se publicará.
Modifique el valor del nombre en el archivo package.json recién generado debajo del paquete. Este valor es el nombre de la biblioteca de componentes que se publicará. Recuerde que nadie ha publicado el nombre de la biblioteca de componentes en npm, de lo contrario no se puede publicar.
https://www.npmjs.com/
Registrar cuenta npm
https://www.npmjs.com/signup
Inicie sesión localmente después del registro
# 切换到npm地址
npm config set registry=https://registry.npmjs.org
# 登录，然后输入你的账号，密码，邮箱及验证码
npm login
Publicar y usar
liberar
Ejecute el comando de publicación en el directorio empaquetado
npm publish
usar
Instálelo e introdúzcalo en el proyecto en el que desea utilizar esta biblioteca de componentes.
Instalar biblioteca de componentes
npm install cjuly-ui
Introducido globalmente en main.js
# vue2引入
import cjuly-ui from 'cjuly-ui'
Vue.use(cjuly-ui);
# vue3引入
import cjuly-ui from 'cjuly-ui'
createApp(App).use(cjuly-ui).mount('#app')
Úselo directamente como elemento
Actualizar biblioteca de componentes
En el directorio empaquetado en el proyecto de biblioteca de componentes , ejecute el siguiente comando:
npm version patch
npm publish