开始/快速上手

快速上手主要介绍了编写Vue的几种方式

在线编辑器

演练场
codesandbox
StackBlitz
码上掘金，我会尽量采用这个来编写代码示例

创建本地Vue应用

确保已安装 18.0 或更高版本的 Node.js

根据文档教程即可创建本地项目

CDN

文档中提供的是全局构建版本，意思就是会创建一个全局的Vue变量，可以通过解构的方式使用顶层API等

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

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

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

如果需要尽可能的模仿实际项目的写法，可以使用 ES 模块构建版本

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

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

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

我们目前使用的CDN都是开发环境的，如果使用掘金编写代码的时候引入这些CDN，控制台会有一个警告

截屏2024-03-24 11.36.17.png

截屏2024-03-24 11.36.32.png

这个时候可以查看文档的 生产环境部署指南 的 不使用构建工具 部分，告诉我们：

如果你没有使用任何构建工具，而是从 CDN 或其他源来加载 Vue，请确保在部署时使用的是生产环境版本（以 .prod.js 结尾的构建文件）。生产环境版本会被最小化，并移除了所有仅用于开发环境的代码分支。

如果需要使用全局变量版本（通过 Vue 全局变量访问）：请使用 vue.global.prod.js。

如果需要 ESM 版本（通过原生 ESM 导入访问）：请使用 vue.esm-browser.prod.js。

因此我们在掘金引入的就是

<!--ES 版本-->
<script src="https://unpkg.com/vue@3.4.21/dist/vue.esm-browser.prod.js"></script>

<!--全局构建版本-->
<script src="https://unpkg.com/vue@3.4.21/dist/vue.global.prod.js"></script>