这个学期，我开始学习Vue。我们对Vue阶段的第一个“分配”是遵循YouTube video from Traversy Media所提供的说明，并完成该说明。该视频非常棒，很明显，我能够轻松实现其目标。但是，我觉得我不太了解Vue项目中每个文件的相关性，例如index.js，index.html，*。vue。
我发现了一些视频，这些视频创建了一个组件，然后利用了该组件。但是，下载组件时，我感到完全迷失了，特别是：'Vue-Accordion' from github与vue-router一起用作导航。 Vue手风琴说明只是说明要添加特定的代码，但没有说明我应该将该代码添加到哪个文件中。
我通过猜测/假定一个我认为与该任务有关的文件来破解它，例如app.vue，index.js和index.html ...无济于事。当然，我认为更好地了解Vue项目的文件结构/层次结构可以使我更好地了解确切的文件与我手头的任何任务相关。
答案 0 :(得分：3)
好的，所以在上课的时候可以（抱歉，如果我有时解释太基础的东西，只是想变得更彻底）。
这是使用vue init webpack-simple my-project的Vue项目的基本结构：
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>