Dav*_* C. 3 components github hierarchy file-structure vue.js
这个学期，我开始学习Vue。我们在 Vue 阶段的第一个“任务”是遵循并完成来自 Traversy Media的YouTube 视频提供的说明。这段视频很好看，很明显我能够毫不费力地完成它的目标。但是，我觉得我不是很了解Vue项目中每个文件的相关性，例如index.js，index.html，*.vue。
我找到了一些创建组件然后使用该组件的视频。但是，在下载组件时，我感觉完全迷失了方向，特别是：来自 github 的“Vue-Accordion”与 vue-router 一起用作我的导航。vue-accordion 指令只是声明添加特定代码，但没有说明我应该将这段代码添加到哪个文件。
我通过猜测/假设我认为与任务相关的文件来破解它，例如 app.vue、index.js 和 index.html ......无济于事。当然，我认为更好地理解 Vue 项目的文件结构/层次结构可以让我更好地了解哪些文件与我可能拥有的任何手头任务相关。
好的，所以学校正在上课（对不起，如果我有时解释太基本的东西，只是想做到彻底）。
以下是使用 Vue 项目的基本结构vue init webpack-simple my-project：
该src文件夹包含项目的所有源文件。
该src/assets文件夹包含您的所有资产，主要是图像。
App.vue 是您的应用程序的第一个“视图”。
main.js是项目的主要脚本，您可以在其中配置和运行 Vue。这是您加载应用程序全局范围内应该存在的任何内容的地方。
.babelrc 配置 babel 工具如何检查你的代码。
.gitignore 告诉 Git 在提交时忽略某些文件。
index.html是发送到客户端浏览器的页面。这是我们加载 main.js 文件并放置您需要的任何和所有元数据的地方（除非您使用例如 vue-meta 来处理它）。请注意<div id="app">html 标签，这是您所有 Vue 文件安装到的位置。
package.json是我们的 npm 配置文件。例如，当您运行 npm install --save component-from-npm-name 时，它会保存在此处，因此您可以稍后运行 npm install 以获取项目的所有依赖项。
README.md是 Markdown 语言格式的文档文件。它在例如 Github 或 Gitlab 上显示为您项目的首页。
webpack.config.js是一个 Node.js 文件，负责在你的项目上运行 Webpack。Vue 可以在没有 Webpack 的情况下使用，但我不推荐它。您可以node webpack.config.js直接运行以构建您的项目。此文件是您的构建脚本，您将其配置为处理项目的构建过程。
所以，有了这些信息，让我们来回答你的问题。
npm install --save vue-accordion（请注意，虽然源代码托管在 Github 上，但包是从这里下载的：https : //www.npmjs.com/package/vue-accordion）index.js文件中，负责在全局上下文中将内容加载到您的 Vue 应用程序中，您按照 Github 页面的指示执行操作import {vueAccordion} from 'vue-accordion'，然后首先运行Vue.component('vue-accordion', vueAccordion)以在全局上下文中注册它。这里的所有都是它的。index.js是您的 Vue 应用程序的入口点，而webpack.config.js是您的构建脚本。
然而，有一个替代的解决方案来加载组件。在前面的变体中，我们加载它index.js以在全局上下文中加载它，即您现在可以在应用程序的任何位置使用该组件，但是如果您只想根据需要加载它怎么办（您想要这样做是出于性能原因）？
好吧，在您的App.vue文件中，您有一个<script>标签，您可以在其中配置该 Vue 组件中的内容（所有 .vue 文件都是 Vue 组件，即使您将它们称为路由、页面、视图或任何表明其用途的东西）。为了不在全局上下文中加载组件，而是在组件上下文中加载组件，您需要在 中执行以下操作App.vue：
<script>
import Accordion from 'vue-accordion';
export default {
components: {
'vue-accordion': Accordion
}
</script>