组件的外部 Html 和 JS？答案

【问题标题】：External Html and JS for components?组件的外部 Html 和 JS？
【发布时间】：2022-01-12 14:39:14
【问题描述】：

我是 Vue js 的新手，我有一个问题。我可以将一个组件拆分为 Html 和 js，然后在其他 Html 文件和组件中使用它吗？如果是这样，我该怎么做？否则，我的 index.html 会很长。我想要这样的结构：

并且想使用我的 index.html 中的所有内容。我想要 tileBody 和 verticalTile 组件之类的东西。

index.html

<html>
  *head*
     <body>
      <div id="app">
         <verticalTile></verticalTile>
      </div>
     </>
</html>

verticalTile.html

<vertical-tile>
   <tileBody></tileBody>
</verticalTile>

tileBody.html

<tileBody>
  <tileInfo></tileInfo>
</tileBody>

感谢大家的帮助

【问题讨论】：

标签： html vue.js vue-component vuejs3

【解决方案1】：

这看起来毫无帮助，但最终你需要了解 VueJS 的工作原理。 Stackoverflow 不是来教你框架的基础知识的。

以下是一些对 VueJS 初学者有用的视频。它们涵盖了您遇到的问题。

https://www.youtube.com/watch?v=YrxBCBibVo0

https://www.youtube.com/watch?v=FXpIoQ_rT_c

编辑：所以要详细说明我们的评论线程，您可以像这样将文件分开。重要的是，将逻辑文件命名为与模板文件不同的名称，以免意外导入该文件而不是模板。

您的文件结构应该类似于 ...

└ /components
  └ /BarcodeLookup
    └ BarcodeLookup.css
    └ BarcodeLookupLogic.js
    └ BarcodeLookup.vue

你的 Vue 文件 ...

<style scoped src="@/components/BarcodeLookup/BarcodeLookup.css"></style>
<script src="@/components/BarcodeLookup/BarcodeLookupLogic.js"></script>

<template>
    <div>
        ...
    </div>
</template>

你的 JS 文件 ...

export default {
    name: 'BarcodeLookup',
    data() {
        return {};
    },
    methods: {
        lookupBarcode() {}
    }
};

您的 CSS 文件 ...

.some-class {
    background: whitesmoke;
}

导入组件的工作方式完全相同。

【讨论】：

我只想找到一种更清晰的方法，而不需要一个包含数千行代码的文件。它应该更易于阅读且不会令人困惑。我知道基础知识，但我认为这不是基本的事情
这确实是构建 VueJS 的基础。我设计和构建企业级 VueJS 应用程序。您需要了解 VueJS 基础知识，以及是否要使用已编译、运行时和服务器端渲染，以及每种方法的工作原理。
我知道 vuejs 是如何工作的，我现在使用 x-templates，但我的 idex.html 现在太大而且令人困惑
@lenjah 我已经编辑了我的原始回复以提供进一步的见解。同样，这是非常基本的东西。也许我误解了你的要求......