Encapsule los componentes públicos de vue y publique la plataforma npm, para que todos puedan descargar y usar

prefacio

Una vez que el paquete de componentes se lanza a la plataforma npm, otros pueden usar su complemento instalado por comando.Un buen componente público debe tener las características de flexibilidad y versatilidad.

Después de que el lanzamiento sea exitoso, puede encontrar el nombre de su componente buscando en el sitio web oficial de cpm , como se muestra en la figura a continuación.

Dirección de descarga del componente: cxy-loading-animation - npm

primer paso

Cree un proyecto vue simple, use vue create xxx para crear un proyecto vue

segundo paso

Cree una carpeta de paquete en la carpeta src y encapsule sus componentes, luego cree index.js en la carpeta del paquete e importe los componentes empaquetados en el archivo index.js, de la siguiente manera

tercer paso

Agregue el siguiente código al archivo package.json

el código

"package": "vue-cli-service build --target lib ./src/package/index.js/ --name cxy-loading-animation --dest cxy-loading-animation"

Nombre de la instrucción: comando -- target lib --name nombre del archivo empaquetado ruta del paquete --dest nombre de la carpeta empaquetada

el cuarto paso

Ejecute el comando npm run package para empaquetar.Después de la ejecución exitosa, se generará un archivo en el directorio, de la siguiente manera

Ingrese a la carpeta recién generada, ingrese el comando cd cxy-loading-animation, ejecute el comando de inicialización npm init -y, se generará un paquete.json y algunas configuraciones se pueden escribir en el paquete.json.

Optimización, conserve solo los archivos que necesitamos y cree un nuevo readme.md para escribir las instrucciones de uso de los componentes.

Cree una nueva carpeta de estilo para almacenar archivos css. Si cree que el nombre de cxy-loading-animation.umd.min.js es demasiado largo, puede cambiarlo a index.js. Al mismo tiempo, cambie la entrada principal: archivo en package.json a index.js Después de la optimización, como se muestra en la figura a continuación.

el quinto paso

Use el comando npm adduser para agregar una cuenta npm, si no registra una cuenta con npm usted mismo

paso seis

Utilice la publicación npm para cargar complementos en la plataforma npm

Después de que la carga sea exitosa, puede verla en la plataforma, de la siguiente manera

Los componentes empaquetados aquí se cargaron en la plataforma npm.

Nota: Si la carga falla, el nombre puede estar duplicado, solo cambie el nombre, o puede ser un problema del espejo. Si ha cambiado el espejo de Taobao antes, cambie al espejo oficial. El comando de cambio es el siguiente:

npm  config set registry=https://registry.npmjs.org

Usar nuestros propios complementos en el proyecto.

Ejecutar el comando de instalación

npm install cxy-loading-animation

Entonces main.js hace referencia al registro global

import cxyLoadingAnimation from 'cxy-loading-animation'
import 'cxy-loading-animation/cxy-loading-animation.css'

Vue.use(cxyLoadingAnimation)

Luego usa la página que necesitas usar

<cxyLoadingAnimation :animation="true" />

Efecto de componente

actualización de nueva versión

Si actualiza el componente, debe modificar el número de versión, el número de versión debe ser mayor que el último, de lo contrario no se puede cargar