vue项目CDN引入

2023-11-12

注:一些对系统并不是至关重要的文件诸如字体文件、css重置、js小插件、背景图片等可能适合使用CDN,因为即使CDN文件不可用,网站也能做到平稳退化。

第一步:public/index.html 里⬇️

注:需引入vue并且main.js中正常引入,但element-ui就无需引入,可以直接使用
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> // element-ui的css
  </head>
  <body>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> // vue引入,必须放在第一个
    <script src="https://cdn.bootcss.com/element-ui/2.3.3/index.js"></script> // element-ui引入
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=自己的ak"></script> // 百度地图引入,注意替换掉自己的ak
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.1/echarts.common.js"></script> // echarts引入
  </body>
</html>

第二步:vue.config.js中⬇️

module.exports = {
  chainWebpack: config => {
    config.set('externals', {
      vue: 'Vue',
      'element-ui': 'ELEMENT',
      BMap: 'BMap', // 百度地图
      echarts: 'echarts'
      // 'vue-quill-editor': "VueQuillEditor", // 富文本
    })
    return config
  }
}

免费CDN网站,在里面前端大部分插件等都能找到,BootCDN2018年中挂过一次

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue项目CDN引入 的相关文章

  • javascript 中对象的“异步”循环

    通常 我们可以对数组和对象进行循环来迭代属性 值 但循环是阻塞的 但是 超时可用于模拟异步循环 我设法为数组做到了这一点 http jsfiddle net LHhy2 do stuff function asyncLoop i do st
  • 第一次使用node.js - “ReferenceError:节点未定义”

    我刚刚安装了node js 我尝试编写应该检查版本的node v 但它不起作用 这是输出 gt node v ReferenceError node is not defined at repl 1 2 at REPLServer self
  • Angular 2 Material 2 日期选择器日期格式

    我不知道如何更改材料2日期选择器的日期格式 我已阅读文档 但我不明白我实际上需要做什么 datepicker默认提供的输出日期格式为f e 6 9 2017 我想要实现的目标是将格式更改为类似的格式9 Jun 2017或任何其他 文档htt
  • ajaxStop() 不触发

    这是不起作用的代码 document ajaxStop function this unbind ajaxStop prevent running again when other calls finish Display everythi
  • 打开 md-calendar 时滚动到当前日期

    目前正在构建一个使用 Angular Material 的应用程序 我们需要一个 md calendar 组件 我们想要自定义按钮样式和内容 因此不使用普通的 md datepicker 问题是 当 md calender 打开时 滚动位置
  • Web 组件 - 服务/非 html 组件

    所以我来自 Angular 想看看如何创建vanilla Web components 现在 从 Angular 开始 我们倾向于将事物分开 组件 充当 HTML CSS 和一些 javascript 然后是 服务 主要负责收集数据和执行不
  • 确定元素是在页面折叠上方还是下方

    我有一些页面有多个输入框 用户可以在其中输入文本 在单击 下一步 按钮之前 需要填写其中一些内容 我弹出验证错误供用户查看 但是如果问题不在页面上 我希望页面滚动到它 而不是他们必须搜索丢失 错误的字段 我有一个滚动到位 但我无法确定要滚动
  • 使用 JavaScript 生成 PDF 文件

    我正在尝试将 XML 数据从网页转换为 PDF 文件 并且希望能够完全在 JavaScript 中完成此操作 我需要能够绘制文本 图像和简单的形状 我希望能够完全在浏览器中完成此操作 我刚刚写了一个名为jsPDF https github
  • 如何调用 google 的 getBasicProfile() 来仅单击按钮即可登录 google?

    我在我的网站上使用谷歌登录
  • console.log() 显示同一对象属性的矛盾值

    我想我可能要疯了 我使用 console log 来查看对象的状态 然后在下一行对同一对象的特定属性执行 console log 并为每个属性获取不同的值 我正在使用的代码是 console log this pictures Items
  • 为什么将 x 和 y 设置为 0 时 svg 文本会消失?

    我刚刚开始阅读有关svg我提出了以下问题 我正在创建一个简单的svg with a text里面如下图所示 从我的阅读中我了解到x and y of the text标签声明文本在标签内的位置svg space 为什么当我同时设置x and
  • 如何检测元素内容何时发生变化

    我正在寻找一种方法来监视元素内动态填充 无页面重新加载 内容 以便我可以将类添加到另一个元素 到目前为止我有这个 HTML div class message container div class messages error span
  • 如何使用 vanilla JS 实现可维护的反应式 UI

    今天我遇到了一个问题 可以通过使用像 Vue 这样的反应式和状态管理框架来轻松解决 遗憾的是 无法使用它 以下 简化 情况 链接到代码笔 https codepen io theiaz pen BazErKV 我们有一个服务器渲染的页面 其
  • 如何打开弹出窗口并用父窗口中的数据填充它?

    如何使用 JavaScript jQuery 使用父页面中 JS 变量的数据填充弹出窗口 在我的示例中 我有一个文件名数组 我在父窗口中最多列出五个 如果还有更多 我想提供一个链接来打开弹出窗口并列出数组中的每个帖子 因此 如果我打开一个包
  • 计算文本选择的 xy 位置

    我正在尝试使用 DOM 元素创建自己的文本选择 是的 我的意思是当您在此元素中选择文本时 您会在文本后面看到蓝色背景 这个想法是停止默认行为 蓝色 并使用我自己的元素来完成工作 方法是找到选择的 xy 位置 然后放置绝对定位的元素 我希望能
  • Knockout.js 安全绑定

    我想使用带有淘汰赛的安全绑定 为此我使用敲除安全绑定 js https github com brianmhunt knockout secure binding 谁能解释一下为什么下面的代码不起作用 它会抛出一个错误 未捕获 淘汰 安全
  • 在 HTML5 iOS 7 / iOS 8 中显示十进制键盘

    经过几个小时的搜索后 我只是有一个简单的问题 是否有可能在网络浏览器输入字段中显示小数键盘 input type number 只显示数字 但我需要在左下角使用逗号或点 我尝试过任何事情 pattern step等等 但没有显示十进制键盘
  • 如何使用 jQuery 或 JavaScript 聚焦 或 标签?

    for var i 0 i
  • 强制输入数字小数位

    我想强制
  • Flowtype 属性“msg”缺失为 null 或未定义

    我发现 Flow 很难用 我明白那个Array find可以返回或未定义 因此 通过阅读以下内容 github Array find on Array 引发 https github com facebook flow issues 351

随机推荐

  • 运行时错误:Error: free(): invalid next size (fast)

    经查 这通常发生在C C 混合编程时候调用的内存分配 释放接口不配对时 即malloc分配的内存 却用了delete或者new出来的对象 却用了free 只要确保 malloc free new delete配对 该问题就消失了
  • Promise的Catch报错总结

    在使用Promise时 异步返回的结果可能会两种 一种是使用resolve返回 另一种是使用reject返回 当使用reject返回时 会throw一个Error出来 这时的这个Error需要Catch住 在Promise中Catch一个E
  • 1600*B. Jumping Jack(数学&&找规律)

    解析 一直往右条 直到第一次超过 x 如果当前和目标点 p x为偶数 则 p x 2 的那一步向左跳 这样会少跳 p x 正好补在多跳的这一段 如果为奇数 则不能除2 则继续跳 直到距离为偶数即可 x和x答案一样 include
  • java中this的使用

    一 本类中方法 属性 构造器的调用 1 属性的调用 当构造器中初始化对象的时候 如果形参名与属性名相同 这时候可以在等号左边的属性前面加上this表示 这个指向的是类的属性而不是指向形参 2 方法的调用 3 构造器的调用 1 在定义含参构造
  • kafka的核心参数配置

    2 kafka配置参数 broker id broker的id id是唯一的非负整数 集群的broker id不能重复 log dirs kafka存放数据的路径 可以是多个 多个使用逗号分隔即可 port server接受客户端连接的端口
  • 项目管理是做什么?

    项目管理在大企业中应用比较多 那么项目管理是做什么 项目管理能够为企业起到什么作用 1 什么是项目 项目是为完成一款产品 一项服务或者一种可交付成果进行的临时性任务 也就是说项目具有一个范围 时间等特性 需要在某一个时间段完成某一范围内的任
  • 25章 SPI—读写串行FLASH

    SPI 协议简介 3 条总线分别为SCK 时钟 MOSI 主出从入 MISO 主入从出 片选线为SS1 2 3 从设备 多少设备也就这三条ss MOSI和MISO能看出是全双工 输入输出两条线 可同时使用 NSSx下降沿选中当前设备 上升沿
  • requests方法的post请求方式

    0x01前言 对post请求方式 我们需要明确表单内容的类型 一般情况下 直接提交data参数即可 但如果前端对此有所校验 就需要根据实际情况进行调整 0x02常见的post方式 post form data 这里我自己搭建了个简单的登陆界
  • 文献可视化--vosviewer入门

    VOSviewer是一个用于构建和可视化文献计量网络的软件工具 这些网络可以例如包括期刊 研究人员或个人出版物 并且它们可以基于引用 书目耦合 共同引用或共同作者关系来构建 VOSviewer还提供文本挖掘功能 可用于构建和可视化从科学文献
  • 【论文精读】ACVNet: Attention Concatenation Volume for Accurate and Efficient Stereo Matching

    这是一篇CVPR 2022的文章 基于一种新颖的注意力权重代价体构建方法 设计了一种网络结构 用以立体匹配 视差估计 双目深度估计 原文链接 ACVNet 代码链接 https github com gangweiX ACVNet Abst
  • 华为od机考题目-敏感字段加密

    字符串长度小于等于127字符 只包含大小写字母数字下划线和偶数个双引号 命令字之间以一个或者多个下划线进行分隔 可以通过两个双引号来标识包含下划线d 的命令字或者空命令字 while 1 try k int input nums input
  • opencv (三十八)图像形态学—膨胀

    小白学视觉 笔记 扩展 include
  • 解决 Mac 左滑浏览器默认的返回事件

    阻止 document body style overscrollBehaviorX none 恢复 document body style overscrollBehaviorX auto 参考 https juejin cn post
  • 【MyCat简单介绍】

    1 MyCat简介 MyCat是MySQL分库分表的利器 MyCat的核心功能是分库分表 其配置数据库的主从模式还可实现读写分离 MyCat 是什么 MyCat是目前最流行的基于java语言编写的数据库中间件 是一个实现了MySQL协议的服
  • 图漾相机—windows- Python SDK(官网下载编译)

    文章目录 一 安装依赖 二 下载swig和SDK swig下载连接 https www swig org https www swig org 下载python SDK 下载 Windows Camport3 SDK 三 配置python和
  • 安卓 Android 11、12 不使用第三方 Recovery TWRP 刷入 Magisk v22+ 支持联发科

    测试机型 小米 10 至尊纪念版 Mi 10 Ultra 今天把 MIUI 版本更新到了 12 1 1 发现安卓版本升到了 11 接下来我就正常想刷 wzsx150 大佬的 TWRP 发现刷上去挂载不了 data 不支持安卓 11 网上搜索
  • uni-app 中使用uview生成测试小程序后报错:pleaseSetTranspileDependencies is not defined

    这是一篇踩坑文 记录一个uni app中的坑点 在uni app 中使用uview后在生成小程序后第一次编译时控制台报了这么一个错 在检查了许久的原因后最后找到的解决办法是 在文件 common vendor js 中搜索并删除下面这句话
  • 雷电模拟器中无法登录微信且抖音等视频类应用无法观看视频

    IP受限制解除 https jingyan baidu com article b2c186c83bb443c46ff6ff64 html 转载于 https www cnblogs com ysgcs p 9801374 html
  • docker容器开启mysql的binlog

    在宿主机的conf d里面创建my cnf 添加以下内容 mysqld binlog格式 binlog format mixed 存放地址 注意这个地址是docker容器里面的地址 不是宿主机里面的地址 log bin var lib my
  • vue项目CDN引入

    注 一些对系统并不是至关重要的文件诸如字体文件 css重置 js小插件 背景图片等可能适合使用CDN 因为即使CDN文件不可用 网站也能做到平稳退化 第一步 public index html 里 注 需引入vue并且main js中正常引