1. Cómo importar
En vue-cli, hay varias formas de importar archivos
Una es usar el comando npm o cnpm para descargar el complemento correspondiente, y luego use el método de importación para introducirlo en main.js. Este método no se discutirá aquí
Lo que prefiero es descargar directamente el js correspondiente y luego introducirlo en vue. proyecto
La pregunta es cómo introducirlo
El método es el siguiente:
Descargue el archivo js o css correspondiente. Generalmente, el complemento descargado. -in los relacionados estarán juntos
Ingrese el archivo index.html en el proyecto vue-cli e introduzca el archivo css y el archivo js respectivamente
Aquí están
lt; enlace rel="stylesheet" href=" ./static/layer.css" rel="nofollow externo" /gt
lt;script src="./static/jquery; .js"gt;lt;/scriptgt;
lt;script src="./static/jquery.min.js"gt;lt;/scriptgt;
lt;! --Primero debe introducir la versión jq 1.8 anterior o superior antes de poder introducir la capa - -gt;
lt;script src="./static/layer.js"gt;lt;/scriptgt ;
De esta manera, el complemento de capa emergente de capa se puede usar en el archivo global. Sí, tenga en cuenta que primero debe introducir jq 1.8 o superior antes de poder usar la capa.
2. La capa emergente no se puede mostrar
Como novato en el desarrollo de Java, básicamente intenté resolver los problemas del front-end con Baidu después de dos horas y media. de lucha, Se han resuelto varios problemas:
El primero es un error reportado en la consola frontal. La impresión es que i no es una función y Layer.open no es una función. básicamente se introducen Problema y solución: compruebe si se ha introducido jq 1.8 o superior antes.
El segundo es que la capa emergente solo muestra texto, pero carece de estilo y no tiene la sensación de. capa emergente. Después de mucho Baidu y análisis, finalmente confié en depurar el estilo front-end para obtener las pistas. El problema es que las clases utilizadas en él no existen en el archivo CSS que presenté. Después de verificar, el archivo CSS importado es incorrecto (tenga en cuenta que existe el estilo CSS del teléfono móvil y otro CSS, y aquí se usa otro con el mismo nombre). Al final el problema se soluciona.
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 El complemento, que se utilizó en el proyecto anterior de apicloud, ha sido ampliamente utilizado, pero recientemente estaba profundamente harto del IDE de apicloud, la documentación muy hostil y la eficiencia de desarrollo extremadamente baja, así que decidí abandonarlo y recurrir al desarrollo de Vue. Encontré problemas al introducir Layer.js durante el proceso de desarrollo. La razón es que Layer.js no admite la importación, por lo que es necesario modificar su código fuente. Después de leer su código fuente, descubrí que solo hay dos lugares que deben modificarse.
Se ha expuesto una capa de variable global en el código fuente, por lo que solo necesita agregar exportación al final de el script.
default Layer; 1
Esto significa exportar esta variable global.
Luego busque el siguiente código en el archivo y coméntelo. Este código es para agregar estilos a la capa, pero la ruta utilizada es incorrecta, por lo que no es muy útil.
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 lugares estáticos/js y estáticos/css, como. componente interno o registro global Debido a que se usará en muchos lugares del proyecto, se usa el registro global en main.js
importar capa desde '../static/js/layer.js' <. /p>
Layer.css también utiliza registro global. Puede colocarse en index.html e introducirse a través de un enlace, o puede colocarse 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;
Luego puedes usar Layer.open y otros métodos en cada componente.
Este método debería ser aplicable a varios scripts que no admiten la importación, es decir, módulos no proporcionados por npm.
Resumen
Los anteriores son varios métodos introducidos por el editor en el andamio vue-cli para introducir el complemento de capa emergente. Espero que le resulte útil. tienes alguna pregunta Si tienes alguna pregunta, déjame un mensaje y te responderé a tiempo. ¡También me gustaría agradecerles 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!