vuetify.js - 如何将 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