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

Posted 2023-02-22

【中文标题】如何将 vuetify 添加到默认 vuepress 主题

【英文标题】：How to add vuetify to default vuepress theme

【发布时间】：2019-03-12 01:13:21

【问题描述】：

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

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

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

另一个选项是弹出默认主题并将 vuetify 添加到其中。不过我不希望弹出默认主题，只需添加 vuetify 即可。

【参考方案1】：

来自oscarteg 的previous answer 让我大部分时间到达那里。这是我必须为 .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()
;

请注意，在传递给options.vuetify 的new Vuetify() 中，您可以设置主题。

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

【讨论】：

这很有帮助 - 应该是公认的答案！！

【参考方案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

【讨论】：

这可以帮助您完成大部分工作，但其余部分请参阅@mike wright 的答案！