cdn方式引入外部的js库

最新推荐文章于 2024-04-18 10:02:53 发布
最新推荐文章于 2024-04-18 10:02:53 发布
阅读量4.4k 收藏 1
点赞数
分类专栏： 前端 文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shaoming314/article/details/107976321
版权

cdn方式引入外部的js库

1.引入jQuery

<!-- 引入jQuery使用cdn的方式引入jQuery -->
<script  src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>

2.引入vue.js

//开发版本:
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


//生产版本:
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

3.引入axios.js

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

4.引入bootstrap相关

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link  href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"  rel="stylesheet">
    <script  src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script  src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    
  </head>
  <body>
    <h1>你好，世界！</h1>
   
   
  </body>
</html>
不会打字314
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序--vue.js学习
Real_hx的博客
10-19 1091
这周还是没新项目，所以开始学习我认为挺重要的vue.js，目前为止主要是学习了一点基础 vue介绍 vuei（读音/vju:/，类似于view) Vue是一个渐进式的框架，什么是渐进式的呢? 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。 或者如果你希望将更多的业务逻辑使用Vue实现，那么可以使用Vue的核心库以及其生态系统。 比如Core+Vue-router+Vuex，也可以满足你各种各样的需求。 Vue有很多特点和Web开发中常见的高级功能 解耦视图和数据 可复用的组件
import-cdn-js:从CDN链接导入JavaScript库
05-17
导入CDN-JS 从CDN链接导入JavaScript库 安装 $ npm i -s import-cdn-js 用法 ImportCDNJS（链接：字符串，库名：字符串）：承诺 import ImportCDNJS from 'import-cdn-js' ; ImportCDNJS ( '//cdn.bootcss.com/jquery/3.3.1/jquery.min.js' , '$' ) . then ( $ => $ ( 'body' ) . text ( "Hello world!" ) ) ;
探秘 CDNJS 新网站：前端资源加速的利器
最新发布
gitblog_00044的博客
04-18 321
探秘 CDNJS 新网站：前端资源加速的利器 项目地址:https://gitcode.com/cdnjs/new-website 项目简介 CDNJS 新网站是一个由 GitCode 社区维护的开源项目，旨在提供一个快速、可靠的全球内容分发网络（CDN）服务，用于托管和加速前端库、框架和其他Web资源的访问。通过这个平台，开发者可以方便地获取到许多流行的JavaScript和CSS库，并在他们...
react 打包优化，cdn引入css、js
好巧的博客
09-26 3846
当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。react官方脚手架默认是将 webpack 配置隐藏起来了，在进行配置之前需要将 webpack 配置暴露出来。build.js配置的CDN css js链接，需要在index.html文配置引入。会出现一个命令提示：这是一个单向操作，确认操作后不可逆转/返回?打开 scripts 文件夹下的 build.js 文件。成功之后 在项目根目录会出现一个。
通过cdn引用的js
weixin_30411997的博客
09-13 495
jquery Production version - 用于实际的网站中，已被精简和压缩。 Development version - 用于测试和开发（未压缩，是可读的代码） 引用的两种方式： 1 下载代码文件至本地项目中，引入。 2 通过 CDN（内容分发网络） 引用它 使用CDN引用的一个好处：许多用户在访问其他站点时，已经从百度、又拍云、新浪、谷歌或微软加载...
引用jQuery库
ouhaochuan的专栏
10-25 444
如果您不愿意在自己的计算机上存放 jQuery 库，那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。 使用 Google 的 CDN <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs /jquery/1.4.0/jquery.min.js">
JS项目响应式布局 / Cdn引入
m0_53912016的博客
05-08 390
【代码】JS项目响应式布局 / Cdn引入。
jquery引入外部CDN 加载失败则引入本地jq库
10-18
主要介绍了网站加载第三方CDN，如果jQuery库不成功则加载本地的jquery的实现代码,需要的朋友可以参考下
vue引用外部JS的两种种方法
11-21
第一种 如果库是es6写的 就可以用import 引入 比如我自己写的http 封装接口的方法   就可以这样子导入哦   第二种是jquery的库 可以在静态资源导入（或者是cdn资源加载）   我是vue-cli 3.0 基础之上架构的 把...
Vue项目使用CDN优化首屏加载问题
11-26
解决方法是，将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来，达到加速首开的目的。 外部的库文件，可以使用CDN...
Vue加载json文件的方法简单示例
01-21
一、在build/dev-server.js文件里 var app = express() 这句代码后面添加如下(旧版)： var appData = require('../address.json'); // 引入address.json文件 var apiRoutes = express.Router(); apiRoutes.get('/...
js使用cdn导入js lib
Connie1451的博客
07-01 1066
好处： 本地不用存储太多的js lib文件，减少程序体积，节省空间 使用方式 在之前引用js文件的地方，src属性直接指向cdn的uri 例如 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> ...
百度静态资源库CDN库， cdnjs库，引入JS
weixin_30399871的博客
08-08 2677
不适用本地引入js文件，而使用其他服务器引入JS文件，1，减轻服务器压力2，速度快3，可以缓存 cdnjs库，更新比较快https://cdnjs.com/ cdn库 引入JS文件如：jquerybootcdn : https://www.bootcdn.cn/ 百度静态资源公共库，有时候打不开。 1，直接在搜索框输入：jquery 2，点击选择需要的版本，复制地址即可。 3...
动态引入js文件-支持cdn等线上地址
weixin_45377314的博客
05-13 1358
动态引入cdn js文件，并使用js中的变量常量，亲测有效 function dynamicLoadJs(url, callback) { var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = url; if (typeof (c.
网站优化：引用CDN公共库
weixin_30326515的博客
08-31 211
什么是CDN公共库？ CDN公共库是指将常用的JS库存放在CDN节点，以方便广大开发者直接调用。与将JS库存放在服务器单机上相比，CDN公共库更加稳定、高速。一般的CDN公共库都会包含全球所有最流行的开源JavaScript库。 为什么要引用CDN公共库？ 1.减少等待时间 CDN-Content Delivery Network（内容分发网络），通过各种各样的服务途径把你的一些静态...
vue 项目中引用并使用cdn上面的js文件
且听风吟的博客
01-21 2190
项目中，有一份配置数据需要不停地文件更新，之前放在项目中每次更新就要进行发版本，所以就把它放在cdn上，项目中通过cdn地址获取文件，每次需要更新数据时，直接更新cdn上面的文件即可，这样就算多个项目使用这份配置数据也比较方便。 utils.js中封装公共方法： export function queryJumpConfig (path, success, error) { let oScript = document.createElement('script') oScript.src = pa
如何配置小程序cdn服务器,小程序cdn
weixin_34754795的博客
08-12 1749
小程序cdn 内容精选换一换性能优化的思路如下：如果CPU的利用率不高，说明资源没有充分利用，可以通过工具(如strace)查看应用程序阻塞在哪里，一般为磁盘，网络或应用程序自己的业务逻辑有休眠或信号等待，这些优化措施在其它章节描述。如果CPU利用率高，可以选择更好的硬件，优化硬件的配置参数来适配业务场景，或者通过优化软件来降低CPU占用率。根据CPU的能力配置合适锁与等待分析基于Linux pe...
自己总结的CSS以及JS各种库的在线CDN引用地址，链接可以直接复制(不定期更新)...
weixin_33691700的博客
04-16 395
2019独角兽企业重金招聘Python工程师标准>>> ...
cdn引入echarts
07-27
对于使用CDN引入ECharts的问题，有几种方法可以实现。首先，你可以在需要使用ECharts的界面中添加以下代码来引入ECharts的CDN链接： ```html <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.1/dist/echarts.js"></script> ``` 这样就可以直接在页面中使用ECharts了。另外，你也可以在index.html文件中引用ECharts的CDN链接，例如： ```html <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> ``` 这样在整个项目中都可以使用ECharts了。需要注意的是，如果你使用的是较高版本的ECharts，可能需要使用`import * as echarts from 'echarts'`的方式来引入，以避免报错。另外，你还可以使用独立版本的ECharts进行外部引入。希望这些方法可以帮助到你。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* [vue项目echarts通过cdn或npm引入](https://blog.csdn.net/weixin_46115723/article/details/114870484)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Vue解决CDN引入的echarts，通过ajax异步请求的数据不能被正确渲染到视图层的问题](https://blog.csdn.net/m0_52309519/article/details/123757259)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [echarts引入的几种方式](https://blog.csdn.net/weixin_50606255/article/details/116528893)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值