PROSAGA码农传奇-CDN-如何在没有NPM或Webpack的情况下将CDN包含到VueJS CLI中？

如何在没有NPM或Webpack的情况下将CDN包含到VueJS CLI中？

作者: Jacob
发布时间: 2024-08-22 02:30:15 (1天前)
转自：

<div class =“post-text”itemprop =“text”>
  <P>
    不幸的是，不，你不能添加一个
     <code>
      <script>
    </code>
     标记到特定组件
    的<strong>
      通过模板
    </强>
    。
  </p>
  <P>
    在您的情况下，您有一些选择：
  </p>
  <H1>
    1：使用NPM
  </H1>
  <P>
    使用有属性地安装依赖项
     <code>
      npm
    </code>
  </p>
  <UL>
    <LI>
      的<strong>
        <EM>
          优点：
        </EM>
      </强>
       正确使用NPM和Webpack;范围定义;
    </LI>
    <LI>
      的<strong>
        <EM>
          缺点：
        </EM>
      </强>
       该脚本必须作为NPM包提供。
    </LI>
    <LI>
      注意：可用时这是
      的<strong>
        <EM>
          推荐的
        </EM>
      </强>
       做法。
    </LI>
    <LI>
      <P>
        脚步：
      </p>
      <UL>
        <LI>
          <P>
            对于你的情况，
            <a href="https://datatables.net/download/" rel="noreferrer">
              你可以登记入住
               <code>
                datatables
              </code>
               官方页面，他们有一个NPM包
            </A>
            。我可以像：
          </p>
           <pre>
            <code>
              npm install --save datatables.net-dt

</code>
          </pre>
        </LI>
        <LI>
          <P>
            在你的
            的<strong>
              .vue
            </强>
             文件：
          </p>
           <pre>
            <code>
              <script>
  require( 'datatables.net-dt' )();
  export default {
    name: 'Index',
    data() {
      return { 
      }
    }
  }
</script>

</code>
          </pre>
        </LI>
      </UL>
    </LI>
  </UL>
  <HR />
  <H1>
    2：加
     <code>
      <script>
    </code>
     标记为
     <code>
      index.html
    </code>
  </H1>
  <P>
    找到和dd
     <code>
      <script>
    </code>
     标记到你的
     <code>
      index.html
    </code>
  </p>
  <UL>
    <LI>
      的<strong>
        <EM>
          优点：
        </EM>
      </强>
       该
       <code>
        <script>
      </code>
       标记清楚地（并以声明方式）添加到HTML源代码中。该脚本只会加载一次。
    </LI>
    <LI>
      的<strong>
        <EM>
          缺点：
        </EM>
      </强>
       该脚本将全局加载。
    </LI>
    <LI>
      脚步：

<UL>
        <LI>
          只需添加
           <code>
            <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.js"></script>
          </code>
           到了最后
           <code>
            index.html
          </code>
           文件，最好是在之前
           <code>
            </body>
          </code>
          。
        </LI>
      </UL>
    </LI>
  </UL>
  <HR />
  <H1>
    3：创建
     <code>
      <script>
    </code>
     以编程方式标记
  </H1>
  <P>
    另一种选择是创建
     <code>
      script
    </code>
     当组件被嵌入时，以编程方式在组件处标记。
  </p>
  <UL>
    <LI>
      的<strong>
        <EM>
          优点：
        </EM>
      </强>
       代码仅保留在组件中。只有在加载组件时才会加载外部脚本。
    </LI>
    <LI>
      的<strong>
        <EM>
          缺点：
        </EM>
      </强>
       加载后，脚本仍将全局可用。
    </LI>
    <LI>
      <P>
        步骤/代码：
      </p>
       <pre>
        <code>
          <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>

</code>
      </pre>
    </LI>
  </UL>
</DIV>