Cómo introducir el complemento de capa emergente en el andamio vue-cli.

En vue-cli, hay varias formas de importar archivos

Una es usar el comando npm o cnpm para descargar el complemento correspondiente y luego utilizar main.js El método de importación lo presenta. No discutiré este método aquí

Lo que prefiero hacer es descargar directamente el js correspondiente e introducirlo en el proyecto vue

La pregunta es cómo introducirlo

El método es el siguiente:

Descargue el archivo js o css correspondiente, normalmente los complementos relacionados se descargarán juntos

Inserte el archivo index.html en vue-clip

. En el archivo html del proyecto vue-cli, introduzca el archivo css y el archivo js

Aquí están respectivamente

En main.js, el método de importación. >Respectivamente aquí

lt; link rel="stylesheet" href="./static/layer.css" rel="external nofollow" /gt; ./static/jquery.min.js"gt;lt;/scriptgt;

lt;scriptrc="./static/jquery.min.js"gt;lt;/scriptgt;

lt;script src="./static/layer.js"gt;lt;/scriptgt;

Este es un complemento de capas que puede mostrar capas en archivos globales. Debe tenerse en cuenta que se debe introducir jq 1.8 o superior antes de poder usar capas.

2. La capa emergente no se muestra

Como desarrollador novato de Java, básicamente trato de resolver los problemas del front-end con Baidu después de dos y uno. Media hora de lucha. Se han solucionado varios problemas:

Primero, hay un error en la consola frontal. La impresión es que i no es una función y Layer.open no es una función. Estos problemas se deben básicamente a la introducción de problemas. La solución es: comprobar si es antes de la introducción de 1.8 jq.

La segunda es que la capa emergente solo muestra texto, pero carece de estilo y no. No tengo la sensación de una capa emergente. El problema es que las clases utilizadas en él no existen en el archivo CSS que importé. Después de verificar, el archivo CSS importado es incorrecto (tenga en cuenta que hay un estilo CSS móvil y otro CSS, aquí se usa otro, el nombre es el mismo). Finalmente, el problema se resolvió.

ps: echemos un vistazo al uso del complemento de capa emergente Layer.js en Vue

layer.js (móvil) es una capa emergente pequeña y conveniente plug-in. Se usó ampliamente en proyectos anteriores de apicloud, pero recientemente, estaba profundamente cansado del entorno de desarrollo integrado de apicloud, su documentación muy hostil y sus métodos de desarrollo muy ineficientes, y decidí abandonarlo y usar Vue para el desarrollo. Decidí abandonarlo y desarrollar Vue en su lugar. Me costó mucho introducir Layer.js durante el desarrollo. La razón es que Layer.js no admite la importación, por lo que debemos modificar su código fuente.

Una capa de variable global ya está expuesta en el código fuente, por lo que solo necesita agregar

exportar capa predeterminada;1

Esto significa que la variable global estará en el script Exportar al final.

Luego busque el siguiente código en el archivo y coméntelo. Este código agrega un estilo a la capa, pero está en la ruta incorrecta, por lo que no ayuda mucho.

document.head.appendChild(function() {

var link = doc.createElement('link');

link.href = ruta 'necesita /layer.css?2.0';

link.type = 'text/css';

link.rel = 'styleSheet' link.id = 'layermcss';

enlace de retorno;

}());

A continuación, coloque Layer.js y Layer.css en static/js y static/css respectivamente, y regístrelos donde necesario, como dentro del componente o globalmente Debido a que el proyecto los usa en varios lugares, use el registro global en main.js

importe la capa desde './static/js/layer .js'

layer.css también utiliza registro global, que se puede colocar en index.html mediante la introducción de enlaces, o en App.vue

lt;! --index.html--gt;

lt; enlace rel="stylesheet" href="./static/css/layer.css" /gt;

lt;! --o--gt;

lt;!--App.vue--gt;

lt; stylegt;

@import "./static /css/layer.css";

lt;/stylegt;

El siguiente paso es utilizar métodos como Layer.open en componentes individuales.

Este método debería ser adecuado para varios scripts que no admiten la importación, es decir, módulos no proporcionados por npm.

Resumen

Los anteriores son varios métodos para introducir complementos de capa emergente en el andamio vue-cli presentado por el editor. Espero que le resulte útil. Si tiene alguna pregunta, envíeme un mensaje y me comunicaré con usted lo antes posible. ¡También me gustaría agradecer a todos por su apoyo al sitio web de Script House!

Si cree que este artículo le resulta útil, puede reimprimirlo, indique la fuente, ¡gracias!