1.项目初始化 yarn init # npm init 2.安装依赖 将 VuePress 安装为本地依赖 我们已经不再推荐全局安装 VuePress yarn add -D vuepress # npm...{ "scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" } } 4....安装主题 vuepress-theme-reco yarn add vuepress-theme-reco # npm install vuepress-theme-reco --save-dev ...5.创建.vuepress 文件夹并创建 config.js 配置文件 mkdir docs/.vuepress && touch docs/.vuepress/config.js 编辑 config.js...- title: 高性能 details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
VuePress 安装vuepress前，请确保你的 Node.js 版本 >= 8 全局安装 # 安装 yarn global add vuepress 或者：npm install -g vuepress...> README.md # 开始写作 vuepress dev . # 构建静态文件 vuepress build ....注意 ：vuepress dev .和vuepress build .后面的.。...在现有项目中安装 # 将 vuepress 作为一个本地依赖安装 yarn add -D vuepress 或者：npm install -D vuepress # 新建一个 docs 文件夹 mkdir...VuePress 网站必要的配置文件是 .vuepress/config.js，它应该导出一个 JavaScript 对象： module.exports = { title: 'VuePress
❞ 效果图 使用技术 VuePress + vuepress-theme-reco VuePress简介 VuePress文档地址 简洁至上：以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作...一、上手搭建 1.创建并进入一个新目录 mkdir vuepress-starter && cd vuepress-starter 2.使用你喜欢的包管理器进行初始化 yarn init # npm...init 3.将 VuePress 安装为本地依赖 yarn add -D vuepress # npm install -D vuepress ❝官方不推荐全局安装 VuePress ❞ 4.创建你的第一篇文档...: { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" } } 6.在本地启动服务器 yarn...简介 vuepress-theme-reco文档地址 ❝此主题几乎继承 VuePress 默认主题的一切功能。
安装 全局安装 # 安装 yarn global add vuepress # 或者：npm install -g vuepress # 新建一个 markdown 文件 echo '# Hello...VuePress!'...> CORE 2 # 开始写作 vuepress dev . # 构建静态文件 vuepress build . 2....局部安装 如果想在一个现有项目中使用 VuePress，同时想要在该项目中管理文档，则应该将 VuePress 安装为本地依赖。...# 将 VuePress 作为一个本地依赖安装 yarn add -D vuepress # 或者：npm install -D vuepress # 新建一个 docs 文件夹 mkdir docs
# 插件 # 插件整理 vuepress-plugin-mermaidjs (opens new window) 流程图、时序图、类图、状态图 ...... vuepress-plugin-baidu-autopush...(opens new window) 百度推送 vuepress-plugin-thirdparty-search (opens new window) 第三方搜索链接 vuepress-plugin-one-click-copy...(opens new window) 代码块复制按钮 vuepress-plugin-zooming (opens new window) 放大图片 vuepress-plugin-comment...Valine方式加入评论 | Valine-Admin (opens new window) 加入邮箱通知 # 插件使用方法 加入插件包 yarn add -D vuepress-plugin-xxx...# npm install -D vuepress-plugin-xxx 使用插件包 module.exports = { plugins: [ [ 'vuepress-plugin-xxx
VuePress 使用 安装 # 全局安装VuePress npm install -D vuepress 本地新建文件夹>vuepress vuepress/新建docs文件夹 vuepress/...新建package.json文件 vuepress/docs/新建README.md文件 ?...创建文件 在docs/README.md中添加代码 # my first vuepress 在package.json中添加代码 { "scripts": { "dev": "vuepress...dev docs", "build": "vuepress build docs" } } 在vuepress中启动命令 npm run dev 启动成功后打开看到以下页面说明vuepress...现在用github加vuepress，理论上来说，域名是永久可以访问的，这样一个在线文档或博客（根据你自己的配置喜好），并且vuepress也是基于vue的单页应用，访问速度及用户浏览反馈还是很棒的！
分享一个VuePress知识管理&博客 主题 官方文档：https://doc.xugaoyi.com/ github：https://github.com/xugaoyi/vuepress-theme-vdoing
# 用Vuepress重构博客 原本使用typecho作为博客系统，最近服务器快到期了，调研了一下发现vuepress还不错，所以把博客迁移到了vuepress # 前期准备 一个备案的域名 github
为了方便阅读，使用 VuePress 将之前记录的后台常用 Linux 命令博文整理成一个系统的开源在线书籍，希望能够帮到大家。...3.自动部署 通过 VuePress 将 Markdown 文件生成静态网站，为了方便手动构建，我写了一个 Shell 脚本： #!...# 脚本出错立即退出 set -e # 生成静态文件，目录为 vuepress-docs/.vuepress/dist npm run docs:build rm -rf docs mv vuepress-docs.../.vuepress/dist docs 因为我将静态网站通过 Github Pages 对外发布，所以将静态网站的内容放到了仓库根目录下的 docs 目录。...我的工作流需要做如下几件事情： 拉取仓库 安装 Node.js，因为 VuePress 是基于 Node.js 实现的。 执行 npm install 安装 VuePress 和相关插件。
安装 ❝前置条件：VuePress 需要 Node.js >= 8.6 ❞ 安装 vuepress VuePress 安装毕竟简单，可以使用以下命令直接安装： yarn add -D vuepress...# npm install -D vuepress 验证安装 为了验证VuePress 的效果，首先创建一篇文档 mkdir docs && echo '# Hello VuePress' > README.md...VuePress 目录结构 VuePress 遵循 「“约定优于配置”」 的原则，推荐的目录结构如下： . ├── blog │ ├── .vuepress (可选的) │ │ ├── components...首先在当前目录下创建 .vuepress 目录（所有 VuePress 相关的文件都放在此目录下），然后在 .vuepress 目录下创建 config.js 文件（也可以使用YAML (.vuepress...参考链接 Intro to VuePress 1.x：https://ulivz.com/2019/06/09/intro-to-vuepress-1-x/ 默认主题配置：https://vuepress.vuejs.org
下载vuepress github传送门：github.com/git-Dignity… 官网：caibaojian.com/vuepress/gu… 我先git clone官方github，运行查看完整效果...了解vuepress结构 配置文件 配置（参考链接：caibaojian.com/vuepress/co…） VuePress 站点的基本文件是 .vuepress/config.js，其中导出一个...\vuepress\docs\.vuepress\public\css\button.css,写法参考饿了么。 在....\study\vuepress\docs\.vuepress\public\css\index.css汇总 @import './iconfont.css'; @import '....nginx上的配置 vuepress里面docs\.vuepress\config.js把base配置设为 “/”（很重要） 我们把vuepress打包之后的文件放在nginx上 server
记下vuepress静态网站生成器集成element-UI框架 安装element 进入vuepress根目录，执行命令 npm install element-ui 修改 enhanceApp.js...接下来需要修改用于客户端应用增强的docs/.vuepress/enhanceApp.js文件 vuepress的目录结构如下： . ├── docs │ ├── .vuepress (可选的)
每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。...安装 npm install -g vuepress 2. 配置文件说明 配置需要在文档目录下创建一个.vuepress目录,所有 VuePress 相关的文件都将会被放在这里。...终端创建一个文件夹：mkdir .vuepress 其中有一个最重要的文件.vuepress/config.js，网站的所有文件的配置都在这个文件里面， 需要创建该文件touch .vuepress/config.js...路径说明 vuepress里面，一个md文件就是一个页面，如在下面的目录结构中： 默认主页 服务启动后，默认找到的是./README.md文件 ....构建 目前服务启动的只是本地服务，vuepress还可以把文档生成静态html文件项目，部署到服务器或第三方托管网站上。 生成最终静态文件命令： vuepress build .
# Vuepress 问题解答 # 正确解决VuePress本地访问出现资源报错404的问题 (opens new window) 背景 最近发现好多小伙伴刚用VuePress，然后一build完就直接用本地浏览器访问...仅仅出现那种问题还好，给项目安装 vuepress-plugin-serve 插件就行了， 但是如果有需求是需要离线查看 VuePress 生成后的文档呢？...所以我特地研究了一下—— 解决办法 打开 .vuepress/config.js 文件，把 base 的值改成 ....然后打开项目下的 node_modules@vuepress\core\lib\client 下的 app.js 文件，找到下方这个片段： const router = new Router({...$vuepress.
今天实现了vuepress中获取所有页面的frontmatter frontmatter是页面的页头信息，例如： --- title: xxx author: 作者 date: 2023-08-17
前言 vuepress原始文件是markdown文件，生成的web页面时html，如果想保存为pdf有2类方法。...版本说明： "vuepress": "^1.9.7" https://www.npmjs.com/及github上搜索的工具/插件 #1. md文件转pdf #vuepress2pdf 不能使用 https...://github.com/chbndrhnns/vuepress2pdf #vuepress-plugin-export https://github.com/ulivz/vuepress-plugin-export...#vuepress-plugin-export-pdf https://www.npmjs.com/package/@condorhero/vuepress-plugin-export-pdf 本地转换..., vuepress, mkdocs https://github.com/kohheepeace/mr-pdf 注意： 本地开发url要使用http://127.0.0.1:端口号 标题不支持中文,
VuePress 是静态站点生成框架之一，界面简介优雅，本文记录使用方法。...简介 VuePress 是尤雨溪（vue.js 框架作者）发布的一个全新的基于 vue 的静态网站生成器，实际上就是一个 vue 的 spa 应用，内置 webpack，可以用来写文档。...Analytics 集成 支持 PWA 中文官网：https://vuepress.docschina.org/ 安装 nodejs VuePress 需要安装 Node.js，且版本要求 >= 8。...vuepress 在 nodejs 平台下安装 vuepress npm install -g vuepress # 或 yarn global add vuepress 使用方法 创建框架 以 Cellink...在 docs 中创建 .vuepress 文件夹，在.vuepress中创建 public 文件夹和 config.js 文件，最终项目结构如下所示： VueDemo ├─── docs │ ├─
# Vuepress网站 vuepress # 开始搭建vuepress-blog # 安装 yarn global add vuepress # 或者：npm install -g vuepress...# 新建一个 markdown 文件 echo '# Hello VuePress!'...> README.md # 开始写作 vuepress dev ....docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" } } 1 2 3 4 5 6 yarn docs:...dev # 或者：npm run docs:dev 当然这对于大多数人来说都是很简单的问题，自vuepress公开以后，有太多筒子想要vuepress添加评论系统，可是目测大佬们并没有这个想法，不过对于
/vuepress-theme-reco?..._from=gitee_search在gitee页面中克隆一份VuePress-themo-reco，这里就有人会疑惑了，咱们不是整VuePress吗，怎么克隆一份VuePress-themo-reco...，VuePress-themo-reco是基于VuePress开发一款博客主题，我个人就是用的这个博客主题，感觉还蛮好的。...git clone https://gitee.com/vuepress-reco/vuepress-theme-reco.git 使用npm的同学 # init npm install @vuepress-reco...": { "dev": "vuepress dev
# 简介 当前版本为 1.x 2.x 版本使用文档迁移至 这里 # 安装 $ yarn add vuepress-theme-yur 修改配置文件，启用主题 module.exports = {...toc: { includeLevel: [2, 3] }, // 指定 [[toc]] }, }; # 主题配置 /20171231/logo.png 对应 /docs/.vuepress...title: 'Yur', // 标题 subtitle: 'VuePress...主题', // 描述 link: 'https://github.com/cnguu/vuepress-theme-yur...标签，第一个为主标签 banner 封面图片链接 copyright 版权说明，默认：允许转载，需保留原文链接，著作权归博主所有 password 访问密码 # 定制主题 新建文件 /docs/.vuepress
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
