所有分类

Vuepress1.x 分类下的文章

引入第三方组件库

文章介绍了在VuePress应用中引入第三方组件库时需注意的通用代码要求。由于VuePress页面通过Node.js服务端渲染生成静态HTML,所有Vue相关代码必须遵循编写通用代码的原则,确保仅在`beforeMount`或`mounted`生命周期中访问浏览器或DOM API。同时,文章提到若模块通过`export default`导出Vue组件,可以动态注册该组件。

优化改进

本文介绍了VuePress项目优化改进的五个方面:解决打包时因文件过大(超过500KB)导致的Babel警告,可通过提高内存参数或配置.babelrc文件处理;支持侧边栏显示四级标题;将URL中的中英文及连字符替换为六位随机字符;通过安装和配置PWA插件实现更新提示功能,包括弹窗和Service Worker;以及解决因文件夹或文件名使用中文而导致的VueRouter路径警告,需修改内部路由文件进行编码处理。

站点信息模块

本文介绍了如何在Vdoing主题的VuePress博客中搭建站点信息模块,包括首页的站点信息和文章页的浏览量统计。主要内容涉及使用自建不蒜子服务统计访问量,通过添加特定代码文件实现网站字数、文章数量、运行时间等功能,并详细说明了组件的创建、配置与集成步骤。文章还提醒了跨主题集成时需自行适配样式与挂载元素,以及部署时需通过git commit解决时间显示问题。

增加登录页面

本文介绍了在VuePress项目中增加登录页面的步骤。首先安装v-dialogs模态对话框插件,然后创建登录表单文件,包括helper.js和Login.vue组件。最后通过配置enhanceApp.js文件,实现用户授权验证功能:未授权时显示登录对话框,授权成功后即可访问文档内容。

添加登录并启用全局前置守卫

本文介绍了为VuePress项目添加登录功能并启用全局前置守卫的步骤。主要内容包括:新增登录页面和路由,添加登录验证逻辑,安装并使用模态对话框插件,在enhanceApp.js中执行路由守卫逻辑。同时,为了弥补enhanceApp.js在页面刷新或直接访问路由时无法触发的不足,还创建了全局组件LoginInfo,确保未登录时能重定向到登录页,最后在主题配置中完成相应设置。