组件的外部 Html 和 JS？
Posted
技术标签:
【中文标题】组件的外部 Html 和 JS？【英文标题】：External Html and JS for components? 【发布时间】：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>
感谢大家的帮助
【问题讨论】：
【参考方案1】：这看起来毫无帮助，但最终你需要了解 VueJS 的工作原理。 *** 不是来教你框架的基础知识的。
以下是一些对 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 我已经编辑了我的原始回复以提供进一步的见解。同样，这是非常基本的东西。也许我误解了你的要求......以上是关于组件的外部 Html 和 JS？的主要内容，如果未能解决你的问题，请参考以下文章