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

news2024/11/18 7:51:15

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）运行程序