¿Cómo incluir una CDN en la CLI de VueJS sin NPM o Webpack?

Solución:

Desafortunadamente, no, no puede agregar un <script> etiqueta a un componente específico a través de plantilla.

En tu caso tienes algunas opciones:

1: usar NPM

Instale correctamente la dependencia usando npm

• Pros: uso adecuado de NPM y Webpack; definición de alcance;
• Contras: el script debe estar disponible como paquete NPM.
• Nota: cuando esté disponible, este es el recomendado Acercarse.

• Pasos:

  • Para su caso, puede registrarse datatables página oficial tienen un paquete NPM. Podría ser utilizado como:

    npm install --save datatables.net-dt
    

  • Y en tu .vue expediente:

    <script>
      require( 'datatables.net-dt' )();
      export default {
        name: 'Index',
        data() {
          return { 
          }
        }
      }
    </script>
    

---

2: Agregar <script> etiquetar a index.html

Localice y agregue <script> etiqueta a tu index.html

• Pros: los <script> La etiqueta se agrega de forma clara (y declarativa) a la fuente HTML. El script solo se cargará una vez.
• Contras: el script se cargará globalmente.
• Pasos:
  • Solo agrega el <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.js"></script> hasta el final de la index.html archivo, preferiblemente justo antes </body>.

---

3: Crea el <script> etiquetar programáticamente

La otra alternativa es crear el script etiqueta programáticamente en el componente, cuando el componente se carga.

• Pros: el código permanece solo en el componente. Su secuencia de comandos externa se cargará solo cuando se cargue el componente.
• Contras: el script seguirá estando disponible globalmente una vez que se cargue.

• Pasos / Código:

  <script>
    export default {
      name: 'Index',
      data() {
        return { 
        }
      },
      mounted() {
        if (document.getElementById('my-datatable')) return; // was already loaded
        var scriptTag = document.createElement("script");
        scriptTag.src = "https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.js";
        scriptTag.id = "my-datatable";
        document.getElementsByTagName('head')[0].appendChild(scriptTag);
      }
    }
  </script>
  

No sé si esto sigue siendo una preocupación, pero también podrías echarle un vistazo a vue-meta. Lo estoy usando para crear una mejor implementación de SEO, pero con él, puede incluir archivos CSS y / o JS para componentes específicos. Incluso puede configurar los archivos individuales para que se carguen previamente si lo desea. Aquí hay una reseña bastante buena. https://alligator.io/vuejs/vue-seo-tips/

Allí dice que vue-meta no es estable, pero el artículo fue escrito en febrero de 2018, y la versión actual es 2.2.1.

1. agregue esta línea a su archivo package.json dentro del objeto de dependencias: "vue-meta": "^2.2.1",

nota: omita la coma final si va a ser la última línea del objeto de dependencias

2. abra una terminal y cd al directorio que contiene el archivo package.json mencionado anteriormente. (Por cierto, todo esto es muy fácil si usa la interfaz de usuario vue).
3. en la terminal ejecutar: npm install

Luego agregue lo siguiente a su archivo main.js.

import Meta from "vue-meta";
Vue.use(Meta);

Ahora puede cargar activos CSS / JS estáticos libremente. Esto funciona para local o desde cdn. A continuación se muestra mi ejemplo. Ignore mis importaciones, componentes y métodos … no están relacionados con vue-meta y pueden diferir de los suyos. Solo quería mostrarte una versión funcional.

<script>
import { page } from "vue-analytics";
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
export default {
  components: {
    Header,
    Footer
  },
  data: function() {
    return {};
  },
  methods: {
    track() {
      page("https://foroayuda.es/");
    }
  },
  metaInfo: {
    link: [
      {
        rel: "preload",
        as: "style",
        href: "https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-vue.min.css"
      },
      {
        rel: "preload",
        as: "style",
        href: "https://fonts.googleapis.com/css?family=Cinzel|Great+Vibes|Montserra"
      },
      {
        rel: "preload",
        as: "style",
        href: "/content/css/site.css"
      },
      {
        rel: "stylesheet",
        href:
          "https://fonts.googleapis.com/css?family=Cinzel|Great+Vibes|Montserra"
      },
      {
        rel: "stylesheet",
        href: "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css",
        integrity:
          "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T",
        crossorigin: 'anonymous"'
      },
      {
        rel: "stylesheet",
        href: "https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-vue.min.css",
        async: true,
        defer: true
      },
      {
        rel: "stylesheet",
        href: "https://use.fontawesome.com/releases/v5.8.1/css/all.css",
        integrity:
          "sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf",
        crossorigin: 'anonymous"',
        async: true,
        defer: true
      },
      {
        rel: "stylesheet",
        href: "/content/css/site.css",
        async: true,`enter code here`
        defer: true
      },
      { rel: 'favicon', href: 'favicon.ico' }
    ],
    script: [{ src: "https://unpkg.com/axios/dist/axios.min.js", async: true, defer: true }],
  }
};
</script>

---

---

Utiliza Nuestro Buscador