Cómo introducir CSS y JS (enlace CDN) en una sola página VUE

De: https://blog.csdn.net/kielin/article/details/86649074  invasión borrado

Existen varios métodos, la clave depende del entorno que desee usar
 1. JS / CSS quiere usarse globalmente, puede introducirse en main.js después de la instalación de npm o en index.html.
 2. Si desea usarlo en una sola página, pero no quiere instalarlo a través de npm, puede introducirlo creando un componente, como sigue

 <plantilla> 
  <div id = " baseReport " > 
  <remote-css href = " https: // cdn .bootcss.com / twitter-bootstrap / 4.2.1 / css / bootstrap-grid.min.css " > </ remote-css> 
  <remote-css href = " https://cdn.bootcss.com/twitter-bootstrap /4.2.1/css/bootstrap-reboot.css " > </ remote-css> 
  <remote-css href = " https://cdn.bootcss.com/twitter-bootstrap/4.2.1/css/bootstrap.css "> </remote-css> "
  <remote-js src = https://cdn.bootcss.com/twitter-bootstrap/4.2.1/js/bootstrap.bundle.js " > </remote-js> 
  <remote-js src = " https: // cdn.bootcss.com/twitter-bootstrap/4.2.1/js/bootstrap.js " > </remote-js> 
    <div class = " card-group " > 
        <div class = " card " > 
            这里 是 内容 </ div> 
        <div class = " card " > 
            这里 是 内容 </div> 
        <div class = "
 
        
        card " >
            这里 是 内容
         </div> 
        </div> 
  </div>   
</template> 
<script> 
 
export default { 
    components: { 
       ' remote-css ' : { 
            render (createElement) {             
              return createElement ( ' link ' , {attrs: {rel: ' stylesheet ' , href: this .href}}); 
            }, 
            accesorios: { 
            href: {type: String, required: true }, 
            }, 
        },
        ' remote-js ' : { 
            render (createElement) { 
              return createElement ( ' script ' , {attrs: {type: ' text / javascript ' , src: this .src}});            
            }, 
            accesorios: { 
            src: {type: String, obligatorio: verdadero }, 
            }, 
        }, 
    }, 
  nombre: " baseReport " , 
  data () { 
    return { 
    } 
  }, 
  montado () { 
   
  }, 
  métodos: { 
 
  } 
}; 
</script> 
 
<estilo de ámbito> 
</ style> 
———————————————— 
Aviso de copyright: Este artículo es un artículo original del blogger de CSDN "kielin", siguiendo CC 4.0 BY- Acuerdo de derechos de autor de SA, adjunte el enlace de origen original y esta declaración. 
Enlace original: https: // blog.csdn.net/kielin/java/article/details/86649074

 

Supongo que te gusta

Origin www.cnblogs.com/Byme/p/12674418.html
Recomendado
Clasificación