Question

我对如何使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

关于该主题，我还发现了其他一些问题，但是似乎都没有答案。

在Vuepress组件中使用Vuetify

0 个答案: