Vue.js用cdn方式引入_vuejs cdn-程序员宅基地

技术标签: Vue系列  为霞而作  Vue.js用cdn方式引入  

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/[email protected]/dist/vue.js"></script>

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

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

等同于,替换版本即可:https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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方式引入!各位小伙伴快去试试吧!


最后

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

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Mrs_chens/article/details/103295707

智能推荐

Oracle Database RAC 11.2.0.4 for AIX6.1安装报irman ioracle错误-程序员宅基地

文章浏览阅读1.6k次。本文转自:http://blog.itpub.net/23135684/viewspace-733990/在AIX平台安装Oracle RAC就是个坑爹的事情,今日再次验证了这点,只因为bug太多!记录问题也只因为bug太多!强烈推荐及看好Oracle RAC在Linux平台的发展。下面对问题的记录:>服务器:IBM Power 740>存储:IBM DS 5020_irman ioracle

华为笔试题—字符串表示数字_华为笔试 字符串-程序员宅基地

文章浏览阅读217次。题目描述:将一个字符中所有出现的数字前后加上符号“*”,其他字符保持不变,例如:输入:Jkdi234klowe90a3输出结果:Jkdi*234*klowe*90*a*3*代码实现:while True: try: num1= [] str1 = input() for i in str1: if i.isdigit() : num1.append('*' + i + '*'_华为笔试 字符串

bzoj 3889: [Usaco2015 Jan]Cow Routing SPFA-程序员宅基地

文章浏览阅读233次。→题目链接←双键值最短路,SPFA代码:#include#include#include#include#define ll long long#define inf 0X3f3f3f3f3f3f3f3fllusing namespace std;struct node{ int to,len1,len2;};int s,e,m,n=0;v_bzoj 3889

Jedis 和 Redis Template 应用_jedis.hval redistemplate-程序员宅基地

文章浏览阅读400次。准备工作创建工程创建maven父工程,例如03-sca-redis,并在此工程下创建两个子工程,一个为sca-jedis,一个为sca-tempate,例如:添加项目依赖sca-jedis 工程依赖<dependency> <groupId>redis.clients</groupId> <artifactId>jedis</artifactId> <version>3.5.2</versio_jedis.hval redistemplate

MSP430G2553 PWM控制速度,并自我检测和简单调节速度_ta1ccr0和ta1r-程序员宅基地

文章浏览阅读5.2k次,点赞12次,收藏126次。MSP430G2553 测量小车速度,并简单调速需要了解MSP430系列的GPIO,TIMERA,UART相关的知识涉及内容:PWM输出配置,TIMER A 的捕捉/比较寄存器的输入捕捉配置,串口通信的配置,系统时钟的配置STEP 1 测量小车速度的方法公式:v = s/t;s,就是轮子周长;t就是中断周期PREPARE 1 小车橡胶轮子参数:周长:C=2*pi*R=pi*D=20.41975cm;总共20个洞。1.0209875cm/洞每穿过一个洞,产生一个中_ta1ccr0和ta1r

最简单理解map和flatMap的区别_map和flatmap的区别和理解-程序员宅基地

文章浏览阅读3.0k次,点赞3次,收藏6次。我的理解map:map方法返回的是一个object,map将流中的当前元素替换为此返回值;flatMap:flatMap方法返回的是一个stream,flatMap将流中的当前元素替换为此返回流拆解的流元素;官方解释map:Returns a stream consisting of the results of applying the given function to the ele..._map和flatmap的区别和理解

随便推点

【论文研读】【医学图像分割】【BCRNN】Fine-grained Recurrent Neural Networks for Automatic Prostate Segmentation ...-程序员宅基地

文章浏览阅读678次。【BCRNN】基于超声波图像的前列腺分割,由于超声波图像不易处理,作者提出Boundary Completion RNN,将笛卡尔坐标转化为极坐标,使用双向LSTM学习,前后向h合并,预测出的结果与原图结合再进行一轮,共三轮。由于序列化的截取可能导致的问题又采用了多视角策略(进行多个角度截取)。_fine-grained recurrent neural networks for automatic prostate segmentation i

解决编译apache出现的问题:configure: error: APR not found . Please read the documentation-程序员宅基地

文章浏览阅读60次。今日编译apache时出错:#./configure --prefix……检查编辑环境时出现:checking for APR... noconfigure: error:APR not found. Please read the documentation解决办法:1.下载所需软件包:wgethttp://archive.apache.org/dist/apr/..._apache远行出错

android打开office_andoid <office protocol><open mode>|u|<url>-程序员宅基地

文章浏览阅读2.6k次。第一次写博客,请多见谅,写的不好,有什么见解可以跟我说。QQ:1398169857 前段时间需要这么个需求,需要本应用打开word,pdf,ppt等,然后查阅资料,发现有三种方法。一、使用腾讯X5SDK,它提供文件读取能力,自动解析出来,目前只支持本地打开,估计过阵子会支持网上也能打开,而且解析的很好,推荐使用这个。使用步骤如下:①前往https://x5.tencent.co..._andoid |u|

解决highcharts图表在循环里只能显示一个的问题_highchart point.total只显示1个值-程序员宅基地

文章浏览阅读397次。导致原因:1:div的id没有唯一,设置成唯一即可2:highcharts使用了公共配置,设置成私有配置即可_highchart point.total只显示1个值

全新 ADAS 和自动驾驶车辆系统的处理器性能和安全要求_adas是安全要求还是法律法规要求-程序员宅基地

文章浏览阅读5.2k次。简介当今汽车行业的创新正在加速,因为各公司正在竞相成为安全和自动驾驶车辆领域的市场领导者。随着车辆控制正在从人类转变为车辆的主动安全系统,更多传感器 – 摄像头、雷达、激光雷达等 – 正被添加到汽车系统中。更多的传感器需要更大的 SoC 提供的更多计算性能,以处理额外的传入数据,并尽可能降低故障率。因此,自动驾驶汽车要求提高处理性能和安全要求的数量级。这些更大的 SoC 需要最先进的处理器架构,以提供具有最高汽车安全完整性水平 (ASIL) 所需的处理性能。具有传感器的安全系统,其中一个实例是基于雷达的_adas是安全要求还是法律法规要求

echarts中折线标识、线条渐变、虚线设置、双条折线数据个数不同报错问题解决_echarts 折线虚线-程序员宅基地

文章浏览阅读1.8k次。先上整体效果图:1、虚线+折线渐变、折线两端透明度设置如下代码如下://去年虚折线代码//虚线+折线渐变、折线两端透明度设置 代码如下:series: [ { name: "去年", type: "line", symbol: "circle", // 默认是空心圆(中间是白色的),改成实心圆 showAllSymbol: true, symbolSize: 0, smooth: true, lineSt_echarts 折线虚线

推荐文章

热门文章

相关标签