引入第三方组件库原创

当你在开发一个 VuePress 应用时，由于所有的页面在生成静态 HTML 时都需要通过 Node.js 服务端渲染，因此所有的 Vue 相关代码都应当遵循编写通用代码 (opens new window) (opens new window)的要求。简而言之，请确保只在 beforeMount 或者 mounted 访问浏览器 / DOM 的 API。

// docs/.vuepress/enhanceApp.js

export default ({
    Vue,
    options,
    router,
    siteData,
}) => {
// FIXME:解决加载 import 'v-dialogs' 报错的问题
    Vue.mixin({
        mounted() {
           let dialog = require('v-dialogs')
           Vue.use(dialog)
        },
    });
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

如果你的模块通过 export default 导出一个 Vue 组件，那么你可以动态注册它：

<template>
  <component v-if="dynamicComponent" :is="dynamicComponent"></component>
</template>
<script>
export default {
  data() {
    return {
      dynamicComponent: null
    }
  },
  mounted () {
    import('v-dialogs').then(module => {
      this.dynamicComponent = module.default
    })
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#开源项目 #vuepress

上次更新: 2023/12/09 16:19:24

← vuepress搭建网站优化改进→