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

Question

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

我只需要向默认主题添加几个组件，但是使用 vuetify 处理组件中的表单会很好。

我找到了一个使用 vuetify 的自定义 vuepress 主题，但是我更喜欢使用默认的 vuepress 主题。

另一种选择是弹出默认主题并向其添加 vuetify。但是，我不想弹出默认主题，只需向其中添加 vuetify。

Answer 1

来自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({})传递给options.vuetify您可以设置您的主题。

见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