代码之家 › 专栏 › 技术社区 › TimB

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

vuepress vuetify.js

0

TimB · 技术社区 · 6 年前

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

另一个选项是弹出默认主题并向其中添加vuetify。不过,我不想弹出默认主题,只想添加vuetify到它。

1 回复 | 直到 6 年前

1

7

Mike Wright 5 年前

这个 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({}) 传递给 options.vuetify

看到了吗 https://github.com/vuejs/vuepress/issues/681#issuecomment-515704018

2

4

oscarteg 6 年前

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