電子vue應用程序內的vue-material mdAutocomplete - 設置問題

Question

我正在嘗試使用電子 vue 種子應用程序，並將 electron 升級到 8 並將 vue 升級到最新版本。 我在我的 src/renderer/router/index.js 中安裝 vue-material 組件：

import Vue from 'vue'
import Router from 'vue-router'
import { MdButton, MdContent, MdTabs, MdAutocomplete } from 'vue-material/dist/components'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default-dark.css'

Vue.use(Router)
Vue.use(MdButton)
Vue.use(MdContent)
Vue.use(MdTabs)
Vue.use(MdAutocomplete)

然后我有src/renderer/App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'pdq-app'
  }
</script>

<style>

  @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;600&display=swap|Roboto:400,500,700,400italic|Material+Icons');

  html {
    font-family: 'Source Code Pro', monospace;
  }

</style>

我正在使用 CommandLine.vue 組件在 CommandLine.vue 模板上繪制自動完成功能：

<template>
  <main>
    <main-menu></main-menu>
    <command></command>
  </main>
</template>

<script>
  import MainMenu from './MainMenu'
  import Command from './CommandLine/Command'

  export default {
    name: 'command-line',
    components: { MainMenu, Command },
    methods: {
      open (link) {
        this.$electron.shell.openExternal(link)
      }
    }
  }
</script>

<style>

</style>

因此，自動完成組件是：

<template>
  <div>
    <md-autocomplete v-model="selectedCountry" :md-options="countries">
      <label>Country</label>
    </md-autocomplete>

    <md-autocomplete v-model="selectedEmployee" :md-options="employees" md-dense>
      <label>Employees</label>
    </md-autocomplete>
  </div>
</template>

<script>
  export default {
    name: 'AutocompleteStatic',
    data: () => ({
      selectedCountry: null,
      selectedEmployee: null,
      countries: [
        'Algeria',
        'Argentina',
        'Brazil',
        'Canada',
        'Italy',
        'Japan',
        'United Kingdom',
        'United States'
      ],
      employees: [
        'Jim Halpert',
        'Dwight Schrute',
        'Michael Scott',
        'Pam Beesly',
        'Angela Martin',
        'Kelly Kapoor',
        'Ryan Howard',
        'Kevin Malone',
        'Creed Bratton',
        'Oscar Nunez',
        'Toby Flenderson',
        'Stanley Hudson',
        'Meredith Palmer',
        'Phyllis Lapin-Vance'
      ]
    })
  }
</script>

問題是我不確定我缺少什么來顯示輸入控件 - 它呈現不可見。 在呈現的 HTML 中存在一個md-input標記，但似乎我缺少一些繪制內容的依賴項：

我缺少什么來繪制完整的自動完成功能？

Answer 1

看起來我需要添加一些依賴項： MdField 、 MdMenu和MdList 。 在文檔中很難看到這一點； 我想如果我要導入整個VueMaterial ，那將不是問題。

import Vue from 'vue'
import Router from 'vue-router'
import {
  MdButton,
  MdCard,
  MdContent,
  MdTabs,
  MdAutocomplete,
  MdField,
  MdMenu,
  MdList
} from 'vue-material/dist/components'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default-dark.css'

Vue.use(Router)
Vue.use(MdAutocomplete)
Vue.use(MdField)
Vue.use(MdMenu)
Vue.use(MdList)
Vue.use(MdButton)
Vue.use(MdCard)
Vue.use(MdContent)
Vue.use(MdTabs)

// export default new Router({
// ...