编程随笔 编程随笔
  • 前端
  • 后端
  • 嵌入式
  • 星球项目
  • 开源项目
  • 海康AGV
  • 四向车
  • 工具类
  • 项目仓库

    • 部署仓库 (opens new window)
    • 代码仓库 (opens new window)
  • vuepress插件

    • 自动生成导航栏与侧边栏 (opens new window)
    • 评论系统 (opens new window)
    • 全文搜索 (opens new window)
    • 选项卡 (opens new window)
    • 自动生成sitemap (opens new window)
  • 自主开发插件

    • 批量操作frontmatter (opens new window)
    • 链接美化 (opens new window)
    • 折叠代码块 (opens new window)
    • 复制代码块 (opens new window)

liyao52033

走运时,要想到倒霉,不要得意得过了头;倒霉时,要想到走运,不必垂头丧气。心态始终保持平衡,情绪始终保持稳定,此亦长寿之道
  • 前端
  • 后端
  • 嵌入式
  • 星球项目
  • 开源项目
  • 海康AGV
  • 四向车
  • 工具类
  • 项目仓库

    • 部署仓库 (opens new window)
    • 代码仓库 (opens new window)
  • vuepress插件

    • 自动生成导航栏与侧边栏 (opens new window)
    • 评论系统 (opens new window)
    • 全文搜索 (opens new window)
    • 选项卡 (opens new window)
    • 自动生成sitemap (opens new window)
  • 自主开发插件

    • 批量操作frontmatter (opens new window)
    • 链接美化 (opens new window)
    • 折叠代码块 (opens new window)
    • 复制代码块 (opens new window)
  • vuepress1.x

    • vuepress搭建网站
    • 引入第三方组件库
    • 优化改进
    • 站点信息模块
    • 增加登录页面
    • 添加登录并启用全局前置守卫
  • kiftd使用docker部署
  • 开源项目
  • vuepress1.x
华总
2023-11-29
0
0

引入第三方组件库原创

当你在开发一个 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
上次更新: 2025/02/18 14:46:10
vuepress搭建网站
优化改进

← vuepress搭建网站 优化改进→

最近更新
01
jFlash使用 原创
03-24
02
中央仓库上传指南 原创
03-23
03
模板生成工具 原创
02-18
04
RTC实时时钟 原创
02-12
05
keil调试 原创
01-21
更多文章>
Copyright © 2023-2025 liyao52033  All Rights Reserved
备案号:鄂ICP备2023023964号-1    
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式