时间戳

首页 > 解决方案 > 如何在纯 js 文件中编写 vue 组件？[没有构建和 webpack 的 Vue.js]

vue.js - 如何在纯 js 文件中编写 vue 组件？[没有构建和 webpack 的 Vue.js]

问题描述

我知道有这个 .vue 文件组件，我想做的是，使用一个简单的 js 文件并在主 js 文件中要求它，例如我有 hello.js

Vue.component('Hello', {
template: '<span>Hello</span>'
})

那么如何在 main.js 中使用这个 hello.js 文件而不去构建 vue 的东西呢？谢谢

标签： vue.js

解决方案

如果您不想要构建步骤，则需要使所有内容都可以使用<script>html 中的标签。因此，不要在 main.js 中使用 import 语句，而是在脚本标记中引用您的组件文件。

<script>标签还不错。您失去了在调用文件中为被调用文件分配名称的能力，并且您必须在树顶部的标记中声明所有引用。对于大型应用程序来说，这些都是相当大的缺陷，但如果你的需求很低，那会让你过一段时间。

您可以在客户端 js 中使用 ES6 导入语句，但前提是您不关心 Firefox 和 Edge。你只需要清楚步骤和顺序。组件需要在全局（如您的示例中）或在调用组件中本地注册。显然，定义组件的对象需要在注册时存在:-)

推荐阅读