amazon-web-services - 在 Vue + Vuetify 单个文件组件中将图像添加到工具栏

问题描述

我本质上只是重新混合此处可用的代码以用于一个辅助项目：https ://github.com/aws-samples/aws-ai-qna-bot.git

问题：我试图在应用程序抽屉和注销按钮之间的工具栏中插入一个居中的徽标。通常，我可以使用普通的 HTML 和 CSS 轻松完成此任务，但这个项目正在利用 Vue.js 和 Vuetify，我正在尽我最大的努力让自己跟上进度。

我参考了以下文档，包括README.mdgit repo 中的文档：

https://vuetifyjs.com/en/components/images

https://vuejs.org/v2/guide/single-file-components.html

文件路径：qna-bot-template/website/js/admin.vue

<template lang="pug">
  v-app
    v-navigation-drawer(temporary v-model="drawer" app)
      v-toolbar(flat)
        v-list
          v-list-tile
            v-list-tile-title.title Tools
      v-divider
      v-list(dense three-line subheader)
        v-list-tile(v-for="(page,key) in pages" :key="key"
          @click="drawer=false" 
          :href="page.href"
          :id="'page-link-'+page.id"
          :target="page.target || '_self'") 
          v-list-tile-avatar
            v-icon(color="primary") {{page.icon}}
          v-list-tile-content
            v-list-tile-title {{page.title}}
            v-list-tile-sub-title {{page.subTitle}}
        v-list-group( prepend-icon="info" value="true" color="primary")
          v-list-tile(slot="activator") 
            v-list-tile-title QnABot Help
          v-list-tile
            v-list-tile-content 
              v-list-tile-title Version: {{Version}}
              v-list-tile-title BuildDate: {{BuildDate}}
          v-list-tile
            v-list-tile-content
              v-list-tile-title 
                a(href="https://amazon.com/qnabot" target="_blank") General Instructions / QnABot Blog Post
              v-list-tile-title
                a(href="https://aws.amazon.com/blogs/machine-learning/creating-virtual-guided-navigation-using-a-question-and-answer-bot-with-amazon-lex-and-amazon-alexa/" target="_blank") Guided Navigation using QnABot
              v-list-tile-title
                a(href="https://aws.amazon.com/blogs/machine-learning/create-a-questionnaire-bot-with-amazon-lex-and-amazon-alexa/" target="_blank") Create a questionnaire using QnABot
    v-toolbar(app fixed)
      v-toolbar-side-icon.primary--text(
        id="nav-open"
        @click.stop="drawer = !drawer"
      )
      v-toolbar-title 
        v-breadcrumbs
          v-breadcrumbs-item(href='#/edit') {{$store.state.info.StackName}}:{{$store.state.user.name}}
          v-breadcrumbs-item {{page}}
      v-spacer
      v-toolbar-items
        v-btn.primary--text(flat
          id="logout-button"
          @click="logout"
          v-if="login") LogOut
    v-container(fluid id="workspace")
      v-layout(column)
        v-flex
          router-view
    v-footer
</template>

到目前为止，我已经尝试遵循以下语法，我v-spacer在包装模板标签的底部之后添加了它。

v-container
  v-img(:src="/abc/xyz")

这似乎不起作用。

最后我要补充一点，因为这个环境被部署到一个 EC2 实例上（不要认为你可以通过本地将它部署到原型，vue serve或者至少我不能这样做），我不得不这样做非常迂回的方式通过部署构建网页的 S3 存储桶来进行原型设计，然后我make使用这个 webpack 侦听器，每当我修改文件时都会看到它。然后我可以刷新在 S3 存储桶中构建的 index.html 以查看我的更改。我知道，工作流程非常笨拙，但我从来没有在这样的环境中工作过，所以我不确定是否有更好的方法，而且 github repo 中提供的自述文件对如何修改默认布局的细节非常简单.

任何帮助/指针将不胜感激。

标签： amazon-web-servicesvue.jsvuetify.js

amazon-web-services - 在 Vue + Vuetify 单个文件组件中将图像添加到工具栏

问题描述

解决方案

推荐阅读