Vue.js用cdn方式引入

2023-11-01

Vue.js用cdn方式引入


前言


注意本次用cdn形式引入js学习,有node.js的玩家可以用node.js。CDN下载地址:https://vuejs.org/js/vue.min.js以及Node.js:Vue系列: windows下npm安装vue

今天博主将为大家分享Vue.js用cdn方式引入!不喜勿喷,如有异议欢迎讨论!

有一个强大的地基才能写出健壮的程序!请先阅读博主关于:Windows10用npm安装Vue!,注意:下面的案例请自己手打一下运行效果查看


Cdn引入Vue.js

第一种方式,下面引入的是2.5.16版本,开发环境的cdn版本(开发环境版本,包含了有帮助的命令行警告,这里可以查阅2.6.10版本:https://cdn.jsdelivr.net/npm/vue/dist/vue.js

下面引入生产环境的cdn版本(生产环境版本,优化了尺寸和速度,这里可以查阅2.6.10版本:https://cdn.jsdelivr.net/npm/vue

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

进入后你会看到版本信息,如下所示:

开发版本:
在这里插入图片描述
生产版本:
在这里插入图片描述

等同于,替换版本即可:https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js,页面引用,代码如下所示:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>filmMobile</title>
</head>

<body>
  <div id="app">
    {{m}} <br>
    <todo-item></todo-item>

  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            m: "hello vue.js",
        },
    });
</script>

</html>

第二种方式:访问第一步的vue.js的地址,ctrl+A全选复制,在你的项目文件夹js下创建vue-XXX.js,将复制的东西放进去保存即可引用。

在这里插入图片描述


到这里Vue.js用cdn方式引入!各位小伙伴快去试试吧!


最后

  • 更多参考精彩博文请看这里:《陈永佳的博客》

  • 喜欢博主的小伙伴可以加个关注、点个赞哦,持续更新嘿嘿!

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

Vue.js用cdn方式引入 的相关文章

随机推荐

  • java无法解析符号什么意思,Intellij:无法解析符号'springframework'

    我试图用Spring开始我的第一个项目 我使用intellij的想法 我也很新 但无论如何 我跟着在jetbrain网站上写下的步骤 我不知道我做错了什么 但是我在第一个到默认创建的文件上有很多错误 Intellij 无法解析符号 spri
  • SpringSecurity+Oauth2+JWT

    SpringSecurity Oauth2 JWT SpringSecurity Oauth2 JWT 快速入门 自定义登入 自定义登入成功失败处理器 权限判断 自定义异常返回 自定义方法实现权限控制 注解实现权限控制 记住我实现 退出登入
  • WIN7搜索不到共享打印机怎么办? 亲测成功

    1 开启的服务 右键点击 计算机 右键菜单中选择 管理 找到 服务和应用程序 打开 服务 或者用WIN R打开 运行 对话框 输入services msc 按回车键打开 服务 然后 将以下服务的 启动类型 选为 自动 并确保 服务状态 为
  • 【数据库技术】NineData数据复制,加速实时数仓构建

    8 月 30 日 由 NineData 和 SelectDB 共同举办的主题为 实时数据驱动 引领企业智能化数据管理 的线上联合发布会 圆满成功举办 双方聚焦于实时数据仓库技术和数据开发能力 展示如何通过强大的生态开发兼容性 对接丰富的大数
  • mysql输入密码后闪退问题的解决

    1 找到配置文件my ini 然后用记事本将其打开 2 打开后 搜索mysqld关键字 找到后 在mysqld下面添加skip grant tables 保存退出 若提示不让保存时 可以将文件剪切到桌面 更改保存后再复制到mySQL目录下
  • 安装opencv和opencv-contrib库

    快速安装的方法在最后 速度超快 1 安装opencv python Win R 输入cmd 然后输入activate 进入base环境 或者其他自己创建的环境 输入 pip install opencv python 如果报错 显示的是拒绝
  • 正则表达式之ip地址匹配(详细讲解)

    正则表达式之ip地址匹配 一 正则匹配基本知识及概念 二 ip地址匹配 一 正则匹配基本知识及概念 在练习之前 需要大家知道一些基本知识 如果有一定基础的可以跳过该步骤 直接往下看 正则表达式 字符类 abc 代表a或者b 或者c字符中的一
  • lambda函数

    lambda函数也叫匿名函数 就是没有函数名的函数 lambda表达式基于数学中的 演算得名 直接对应于其中的lambda抽象 lambda函数的语法只包含一个语句 lambda arg1 arg2 argn expression 冒号前面
  • 设计模式(十九) 备忘录模式

    备忘录模式是一种行为型模式 作用是将对象的内部状态保存下来 在必要的时候恢复 备忘录模式可以用于游戏存档恢复 文件的历史记录等场合 下面是一个简单的代码例子 首先是文档管理器 用于保存文档的状态 public class DocumentM
  • 【Eclipse】Maven安装配置&Eclipse配置Maven插件

    文章目录 前言 一 下载安装Maven 二 配置Maven环境变量 三 修改Maven仓库配置 四 Eclipse配置 maven
  • JS提取链接参数

    假如要提取当前网络链接上面的参数 那么请看下去 比如要提取 var url http www baidu com x 10 y 20 c 30 d 40 中的 xycd的值 那么
  • 【已解决】SpringBoot 后端开发中console中中文乱码问题,以及其他解决方法。

    项目场景 在IDEA中 使用Maven构建SpringBoot Web后端项目 黑马程序员中的javaWeb 2023最新课程中的案例 有同样问题的同学欢迎一起讨论学习 问题描述 前端网页请求发出后 后端成功响应 但是在控制台中 中文数据会
  • C标准库文件&常用函数

    编号 头文件 C标准版本 介绍 1
  • MIPI DPHY接口的若干种实现方案概述

    一 MIPI DPHY接口简介 MIPI DPHY是MIPI的一种物理层 其协议层有CSI和DSI两种 其中CSI主要用于图像接入 如图像传感器Sensor DSI主要用于图像输出 如手机屏幕等 有关MIPI DPHY及CSI和DSI的技术
  • 涡阳2021年高考成绩查询,2021年涡阳县高考状元名单资料,今年涡阳县高考状元多少分...

    高考状元一直都备受大家的关注 不管对于学校和还是当地教育系统 都是一件荣誉的事情 高考状元历来都诞生于艳羡的目光中 大家为他们的高分叫好 羡慕他们可以一步踏入国内知名学府 本文高考升学网为大家介绍历年涡阳县高考状元的相关资料和考分情况 看看
  • 互斥锁、读写锁、自旋锁、条件变量的特点总结

    读写锁特点 1 多个读者可以同时进行读 2 写者必须互斥 只允许一个写者写 也不能读者写者同时进行 3 写者优先于读者 一旦有写者 则后续读者必须等待 唤醒时优先考虑写者 互斥锁特点 一次只能一个线程拥有互斥锁 其他线程只有等待 互斥锁是在
  • 新闻管理系统

    1 项目介绍 新闻管理系统拥有两个角色 分别为用户和管理员 具体功能如下 2 项目技术 后端框架 Jfinal mvc 前端框架 Freemarker html css JavaScript JQuery 3 开发环境 JAVA版本 JDK
  • css transparent张鑫旭,【灵感杂谈】张鑫旭和他的《CSS世界》

    原标题 灵感杂谈 张鑫旭和他的 CSS世界 说到本书的作者 前端圈里没见过他的人有很多 但没读过他文章的人很少 他就是很多前端同行眼中的 张老师 张大神 张鑫旭 以下简称 张 前一段时间 去参加 前端体验大会 有一位张的同事作为分享嘉宾 当
  • 清风数学建模学习笔记——熵权法(客观赋权法)

    熵权法 熵权法是一种客观赋权方法 客观 数据本身就可以告诉我们权重 依据的原理 指标的变异程度越小 所反映的信息量也越少 其对应的权值也应该越低 本文借鉴了数学建模清风老师的课件与思路 如果大家发现文章中有不正确的地方 欢迎大家在评论区留言
  • Vue.js用cdn方式引入

    Vue js用cdn方式引入 前言 注意本次用cdn形式引入js学习 有node js的玩家可以用node js CDN下载地址 https vuejs org js vue min js以及Node js Vue系列 windows下np