使用CDN方式创建Vue3.0应用程序

CDN 的全称是 content delivery network，即内容分发网络。它是构建在现在的互联网基础之上的一层智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发和调度等功能模块，使用户就近获取所需内容，解决 Internet 网络拥挤的状况，提高用户访问网站的响应速度。

在项目中使用 Vue.js 时可以使用 CDN 的方式。这种方式很简单，只需要选择一个提供稳定 Vue.js 链接的 CDN 服务商即可。Vue 3.0 的官网中提供了一个 CDN 链接 https://unpkg.com/vue@3/dist/vue.global.js ，在项目中直接通过<script>标签引入即可，代码如下：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

国内的 CDN 推荐：

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

下面将使用使用CDN方式，创建一个 Vue3.0 应用程序。

创建 Vue 应用程序系列博文：

《使用CDN方式创建Vue3.0应用程序》

《使用NPM方式创建Vue3.0应用程序》

（1）创建 index.html 文件，并编写相关代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="author" content="pan_junbiao的博客"><title>使用CDN方式创建Vue程序</title>
</head><body><div id="app"><p>{{msg}}</p><p>{{blogInfo}}</p><p>{{blogUrl}}</p></div><!-- 第一步骤：引入 Vue3.0 的官网中提供的 CDN 链接 --><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><!-- 国内的 CDN 推荐 --><!-- <script src="https://cdn.jsdelivr.net/npm/vue@3"></script> --><!-- 第二步骤：使用 Vue.createApp 函数创建一个应用程序实例--><script type="text/javascript">const vueApp = Vue.createApp({//返回数据对象data() {return {msg: "使用CDN方式创建Vue程序",blogInfo: "您好，欢迎访问 pan_junbiao的博客",blogUrl: "https://blog.csdn.net/pan_junbiao"}}//装载应用程序实例的根组件}).mount('#app');</script>
</body></html>

（2）运行程序