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

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

  •  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

    推荐文章