如何在vuepress 2中使用类星体框架？

Question

我现在在类星体2.7.1中使用vuepress2，如下所示：

import { Quasar } from 'quasar';

export default defineClientAppEnhance(({ app, router, siteData }) => {
  app.use(Quasar);
}

@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons|Material+Icons+Outlined);
@import 'quasar/src/css/variables.sass';
@import 'quasar/src/css/core/colors.sass';
.quasar-comp {
  @import 'quasar/src/css/index.sass';
}
/* I wrap the custome component in class .quasar-comp 
   so that the style from quasar won't conflict with style from vuepress. */

但有两个问题：

类星体的样式不能在某些组件上工作，比如q-menu.

• It或q-btn-dropdown在dev模式(npm run docs:dev)上工作良好，但是build(npm run docs:build).

失败。

✔ Compiling with vite - done
✖ Rendering pages - failed
TypeError: Cannot convert undefined or null to object
    at Function.assign (<anonymous>)
    at installQuasar (/Users/lxm/Documents/neo/leaneo-docs/node_modules/quasar/dist/quasar.cjs.prod.js:6:15228)
    at Object.install (/Users/lxm/Documents/neo/leaneo-docs/node_modules/quasar/dist/quasar.cjs.prod.js:6:479348)
    at Object.use (/Users/lxm/Documents/neo/leaneo-docs/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:3393:28)
    at /Users/lxm/Documents/neo/leaneo-docs/docs/.vuepress/dist/.server/app.js:3745:7
    at createVueApp (/Users/lxm/Documents/neo/leaneo-docs/docs/.vuepress/dist/.server/app.js:4177:11)
    at async /Users/lxm/Documents/neo/leaneo-docs/node_modules/vuepress-vite/node_modules/@vuepress/bundler-vite/lib/build/build.js:49:52
    at async /Users/lxm/Documents/neo/leaneo-docs/node_modules/@vuepress/utils/lib/withSpinner.js:12:24
    at async build (/Users/lxm/Documents/neo/leaneo-docs/node_modules/vuepress-vite/node_modules/@vuepress/bundler-vite/lib/build/build.js:34:5)
    at async /Users/lxm/Documents/neo/leaneo-docs/node_modules/@vuepress/cli/lib/commands/build/createBuild.js:51:5

有更好的方法让类星体和vuepress一起工作吗？

Answer 1

下面是Vuepress 2 (beta)和类星体的实现。

首先，使用新的语法将类星体安装到Vuepress中，并导入所有样式：

client.ts

import { defineClientConfig } from "@vuepress/client";
import { Quasar } from "quasar";

import 'quasar/src/css/index.sass';

export default defineClientConfig({
  enhance({app, router, siteData}) {
    app.use(Quasar);
  },
  setup() {},
  rootComponents: [],
});

然后，如果使用vite，则忽略来自sass的弃用错误。

config.ts

import { viteBundler } from '@vuepress/bundler-vite'
import { defineUserConfig } from '@vuepress/cli'

export default defineUserConfig({
  // your config
  ...
  
  bundler: viteBundler({
    viteOptions: {
      css: {
        preprocessorOptions: {
          scss: {
            sassOptions: {
              // ignore sass deprecation errors
              quietDeps: true
              }
            }
          }
        }
      },
  }),
});

希望它有帮助:)

Answer 2

类星体需要一些全球性的定义(如果是SSR)。下面的解决方案在客户端起作用，所以一定要在<ClientOnly>中包装您的自定义类星体组件！

// .vuepress/config.ts
bundler: viteBundler({
  viteOptions: {
    define: {
      __QUASAR_VERSION__: `'dev'`,
      __QUASAR_SSR__: false,
      __QUASAR_SSR_SERVER__: false,
      __QUASAR_SSR_CLIENT__: false,
      __QUASAR_SSR_PWA__: false
    }
  }
}),

// .vuepress/client.ts
import { defineClientConfig } from '@vuepress/client'
import Quasar from "quasar/src/install-quasar.js";

// optionally import your styles here
// import 'quasar/src/css/index.sass';

export default defineClientConfig({
  enhance({ app, router, siteData }) {
    app.use(Quasar);
  },
  setup() {
  },
  rootComponents: [],
});

<!-- README.md -->
<ClientOnly>
  <MyComponent />
</ClientOnly>