随着前端技术的不断发展，Vue 3 已经成为了众多开发者的心头好。而在 Web 开发中，3D模型的展示一直是一个挑战。今天，我们就来聊聊如何在 Vue 3 中安装并使用 model-viewer（或类似的 3D 模型查看器组件），甚至可以自己封装一个。
如果你还没有一个 Vue 3 项目，可以使用 Vue CLI 来快速创建：
bashnpm install -g @vue/clivue create my-vue-3d-projectcd my-vue-3d-project
假设存在一个名为 `vue-3d-model` 的 Vue 组件库，它封装了 `model-viewer` 或其他 3D 模型查看器。你可以通过 npm 或 yarn 来安装它：
bashnpm install vue-3d-model --save# 或者使用 yarnyarn add vue-3d-model
如果 `vue-3d-model` 不存在，或者你找不到其他合适的 Vue 封装组件，你可以考虑直接使用 `model-viewer` 的 Web 组件版本，并在 Vue 中通过 `
然后，在浏览器中访问 `http://localhost:8080`（或你运行项目时指定的其他地址），你应该能够看到 3D 模型在页面上展示。
1. 确保模型文件路径正确：如果 `vue-3d-model` 或类似的 Vue 封装组件不存在，你可以考虑使用 `model-viewer` 的原始 Web 组件版本，并通过 Vue 的 `