通过CDN使用Vue

最新推荐文章于 2024-06-12 11:58:02 发布

嘘~！

最新推荐文章于 2024-06-12 11:58:02 发布

阅读量976

点赞数

文章标签：开发语言 Powered by 金山文档

本文链接：https://blog.csdn.net/zzx262625/article/details/129236359

版权

通过CDN使用Vue时，不涉及“构建步骤”。这使得设置更加简单，并且可以用于增强静态的HTML或与后端框架集成。但是，你将无法使用单文件组件(SFC)语法。

1,使用全局构建版本

上面的例子使用了全局构建版本的 Vue，该版本的所有顶层 API 都以属性的形式暴露在了全局的 Vue 对象上。

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

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue
  
  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

2，使用ES构建模块

在本文档的其余部分我们使用的主要是 Es模块语法。现代浏览器大多都已原生支持 ES 模块。因此我们可以像这样通过 CDN 以及原生 ES 模块使用 Vue：

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  
  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

3，启用import maps

在上面的示例中，我们使用了完整的 CDN URL 来导入，但在文档的其余部分中，你将看到如下代码：

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>