在我的 Vue 项目中使用来自 GitHub 的组件。 （我是一个完整的初学者）
Utilizing a component, from GitHub, in my Vue project. (I'm a complete beginner)
这个学期，我开始学习Vue。 Vue 阶段的第一个 "assignment" 是遵循并完成 YouTube video from Traversy Media 提供的说明。这段视频非常适合观看，很明显我能够毫不费力地完成它的 objective。但是，我觉得我不太了解Vue项目中每个文件的相关性，例如index.js、index.html、*.vue.
我找到了一些创建组件然后使用该组件的视频。但是，我在下载组件时感到完全迷失了，具体来说： 'Vue-Accordion' from github 与vue-router一起用作我的导航。 vue-accordion 说明只是说明要添加特定代码，但没有说明我应该将此代码添加到哪个文件。
我已经通过 guessing/assuming 一个我认为与任务相关的文件破解了它，例如 app.vue、index.js 和 index.html...无济于事。当然，我认为更好地理解 Vue 项目的 file-structure/hierarchy 可以让我更好地了解哪些文件与我手头的任何任务相关。
好的，学校开课了（对不起，如果我有时解释太基础的东西，只是想说的很透彻）。
这是使用 vue init webpack-simple my-project 的 Vue 项目的基本结构：
- 源/
- 资产/
- logo.png
- App.vue
- main.js
- .babelrc
- .gitignore
- index.html
- package.json
- README.md
- webpack.config.js
src 文件夹包含项目的所有源文件。
src/assets 文件夹包含您的所有资产，主要是图像。
App.vue 是您应用的第一个 "view"。
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 直接构建您的项目。该文件是您的构建脚本，您配置它来处理项目的构建过程。
所以，有了这些信息，让我们开始回答您的问题。
如何在 Vue.js 中加载组件？
- 运行
npm install --save vue-accordion（请注意，虽然源代码托管在 Github 上，但包是从此处下载的：https://www.npmjs.com/package/vue-accordion）
- 在你的
index.js 文件中，它负责在全局上下文中将东西加载到你的 Vue 应用程序，你按照 Git 中心页面告诉你的那样做，首先 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>
提示...
- 这只是 Vue 项目的一种设置。 Vue 项目可以像将 Vue 作为脚本加载到静态 index.html 文件一样简单，然后您可以使用常规 javascript 文件进行更烦人的设置，但这是愚蠢且低效的。所以，一个合适的项目有一个 Node.js 文件到 运行 Webpack。根据您配置 Webpack 的方式，您的项目可以与任何其他 Webpack 项目完全不同。
- 阅读更多有关 Webpack 工作原理的信息，这样您就可以拥有一个对您有意义的项目结构。
- 看看 Nuxt，它本质上是其他项目（主要是 Vue 和 Webpack）的集合，可以简化强大的 Vue 项目的制作。您可以坐下来自己设置自己的 Vue 项目和所有工具并获得相同的结果，但 Nuxt 使您的操作更简单。
这个学期，我开始学习Vue。 Vue 阶段的第一个 "assignment" 是遵循并完成 YouTube video from Traversy Media 提供的说明。这段视频非常适合观看，很明显我能够毫不费力地完成它的 objective。但是，我觉得我不太了解Vue项目中每个文件的相关性，例如index.js、index.html、*.vue.
我找到了一些创建组件然后使用该组件的视频。但是，我在下载组件时感到完全迷失了，具体来说： 'Vue-Accordion' from github 与vue-router一起用作我的导航。 vue-accordion 说明只是说明要添加特定代码，但没有说明我应该将此代码添加到哪个文件。
我已经通过 guessing/assuming 一个我认为与任务相关的文件破解了它，例如 app.vue、index.js 和 index.html...无济于事。当然，我认为更好地理解 Vue 项目的 file-structure/hierarchy 可以让我更好地了解哪些文件与我手头的任何任务相关。
好的，学校开课了（对不起，如果我有时解释太基础的东西，只是想说的很透彻）。
这是使用 vue init webpack-simple my-project 的 Vue 项目的基本结构：
- 源/
- 资产/
- logo.png
- App.vue
- main.js
- 资产/
- .babelrc
- .gitignore
- index.html
- package.json
- README.md
- webpack.config.js
src 文件夹包含项目的所有源文件。
src/assets 文件夹包含您的所有资产，主要是图像。
App.vue 是您应用的第一个 "view"。
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 直接构建您的项目。该文件是您的构建脚本，您配置它来处理项目的构建过程。
所以，有了这些信息，让我们开始回答您的问题。
如何在 Vue.js 中加载组件？
- 运行
npm install --save vue-accordion（请注意，虽然源代码托管在 Github 上，但包是从此处下载的：https://www.npmjs.com/package/vue-accordion） - 在你的
index.js文件中，它负责在全局上下文中将东西加载到你的 Vue 应用程序，你按照 Git 中心页面告诉你的那样做，首先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>
提示...
- 这只是 Vue 项目的一种设置。 Vue 项目可以像将 Vue 作为脚本加载到静态 index.html 文件一样简单，然后您可以使用常规 javascript 文件进行更烦人的设置，但这是愚蠢且低效的。所以，一个合适的项目有一个 Node.js 文件到 运行 Webpack。根据您配置 Webpack 的方式，您的项目可以与任何其他 Webpack 项目完全不同。
- 阅读更多有关 Webpack 工作原理的信息，这样您就可以拥有一个对您有意义的项目结构。
- 看看 Nuxt，它本质上是其他项目（主要是 Vue 和 Webpack）的集合，可以简化强大的 Vue 项目的制作。您可以坐下来自己设置自己的 Vue 项目和所有工具并获得相同的结果，但 Nuxt 使您的操作更简单。