首页 > 其他分享 >使用 Vue.js 的 CDN(内容分发网络)来添加 Vue.js

使用 Vue.js 的 CDN(内容分发网络)来添加 Vue.js

时间:2023-06-17 22:14:27浏览次数:38  
标签:Vue 标签 CDN js 添加 app

在您的 HTML 文件中添加 script 标签,并指定 Vue.js 的 CDN 地址。通常可以通过在 <head> 标签或 <body> 标签的底部添加该标签来加载 Vue.js。

下面是一个常用的 Vue.js CDN 地址:

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

一下是一个小小的案例:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div id="app">
 9     {{ message }}
10 </div>
11 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
12 <script>
13     // 创建一个新的 Vue 实例
14     var app = new Vue({
15         el: '#app',
16         data: {
17             message: 'Hello, Vue.js!'
18         }
19     });
20 </script>
21 </body>
22 
23 </html>

 

标签:Vue,标签,CDN,js,添加,app
From: https://www.cnblogs.com/daitu66/p/17488324.html

相关文章

  • three.js 置换贴图 alpha贴图 的妙用 - 3D文字不引入字体文件
    实现将文字绘制到canvascanvas生成置换贴图alpha贴图将canvas转换成texture将texture贴到material修改shader将黑色背景区域去掉视频教程请移步b站canvas生成贴图classCanvas{canvas:HTMLCanvasElement=document.createElement("canvas");protectedctx:CanvasRen......
  • 基类属性如何反序列化表示具体类的Json字符串
    JsonConverter可以决定类型如何被序列化或反序列化。接口属性被反序列化时,会抛出异常,因为接口没有构造函数。JsonConvert.DeserializeObject<IVehicle>("Json字符串");JsonConvert.DeserializeObject<List<IVehicle>>("Json字符串");JsonConvert.DeserializeObject<Worker>(......
  • 前端Vue非常简单实用商品分类展示组件 侧边商品分类组件
    前端vue非常简单实用商品分类展示组件侧边商品分类组件 ,下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin?id=13084效果图如下:使用方法<!--flist:第一级数组slist:第二级数组tlist:第三级数组@click:点击事件注意:下一级pid与上一级id对应关联......
  • threejs-初识shader
    GLSL文件: importvertexGLSLfrom'./shaders/test1-patterns/vertex.glsl?raw' uniformmat4projectionMatrix;uniformmat4viewMatrix;uniformmat4modelMatrix;uniformvec2uFrequency;uniformfloatuTime;attributevec2uv;attributevec3po......
  • 记录--封装一个通过js调用的全局vue组件
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助前言在使用vue项目编写的时候,不可避免的会碰到需要时jsapi来调用组件进行显示的情况例如饿了么elementui的Notification通知、Message消息提示等组件虽然已经提供了,但是由于api的限制,我们只能通过特定的参......
  • vue样式穿透
    vue样式穿透vue的style中设置scoped属性后,组件实现样式私有化。但是该组件又使用的其他组件库时(vant,elementui,自定义等),该组件的style中的样式,优先级低,不生效,这个时候需要使用样式穿透(作用得更深)。vue中针对不同的样式类型(css,less,scss)有不同的样式穿透方法。vue21.......
  • vue3+vite+web3.js报错ReferenceError: process is not defined
    在vite最新版本中使用web3会报错只需要在vite.config.ts添加如下代码即可解决报错import{fileURLToPath,URL}from'node:url'import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'//引入import{resolve}from'path'export......
  • vue封装axios的方式(一)
    vue封装axios的方式(一)直接将下面代码复制在request.js中,封装了get,post请求,需要自己配置的是:自己的请求地址,tokenKey是否为token,改为自己存入本地的token名,/**axios封装*请求拦截、相应拦截、错误统一处理*/importaxiosfrom'axios';importQSfrom'qs';importrout......
  • vue封装axios的方式(二)
    vue封装axios的方式(二)创建utils\request.jsimportaxiosfrom'axios'import{Message,MessageBox}from'element-ui'//导入element-ui组件库//创建axios的对象constinstance=axios.create({baseURL:"https://api.cat-shop.penkuoer.com&quo......
  • vue封装axios的方式(三)
    vue封装axios的方式(三)与第二种封装基本相同,不同之处在于api的处理格式//引入axiosimportaxiosfrom'axios'//引入qs模块,对数据进行序列化importQSfrom'qs'//引入message模块,toast提示import{message}from'ant-design-vue'//引入storage模块,操作tokenimport......