Question

是否可以将vuetify添加到默认的vuepress主题？

我只需要在默认主题中添加一些组件，但是最好使用vuetify处理组件中的表单。

我发现使用vuetify的自定义vuepress主题，但是我更喜欢使用默认的vuepress主题。

另一个选择是弹出默认主题并将其添加到其中。但是我宁愿不弹出默认主题，而只是向其添加vuetify。

Answer 1

previous answer的oscarteg带给了我大部分的帮助。这是我对.vuepress/enhanceApp.js文件所做的事情（是的，如果您没有人继续创建它的话）。

import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";
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(Vuetify);
  options.vuetify = new Vuetify({})
};

请注意，在传递给new Vuetify({})的{{1}}中，您可以设置主题。

请参见https://github.com/vuejs/vuepress/issues/681#issuecomment-515704018

Answer 2

最简单的方法是使用vuetify CDN。在您的config.js中添加

module.exports = {
  head: [
          ['link', { rel: 'stylesheet', href: `https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css` }],


    ['script', { src: `https://cdn.jsdelivr.net/npm/vue/dist/vue.js` }],
    ['script', { src: `https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js` }],
  ]
}

类似的东西。参见https://vuepress.vuejs.org/config/#head

另一种方法是安装vuetify软件包并将Vuetify添加到enhanceApp。在您的.vuepress/enhanceApp.js

中看起来像这样

import Vuetify from 'vuetify'

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(Vuetify)
}

请参见https://vuepress.vuejs.org/guide/basic-config.html#theme-configuration

如何将vuetify添加到默认vuepress主题

2 个答案: