线上尝试 Vue
在这里，官方给我们列举了3种在线方式：
-
演练场
官方出品，无需登录，数据保存在 url 中，我们上一篇中的示例也采用了它。
它新建的是 Vue 文件，而非 html 文件。虽然是 Vue 文件，但它内部已经处理好了各种入口绑定之类的，方便我们直接写 Vue 代码学习。
-
JSFiddle
这可以算是一个老牌的在线编辑器了。通过 html 使用 Vue，请注意，它引用 vue 版本时，要引用带编译功能的版本。
-
StackBlitz 前几年新出的在线IDE，你可以简单理解为一个在线版本的 VSCode。
以上3种在线方式中，StackBlitz 相当于把本地 IDE 的功能搬到了网上，功能最强大。但因与为本地 IDE 相同反而更好理解。前2种，演练场与 JSFiddle 中使用了 ES 中的新语法：importmap。它需要留心一下。
我们明白，工作当中我们是用 VSCode 这种 IDE 通过 npm 下载安装包开发的。我们把下载的库放到了本地项目中的 node_modules 目录下。
js
import { xxx } from 'vue'然后我们通过上面这条命令引用 vue。它会从 node_modules 下查找有没有 vue 库。这是基于 node 的文件系统实现查找的。
演练场与 JSFiddle 没有本地文件系统，因为它是在浏览器当中，是吧。那为什么它也可以使用
js
import { ref } from 'vue'这种语法呢？
得益于现代浏览器的强大及 ECMA 组织的标准制定，我们已经可以在浏览器当中使用 import 语法了。
js
<script type="module">
import xxx from 'https://xxx.com'
import yyy from './a.js'
import zzz from '/b.js'
...
</script>上面的语法都是正确的。但是下面这种不可以。
js
// 无法直接裸引用，也就是 vue 不是一个绝对或者相对路径。因为浏览器不知道去那里找它。
import xxx from 'vue'为了解决从哪里找的问题，引入了 Import maps 机制。
js
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
}
}通过以上定义就可以实现裸引入了。
创建一个 Vue 应用
这里要确保你也安装了 node ，如何安装它，相当简单，不再赘述。如有疑问，请评论区留言。
这里官方使用了 4 种包管理器。
- npm，老牌的 node 包管理器，以前要单独安装，但自从0.6.x 开始就自带了，现在最新版本已经20了......
- pnpm，这是前近几年新出的 npm 替代品，强调快速与节省体积；
- yarn，脸书出品，npm 替代品，强调快速；
- bun，这个是真前2年新出包管理器，或许叫它 js 运行时更合适。它的功能太多了，包管理器只是它的一个功能。
如果你第一次学习不了解，就直接使用 npm。
bash
├── .vscode -- vscode配置目录，包含了项目在 Visual Studio Code 中的配置文件，例如编辑器设置、调试配置等。
├── public -- 静态资源文件目录，用于存放不需要经过构建处理的静态资源文件，例如图片、字体文件等。
├── src -- 源码目录，包含了项目的所有源代码文件。
| ├── assets -- 资源目录，存放项目中使用的各种静态资源文件。
| | ├── base.css -- 基础样式，定义了一些通用的样式和 css 变量。
| | ├── logo.svg -- 项目的 logo 图片文件。
| | └── main.css -- 项目的主样式文件。
| ├── components -- 组件目录，存放了项目中使用的各种 Vue 组件。
| ├── App.vue -- 根组件文件，定义了整个应用的根组件。
| └── main.js -- 入口文件，项目的主入口文件，用于初始化 Vue 应用。
├── .gitignore -- git配置文件，用于配置 git 版本控制系统忽略的文件或目录。
├── index.html -- html 文件，项目的主页面文件，用于加载 Vue 应用。
├── jsconfig.json -- jsconfig配置文件，用于配置 JavaScript 项目的编辑器支持和代码提示。
├── package.json -- package.json文件，用于描述项目的元数据信息和依赖项。
├── README.md -- 项目的说明文档，通常包含了项目的介绍、安装方法、使用说明等信息。
└── vite.config.js -- 用于配置 Vite 构建工具的相关配置，例如代理设置、打包配置等。以上是我们生成的项目目录结构。
如果是第一次接触 Vue，可能会奇怪，为什么生成这样的目录结构？
这其实是一个历史演变过程，慢慢形成了"约定大于配置"。
简单说两句就是，一开始大家的目录结构各式各样，但在一个组织内，慢慢会形成一个统一的目录结构--所谓的"最佳实践"。然后得益于开源与程序员的奉献，该组织的最佳实践就在网上流传开了。如果该组织的影响力很大，采用的人很多，就成了事实上的标准了。最后大家的基础工程就趋于一致了。 vue 的演变可以简单如下所示：
vue 各种混乱目录 ---> vue + webpack 目录结构为主 ---> vue-cli 1、2、3、4、5 ---> vite 1、2、3、4、5
当进入 vue-cli 时代后，官方把一些固定的配置放到 node_modules 目录下，简化了目录结构。但不可能所有业务都只使用官方配置就行了，是吧。如何提供自定义配置呢，是了，就是我们这里的 vite.config.js 文件。如果我们在这里写了自定义配置，它会被合并覆盖默认的配置以达到自定义配置目的。
关于 vite 的实现这又是一个大话题了，不在此处讨论。至于 vue-cli，它是上一代脚手架，已经不再维护了。现在是 vite 的天下。
当我们运行 npm install 命令，它会按照 package.json 中的依赖库（dependencies 与 devDependencies 属性下的库 ），去 npm 的中央仓库下载。把下载的库都放到 node_modules 目录下。
然后运行 npm run dev 命令，它会执行 src/main.js 文件，把该文件及其中引用的其它 Vue 文件编译成 js 代码，然后挂载到 index.html 文件中，也就是把生成的内容动态在 index.html 中写入。之后，它启动一个本地服务器，并把主页设置为 index.html 。这样我们通过访问 http://localhost:5173 就看到 index.html 的内容了。
通过 CDN 使用 Vue
官方的这段话，可能有人有点小疑惑，解释一下。
通过 CDN 使用 Vue 时，不涉及"构建步骤"。这使得设置更加简单，并且可以用于增强静态的 HTML 或与后端框架集成。但是，你将无法使用单文件组件 (SFC) 语法。
什么叫构建步骤？我们在上面通过 npm 创建的应用，它就是一个典型的"构建步骤"。查看目录可知，我们生成了好多 xxx.vue 文件，我们的代码都是在这些 xxx.vue 文件中书写的。但浏览器不可能认识这些 xxx.vue 文件，更不可能运行它们。那为什么我们还看到了内容呢？
这就是构建的功劳了。
构建步骤，简单理解就是，它把这些 xxx.vue 文件编译成了一大段 js 代码，浏览器自然认识 js。然后把编译生成的 js 文件写到 index.html 文件中的 <script>...</script> 中。最后通过浏览器查看 index.html 就可以了。
这里的不涉及构建，是因为我们所有代码都是直接在 html 的 <script> 标签下书写，不依赖 node，自然简单了。 如果我们做老项目的升级，就可以这样一个 html 文件（或者 jsp 文件），一个 html 文件（或者 jsp 文件）地替换升级，也就是上面所说的与后端框架集成。
这里官方使用了2个不同的库：全局构建版本、ES 模块构建版本。
全局模块版本，可以直接使用 Vue，因为它相当于 window.Vue，所以示例中写法是：
html
...
<script>
// 相当于从 window.Vue 中引用这2个函数。
const { createApp, ref } = Vue
...
</script>ES 模块版本，示例如下：
html
/* type="module" 表示该 scirpt 内启用 es6 的模块支持。 */
<script type="module">
// 请注意它与上面的不同，是 from '绝对路径文件'
import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
...
</script>Import maps 我们前面也说过，不再赘述。