3

我对如何让 Vuetify 在 Vuepress 组件中完全工作感到有些困惑。我已经让它工作了，但遇到了几个障碍。Vuetify 安装在我的 Vuepress 项目中，我添加了一个带有以下内容的 enhanceApp.js：

import axios from 'axios'
import moment from 'moment'
import Vuetify from './node_modules/vuetify/dist/vuetify.min.js'

export default ({
    Vue, // the version of Vue being used in the VuePress app
    options, // the options for the root Vue instance
    router, // the router instance for the app
    siteData // site metadata
}) => {
    Vue.use(axios)
    Vue.use(moment)
    Vue.use(Vuetify)
}

在我的组件中，我修改了 mount() 方法：

mounted () {
    import('../node_modules/vuetify/dist/vuetify.min.js').then(module => {
    // this.fetchHotels()
    axios.get(this.apiLink + 'continents')
      .then(response => {
        this.continents = response.data
      })
          .catch(error => {
            console.log(error)
        })
    })
  }

正如 Vuepress 文档的此页面所建议的那样： https ://vuepress.vuejs.org/guide/using-vue.html#browser-api-access-restrictions

这应该为组件需要访问 DOM 时提供解决方法。然而，虽然 Vuetify 的布局部分按预期工作，但日期选择器弹出窗口（我想使用 Vuetify 的原因之一）没有显示在正确的位置，并且没有按预期格式化。控制台显示警告：

[Vuetify] Unable to locate target [data-app]

我假设这是因为组件试图访问 DOM 但不能。上面的页面有点暗示这是开发环境的一个问题，但我无法让 vuepress 构建工作。它一直在组件上失败。

Error rendering /indonesia/bali/hotels-resorts.html:
Error: render function or template not defined in component: HotelList

我发现了有关此主题的其他一些问题，但似乎没有一个问题得到解答。

4

0 回答 0