CDN引入Vue3

选择CDN版本

vue.global.prod.js => 在head中使用引入后，在后续根组件和子组件中可以通过全局的Vue,来引入对应ref、createApp等方法，如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app"></div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const app = Vue.createApp({
            template: 'Hello World
'
        })
        app.mount('#app')
    </script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

vue.esm-browser.prod.js => 可以在页面内使用导入，如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app"></div>

    <script type="module">
        import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

        const app = createApp({
            template: 'Hello World
'
        })
        app.mount('#app')
    </script>

</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

相关阅读:
java计算机毕业设计试验检测仪器管理系统源程序+mysql+系统+lw文档+远程调试
935. 骑士拨号器
注册器模式
设计模式——访问者模式
网站配置了Cloudflare代理后，如何配置Nginx获取的真实客户端IP地址？
uniapp 触底加载
JavaScript 68 JavaScript Browser BOM 68.7 JavaScript Timing 事件
spring 循环依赖以及解决方式
大数据平台开发经验
29、CSS进阶——美化表单元素

原文地址：https://blog.csdn.net/qq_39196447/article/details/138166950