vuepress2站点部署及怎么做登录控制

最新推荐文章于 2024-11-07 19:48:34 发布
原创 最新推荐文章于 2024-11-07 19:48:34 发布 · 1.7k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-NC-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

本文详述了使用VuePress2.0搭建网站的全过程，包括初始设置、模板定制、MD文件技巧、主题扩展及登录功能实现。特别指出，针对静态网站生成器的特性，实现登录控制需要结合HTTP服务器。此外，分享了部署网站的注意事项，如SSR错误的排查和处理。

       百家饭团队开发的百家饭OpenAPI平台是用vuepress2.0搭建的，搭建的时候不知道2.0还处在beta状态，所以导致后来踩了一些坑，使用过程中vuepress2.0也从2.0.0-beta.18升到了2.0.0-beta.48，有很多的变化，所以想写一个教程介绍一下vuepress2.0的情况以及使用经验。

大致计划写这些内容吧：

  1. vuepress介绍、选型原因及使用感受（先介绍一下自己用的情况吧）
  2. vuepress2.0使用（搭建一个vuepress支撑的网站）-第一部分
  3. vuepress2.0使用（搭建一个vuepress支撑的网站）-修改默认模板配置
  4. vuepress2.0使用（搭建一个vuepress支撑的网站）-详细配置默认模板
最低0.47元/天 解锁文章
VuePress可以做什么？
在全栈和前端徘徊的程序员
04-25 853
VuePress 是一个基于 Vue.js 的静态站点生成器，专注于文档和内容展示。它结合了 Markdown 的简洁性和 Vue 的灵活性，适合多种场景的开发需求。
VuePress v2 快速搭建属于自己的个人博客网站
最新发布
水w的博客
11-17 1926
快速搭建属于自己的个人博客网站
vuepress-login:为VuePress添加用户授权
05-06
Vuepress登录 为VuePress添加用户授权 清除登录状态 例子 以下站点的实时示例 输入任何用户名和密码以获取经验 源代码 请访问 安装插件 为模态对话框安装v-dialogs插件 # npm npm i v-dialogs -D # yarn yarn add -D v-dialogs 创建登录表单文件 添加用于登录表单的Login.vue文件，显示在“模态”对话框中 < template> < div xss=removed> < div xss=removed>User Name</ div> < div> < input type = " text " class = " form-control " v-model = " username " > </ div>
VuePress 中如何增加用户登录功能
12-13
VuePress是什么？ 先让我们看看 VuePress能干什么？有什么效果？ 很像vue官网的文档页面，因为vuePress就是尤大大的一个力作 vuePress官网介绍介绍的很详细，这里只做搭建VuePress项目教程 在 VuePress 中增加用户登录 VuePress 是 Vuejs 官方提供的一个快速建设文档站点的工具，在简单配置好功能后，需要做的事情就剩下写好一个个 Markdown 文档。 因为 VuePress 提供了可以在 Markdown 中使用 Vue 的能力，所以有时候，希望可以在它的文档功能基础上增加部分常规功能，比如用户登录；有团队希望公司建设的文档内容仅公司
1.1如何在vuepress2.0中实现登录验证
m0_46377386的博客
03-12 604
相对路径：src\.vuepress\components\login.vue -- (如果想要在md文件中可以直接使用components下的vue组件需要在src\.vuepress\config.ts文件夹下进行配置见1.2)思路：利用路由拦截访问用户登陆状态，用户未登录登录跳转到登录页，登录md文件使用login.vue组件，组件内部实现登陆后路由跳转到首页。相对路径：src\.vuepress\client.ts 参见。相对路径：src\login.vue 对应的路由\login。
在vuepress上搭建自己的博客——进阶1（添加登录和评论功能）
haha的博客
01-04 1380
当你在丰富自己的博客的时候，你想来点更加高端一点的操作，想做一个类似博客园一样的平台，那就得要登录和评论功能，看看大家对自己的博客有什么更好的看法和意见。下面就给大家介绍一下怎么给自己的博客添加登录和评论功能。 登录 VuePress 是 Vuejs 官方提供的一个快速建设文档站点的工具，在简单配置好功能后，需要做的事情就剩下写好一个个 Markdown 文档。 因为 VuePress 提供了可以在 Markdown 中使用 Vue 的能力，所以有时候，希望可以在它的文档功能基础上增加部分常规功能，比如.
vuepress基于Vue的简约静态站点生成器
08-12
7. **易于部署**：VuePress生成的站点是纯静态的，可以轻松部署到任何静态文件托管服务上，如GitHub Pages、Netlify或阿里云OSS等。 8. **社区生态**：VuePress拥有活跃的开发者社区，提供了许多预建的主题和插件，...
VuePress-theme-hope 搭建个人博客 2【快速上手】 —— 安装、部署 防止踩坑篇
qq_53895518的博客
12-27 1610
续👆VuePress、VuePress-theme-hope 搭建个人博客 1【快速上手】
5-vuepress文档部署到linux服务器
majc111111的博客
04-11 731
打包命令执行成功后会在.vuepress目录下面生成一个dist文件,我们需要上传该文件到服务器。我这里测试的地址是 https://www.hellocoders.cn/vuepress/在docs目录下打开cmd,输入打包的命令。
vuepress-auth0-auth:使用Auth0的Vuepress身份验证
05-24
使用Auth0对Vuepress应用进行身份验证 项目设置 克隆项目 润yarn 创建一个文件auth_config.js内/src/.vuepress/auth const config = { domain : "YOUR_AUTH0_DOMAIN" , clientId : "YOUR_CLIENT_ID" } ; export default config ; 将占位符替换为您各自的凭据（请确保auth0客户端应用程序的类型为“单页应用程序”） 运行yarn dev启动应用程序
阿里云上linux服务器安装tomcat及vuepress2搭建博客部署
Jovan的博客
08-31 504
2.将下载好的 jdk-linux-x64.tar.gz、apache-tomcat-8.5.78.tar.gz 使用。2.解压apache-tomcat压缩包并移动到tomcat文件夹下。1.具体的实名认证和备案流程可去官网文档查看 （此处忽略）白嫖了试用期的服务器玩了一阵子，重新购买一个服务器。传输到服务器上，首先进行对java环境的配置。访问你的公网Ip地址：8080端口。配置参数：1核2G 贷款1M。1.新建tomcat文件夹。登录方式：1.远程登录。4.启动显示ok成功。看到下面页面显示成功。
vuepress项目部署到自己的服务器,快速创建vuepress项目-使用vuepress+Markdown写文档并发布为网站...
weixin_42300398的博客
08-06 957
原标题：快速创建vuepress项目-使用vuepress+Markdown写文档并发布为网站搭建一个vuepress项目项目初始化安装配置VuePress编写文档接下来你还可以配置各类主题终极发布vuepress的官方文档：https://vuepress.vuejs.org/zh/guide/参考：https://segmentfault.com/a/1190000016333850https...
【vue2.0后台项目之登陆】01登陆开发流程分析
zbcwmq的博客
03-29 895
本文将致力于描述一个vue2.0后台系统的登陆业务流程，从后台项目常用的模板 vue-admin-template模板分析，到axios的二次封装，发起请求接口都会涉及到。不足之处，还请各位大佬指正。后台管理系统API接口在线文档1后台管理系统API接口在线文档2登陆接口在线文档。
如何监测系统用户是否登录_VuePress 中如何增加用户登录功能
weixin_39946313的博客
12-04 446
VuePress是什么？先让我们看看VuePress能干什么？有什么效果？很像vue官网的文档页面，因为vuePress就是尤大大的一个力作vuePress官网介绍介绍的很详细，这里只做搭建VuePress项目教程在VuePress中增加用户登录VuePress是Vuejs官方提供的一个快速建设文档站点的工具，在简单配置好功能后，需要做的事情就剩下写好一个个Markdown文档。因为VuePres...
Vue实现登录功能
娜的博客
11-07 2475
总体来说，这段代码主要负责处理用户登录成功后的一系列操作，包括权限控制、路由跳转、消息提示和加载状态管理。方法用于获取有当前用户权限标识的路由数组，并进行对原路由的替换。方法用于设置递归过滤有权限的路由到 Pinia 的 routesList 中，并缓存多级嵌套数组处理后的一维数组。方法中创建的加载状态元素包含了一组加载动画的 HTML 结构，通过设置不同的类名和样式来展示加载效果。方法中，将创建的加载状态元素插入到页面的顶部，显示加载状态。这些方法共同实现了前端控制路由的权限管理和动态路由添加的功能。
服务器CentOS+宝塔面板快速部署vuepress（自动发布静态）
08-15 4172
很多小伙伴需求将vuepress部署到服务器，且服务器装了宝塔面板（嗯，我就是这样），网上找了一圈，几乎没有这方面的步骤分享。经过小编自己研究+向大佬咨询，终于学会了，下面我将步骤分享给大家。...
【Vue】封装api接口 - 登录功能
qq_39921135的博客
06-11 250
提供登录 Api 函数。
Vue小模块之用户登录功能（四）用Express创建后台服务器
究极死胖兽的博客
03-14 3667
Vue小模块之用户登录功能（四）用Express创建后台服务器 技术栈 Vue全家桶： 前端框架 Vue.js 状态管理 Vuex 动态路由匹配 vue-router http服务 axios 模块打包 webpack UI框架 element 数据服务器 服务器端 node.js 基于node的web框架 express 分布式数据库 mongodb mongodb工具...
VuePress个人网站部署：Node服务程序搭建教程
2. VuePress：VuePress是一个静态站点生成器，基于Vue.js，专门为技术文档创建而设计。VuePress通过结合Markdown文件和Vue组件，生成静态的网站内容，这使得内容编写和网站构建更为高效。 3. 静态网站服务器：静态...
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

百家饭AI

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值