在我的Vue项目中使用来自GitHub的组件。（我是一个完全的初学者）

这学期，我开始学习Vue。我们在Vue阶段的第一个“任务”是遵循并完成一位工程师提供的说明。这段视频很好，很明显，我能够轻而易举地完成它的目标。但是，我觉得我不太了解Vue项目中每个文件的相关性，例如index.js、index.html、*.Vue

我发现一些视频创建了一个组件，然后利用该组件。然而，当下载一个组件时，我感到完全不知所措，特别是：与vue路由器一起用作导航。vue手风琴指令只是说明添加特定代码，但没有说明应将此代码添加到哪个文件

---

我通过猜测/假设一个我认为与任务相关的文件（如app.vue、index.js和index.html）来破解它。。。无济于事。当然，我认为更好地理解Vue项目的文件结构/层次结构可以让我更好地了解哪些文件与我手头的任何任务相关。

好吧，学校正在上课（抱歉，如果我有时解释太基本的东西，只是想彻底解释一下）

以下是使用

Vue init webpack simple my project

的Vue项目的基本结构：

• src/
  • 资产/
    • logo.png
  • App.vue
  • main.js
• B.法律改革委员会
• .gitignore
• index.html
• package.json
• 自述文件
• webpack.config.js

src

文件夹包含项目的所有源文件

src/assets

文件夹包含您的所有资产，主要是图像

App.vue

是应用程序的第一个“视图”

main.js

是您配置和运行Vue的项目的主脚本。在这里，您可以加载应用程序全局范围内应该存在的任何内容

.babelrc

配置babel工具应如何对代码进行语法检查

.gitignore

告诉Git忽略提交的某些文件

index.html

是发送到客户端浏览器的页面。在这里，我们加载main.js文件，并放置您需要的任何和所有元数据（除非您使用vue meta来处理它）。请注意，

html标记，这是所有Vue文件装载到的位置

package.json

是我们的npm配置文件。当您运行例如npm安装--从npm名称保存组件时，它保存在此处，以便您可以稍后运行npm安装以获取项目的所有依赖项

README.md

是一个标记语言格式的文档文件。它显示为您项目的首页，例如Github或Gitlab

webpack.config.js

是一个Node.js文件，负责在项目上运行webpack。Vue可以在没有Webpack的情况下使用，但我不推荐它。您可以直接运行

节点webpack.config.js

来构建项目。此文件是您的构建脚本，您已将其配置为处理项目的构建过程

因此，有了这些信息，让我们开始讨论你的问题

如何在Vue.js中加载组件？

运行

npm安装--save vue accordion

（请注意，虽然源代码托管在Github上，但软件包是从这里下载的：）

在负责在全局上下文中将内容加载到Vue应用程序的

index.js

文件中，您可以按照Github页面的指示执行操作，首先

从“Vue accordion”

导入{vueAccordion}，然后运行

Vue.component（'Vue-accordion'，vueAccordion）

在全局上下文中注册它

就这些

index.js

是Vue应用程序的入口点，而

webpack.config.js

是构建脚本

但是，有一种替代方案可以加载组件。在上一个版本中，我们将其加载到

index.js

中，以在全局上下文中加载它，也就是说，您现在可以在应用程序中的任何位置使用该组件，但是如果您只想根据需要加载它（出于性能原因，您希望这样做），该怎么办

嗯，在您的

App.vue

文件中，您有一个

标记，您可以在该vue组件中配置内容（所有.vue文件都是vue组件，即使您将它们称为路由、页面、视图或任何指定用途的文件）。为了不在全局上下文中加载组件，而是在组件上下文中加载组件，您需要在

App.vue

中执行以下操作：

<script>
import Accordion from 'vue-accordion';
export default {
    components: {
        'vue-accordion': Accordion
    }
</script>

从“vue手风琴”导入手风琴；
导出默认值{
组成部分：{
“vue手风琴”：手风琴
}

提示。。。

这只是Vue项目的一个设置。Vue项目可以很简单，只需将Vue作为脚本加载到静态index.html文件中，然后您就可以使用常规javascript文件进行更烦人的设置，但这既愚蠢又低效。因此，一个合适的项目有一个Node.js文件来运行Webpack。具体取决于您如何配置Webpack项目的行为可能与任何其他网页包项目完全不同

阅读更多关于Webpack如何工作的信息，这样您就可以拥有一个对您有意义的项目结构

看看Nuxt，它本质上是一个其他项目的集合（主要是Vue和Webpack），它简化了一个强大的Vue项目的制作。您可以自己坐下来设置自己的Vue项目和所有工具，并获得相同的结果，但Nuxt使您的操作更简单

---

对于初学者来说，这是一个非常透彻和简单易懂的答案，就像问题发起者一样。你的回答正是我需要理解的，这样我才能确切地知道我在做什么，为什么！感谢你花这么多时间提供如此详尽的答案！