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

在我的Vue项目中使用来自GitHub的组件。(我是一个完全的初学者),github,vue.js,components,hierarchy,file-structure,Github,Vue.js,Components,Hierarchy,File Structure,这学期,我开始学习Vue。我们在Vue阶段的第一个“任务”是遵循并完成一位工程师提供的说明。这段视频很好,很明显,我能够轻而易举地完成它的目标。但是,我觉得我不太了解Vue项目中每个文件的相关性,例如index.js、index.html、*.Vue 我发现一些视频创建了一个组件,然后利用该组件。然而,当下载一个组件时,我感到完全不知所措,特别是:与vue路由器一起用作导航。vue手风琴指令只是说明添加特定代码,但没有说明应将此代码添加到哪个文件 我通过猜测/假设一个我认为与任务相关的文件(如a

这学期,我开始学习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使您的操作更简单

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