vuepress2.0使用教程（4）- 搭建一个vuepress支撑的网站 -详细配置默认模板

原创 已于 2022-09-30 17:00:41 修改 · 2k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-NC-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #开发语言

于 2022-08-05 10:26:12 首次发布
本文档详尽介绍了使用VuePress2.0搭建网站的全过程，包括基础配置、模板修改、Markdown玩法、主题扩展、国际化设置、版本仓库配合及可访问性配置。特别提醒，针对旧版教程中的过时信息，如clientAppEnhance.js的修改。同时，分享了作者的使用体验和踩坑经验，提供了丰富的配置示例和功能演示。

       百家饭团队开发的百家饭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支撑的网站）-详细配置默认模板
  5. vuepress2.0使用（搭建一个vuepress支撑的网站）-md文件的玩法
  6. vuepress2.0使用（扩展默认主题）- 准备及扩展页面组件
  7. vuepress2.0使用（扩展默认主题）- 提供更多页面模板并引入ElementUI
  8. vuepress2.0使用（扩展默认主题）- 扩展MD页面功能（Section扩展及自定义语法）
  9. vuepress2.0使用（扩展默认主题）- 引入百度搜索支持及其他库的引用
  10. 编写vuepress主题（自定义自己的框架，开发复杂程序）
  11. vuepress2.0使用——编译及站点部署
  12. vue
最低0.47元/天 解锁文章
vuepress2.0使用教程（3）- vuepress2.0使用（搭建一个vuepress支撑的网站）-修改默认模板配置
baijiafan的博客
07-31 3059
vuepress2.0使用（搭建一个vuepress支撑的网站）-修改默认模板配置
vuepress2.0使用教程（2）-使用vuepress 2.0搭建一个简单站点
baijiafan的博客
07-30 2347
vuepress2.0使用教程（2）-使用vuepress 2.0搭建一个简单站点
project-vuepress：我的笔记的Vuepress模板
02-12
欢迎来到Vuepress项目 :waving_hand: Vuepress网站，提供我的笔记和个人博客新闻 :house: 安装 docs:vuepress dev 建立 npm run docs:build 作者 :bust_in_silhouette: 爆笑 ： 表示支持 给一个 :white_medium_star: 如果这个项目对您有帮助！ 该自述文件是使用 :red_heart_selector: 通过
vuepress_admin:vuepress的管理模板，笔记的源码网站-> http
03-23
成为管理我的整个笔记文档 说明： :hundred_points:成为分享一些笔记也是用来记录自己的学习旅程的一种方法，感谢每一个贡献的朋友，还在不断完善中 贡献者感谢每一个贡献的朋友！ 完成的功能 vuepress建设成功 缬氨酸评论系统 返回顶部插件 目录结构化，更具体 增加了反问面试官 增加了面试题大全 增加了2018年大厂面试题 使用styl管理变量 较少的 ass 夜间模式 Nginx的 网络基础 linux基础 思维导图 性能优化大全 前端安全 增加webhooks 增加自动化测试 高阶面试题（常见手写面试题） 正在加载中 D3 图表 SVG jQuery Mobile Zepto 时间轴 懒加载 瀑布流 Animate.js Swiper.js 芋头学习 :party_popper:希望可以一​​直坚持下去 安装 git clone https://github.com/2662419405/vu
vuepress-starter:一个Vuepress模板
05-19
vuepress-starter 个人学习了解 vuepress 项目使用 .github 文件夹中存放了 pull request 和 issue 的模版 usage # 开发 yarn docs:dev # 打包 yarn docs:build # 规范提交 yarn cz # 部署github page yarn gh-page:sh yarn gh-page # 修改对应版本，打上tag yarn release # 第一次提交 yarn release --first-release # 更新版本 yarn release --release-as {major,minor,patch} # 更新版本号 yarn release --release-as 1.1.0 #推送对应的 yarn git:push # 需要npm 发布就需要publish npm publish #gi
推荐一款强大的VuePress应用模板：VuePress-Web-App
gitblog_00089的博客
04-07 567
推荐一款强大的VuePress应用模板：VuePress-Web-App 如果你是前端开发者，热爱 Vue.js，并且经常需要构建文档网站或静态博客，那么我有一个值得你关注的项目——。这是一个基于VuePress的高级Web应用程序模板，旨在简化你的工作流程，提供美观、响应式的布局和丰富的功能。 项目简介 VuePress-Web-App是一个开箱即用的模板，它将VuePress的强大与现代Web...
Vuepress - 纯净无冗余代码开发模板（直接套内容）
🏆 前端领域优质创作者
05-24 1465
效果图 纯净无冗余代码及配置文件，干净整洁的 vuePress 模板。 基于此模板，拒绝繁琐的配置及搭建，直接根据模板进行嵌套及新增内容。 项目代码 Gitee 仓库：https://gitee.com/wangjiabin-x/vuepressTemplate 克隆仓库，vuepress dev docs 运行即可。 ...
vuepress2.0使用教程（10）-从零开始搭建自定义模板
baijiafan的博客
09-16 2634
为vuepress2编写自定义模板
vuepress2.0使用教程（6）-扩展默认模板之准备及扩展页面组件
baijiafan的博客
08-12 1988
vuepress 2.0全功能介绍，第三部分，默认主题的扩展
VuePress初学之利用模板theme创建一个个人博客网站
孙君的空间站
12-24 3104
基本学习了和html还有CSS相关的知识，了解了Vue的部署，简单写了个页面发布在自己的云服务器上，现在想要搭建一个更精致的页面，通过搜索了解到还有一个VuePress这个东西，是一个静态网页发布器，基于Vue，学习试一下本文属于原创文章，转载请著名作者出处并置顶！！
vuepress-yobrave-template:模板
05-01
家 heroImage actionText 动作链接 页脚 真的 /hero.png 开始→ /指导/ 麻省理工学院许可| 版权所有:copyright:2018-至今Evan You 简约至上 以markdown为中心的项目结构的最少设置可以帮助您专注于写作。 · Vue动力 享受Vue + Webpack的开发经验，在markdown中使用Vue组件，并使用Vue开发自定义主题。 表演者 VuePress为每个页面生成预渲染的静态HTML，并在加载页面后作为SPA运行。 像1，2，3一样简单 从模板复制 # install yarn global add vuepress # OR npm install -g vuepress # clone templete git clone https://github.com/chinanf-boy/vuepress-yobrave-template
vuepress-quickstart:VuePress项目的入门模板
03-28
VuePress快速入门 VuePress项目的入门模板 预览 启动您的VuePress项目 获得一个类似这样的项目。 为什么选择VuePress？ 使用降价促销内容建立一个现代化的静态网站。 非常适合文档站点。 从首页： 简约至上-以减价为中心的项目结构的最少设置有助于您专注于写作。 Vue供电-享受Vue + Webpack的开发经验，在markdown中使用Vue组件，并使用Vue开发自定义主题。 性能-VuePress为每个页面生成预渲染的静态HTML ，并在页面加载后作为SPA运行。 要了解有关VuePress的更多信息，请参见我的页面。 安装 安装系统依赖项 安装Node.js和Yarn-请参阅。 克隆 从此模板或模板存储库创建一个新项目。 克隆仓库。 $ git clone git@github.com:MichaelCurrin/vuepress-quick
推荐一个很好的vuepress doc模板
阿信AI实验室
10-16 1008
直接上图吧，比较适合做知识库或项目文档库。
探索 VuePress 博客模板：搭建个人博客的快速通道
最新发布
gitblog_00090的博客
05-30 531
探索 VuePress 博客模板：搭建个人博客的快速通道 在数字世界的浩瀚星空中，每个人的思考与分享都是一颗独特的星辰。今天，我们要介绍的是一个虽然已废弃但仍然充满启发性的项目——VuePress Blog Boilerplate。尽管该项目现已被新版本替代，但它依然值得我们深入挖掘其价值，尤其是对于那些热爱Vue.js生态和想要构建个性化博客的朋友。 项目介绍 VuePress Blog Boi...
Vuepress 文档脚手架(vue 3.x+vuepress2.x+vite+ts)
IT飞牛
06-19 5542
这里提供一个解决方案，那就是Vuepress框架，最新的 Vuepress2.x 框架已经蓄势待发，支持Vue3.x。创建目录 2、初始化项目 3、将 VuePress 安装为本地依赖 4、在 package.json 中添加一些 scripts 5、将默认的临时目录和缓存目录添加到 .gitignore 文件中 6、 创建你的第一篇文档 7、在本地启动服务器来开发你的文档网站 VuePress 会在 启动一个热重载的开发服务器。当你修改你的 Markdown 文件时，浏览器中的内容也会自动更
Vuepress 2从0-1保姆级进阶教程——美化与模板
passwordgloo的博客
03-24 1863
介绍vuepress 2自制模版
推荐一个vuepress模板，一键快速搭建文档站
zsevgymko的博客
02-16 1464
介绍 vuepress-template是一个简单的VuePress案例模板，目的是让用户可以直接clone这个仓库，作为初始化一个VuePress网站启动项目，然后在这个项目的基础上新增自定义配置和功能。 为什么推荐这个模板？ 有部分刚接触VuePress的同学，按照官方教程操作下来会遇到大大小小的问题，特别是文件目录、打包、插件安装这几块内容。如果直接复制官方的仓库又会比较大，所以如果有一个这样的简洁的初始模板，直接启动使用就很方便了。 而且对应的插件能直接看到效果，使用起来更能得心应手。 在线案例 在
01.Vuepress2.x 创建自己的技术文档站
前端技术
08-04 2377
一、简介 Vuepress2.x 英文官网 Vuepress2.x 中文官网 二、安装 参考 步骤1：新建一个文件夹，如：Doc2.0 步骤2：进入文件夹目录，新建 package.json，命令： npm init 步骤3：安装本地依赖，我当时使用的是如下版本，可在此找到自己需要的 npm i vuepress@2.0.0-beta.23 步骤4：在 package.json 中添加如下信息 "scripts": { "docs:dev": "vuepress dev
【亲测免费】 推荐一款超实用的 VuePress 主题：VuePress Theme Resume
gitblog_00021的博客
03-27 880
推荐一款超实用的 VuePress 主题：VuePress Theme Resume ，这是一个专门用于创建个人简历或在线作品集的模板。 项目简介 VuePress Theme Resume 设计简洁，风格优雅，能够帮助您快速构建一份专业的在线简历。通过 Markdown 格式，您可以轻松地添加个人信息、教育背景、工作经验、技能和项目等信息。这个项目不仅提供预设样式，还支持高度自定义，以适应各种需...
Vue Element Admin 文档来源解析
VuePress提供了一个可配置的主题系统，以及Vue驱动的插件系统，非常适合构建技术文档网站。 6. 文件名称列表中的“vue-element-admin-site-master”： 这个名称表明了项目文件的结构中包含了一个名为“master”的...
评论
成就一亿技术人!
拼手气红包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、付费专栏及课程。

余额充值