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 默认主题的一切功能。
# 插件 # 插件整理 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
安装 全局安装 # 安装 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 使用 安装 # 全局安装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静态网站生成器集成element-UI框架 安装element 进入vuepress根目录,执行命令 npm install element-ui 修改 enhanceApp.js...接下来需要修改用于客户端应用增强的docs/.vuepress/enhanceApp.js文件 vuepress的目录结构如下: . ├── docs │ ├── .vuepress (可选的)
下载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原始文件是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
每一个由 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
领取专属 10元无门槛券
手把手带您无忧上云