通过vue组件实现跟:Element相似的效果.需要在VuePress网站中将自己的项目中的Vue组件运行结果展示在页面中. 至于如何将组件在VuePress网站中展示请参考:https://segmentfault.com/a/1190000017242116 当项目中的Vue组件的运行结果可以在页面展示以后,接下来就是要将自己的代码展示在Vuepress网站中. 在VuePress网站中展示自己的代码 因为可以在markdown中使用Vue组件,所以可以自己专门写一个Vue组件来写一个效果跟…

VuePress 相关链接 完整的Vue组件代码以及完整的文档,仅适用于个人参考学习: 文档预览地址:预览链接 使用VuePress编辑文档的代码访问:组件文档 完整代码:组件代码 Vue组件开发 这篇文章主要是记录自己在使用VuePress过程中所遇到的问题以及如何一步一步的解决问题. 安装vuepress前,请确保你的 Node.js 版本 >= 8 全局安装 # 安装 yarn global add vuepress 或者:npm install -g vuepress # 新建一个 ma…

vuepress是一个静态网站生成器,在我看来就是写博客和教程的好工具.教程请见官网:https://www.vuepress.cn 安装方法建议局部安装:node8.0以上,新建vue项目,可能会出现版本冲突等问题,我也不知道是怎么解决的.然后按照官网命令行安装,整个项目就成了一个静态网站.文件的目录结构需要自己创建,虽然官网有推荐的目录结构,但是自定义啦.然后开发时可能会出现代码与运行结果不同步的现象,多用运行和打包两个命令行就好啦.另外,建议看看作者的源码,自带原理与教程! 他的主要模块有…

VuePress 这篇文章主要是记录自己在使用VuePress过程中所遇到的问题以及如何一步一步的解决问题. 安装vuepress前,请确保你的 Node.js 版本 >= 8 全局安装 # 安装 yarn global add vuepress 或者:npm install -g vuepress # 新建一个 markdown 文件 echo '# Hello VuePress!' > README.md # 开始写作 vuepress dev . # 构建静态文件 vuepress bu…

超详细动手搭建一个Vuepress站点及开启PWA与自动部署 五一之前就想写一篇关于Vuepress的文章,结果朋友结婚就不了了之了. 记得最后一定要看注意事项! Vuepress介绍 官网:https://vuepress.vuejs.org/ 类似hexo一个极简的静态网站生成器,用来写技术文档不能在爽.当然搭建成博客也不成问题. Vuepress特点 响应式,也可以自定义主题与hexo类似 内置markdown(还增加了一些扩展),并且可以在其使用Vue组件 Google Analytic…

vuepress是一款十分优秀简洁的文档生成器,可以根据目录下的md文档自动生成对应的html文件,界面简洁大方.每一个由 VuePress 生成的页面都带有预渲染好的 HTML,也因此具有非常好的加载性能和搜索引擎优化(SEO).本文将介绍如何在CentOS7环境下部署vuepress.可以先欣赏一下效果再决定是否要搭建:https://mfrank2016.github.io/wikibook/.个人觉得还算不错的,比较简洁大方. 一.安装nodejs curl -sL https://rp…

VuePress是什么? VuePress是以Vue驱动的静态网站生成器,是一个由Vue.Vue Router和webpack驱动的单页应用.在VuePress中,你可以使用Markdown编写文档,然后生成网页,每一个由VuePress生成的页面都带有预渲染好的HTML,也因此具有非常好的加载性能和搜索引擎优化.同时,一旦页面被加载,Vue将接管这些静态内容,并将其转换成一个完整的单页应用,其他的页面则会只在用户浏览到的时候才按需加载. 详情请看VuePress官方文档 VuePress特性…

手把手教你使用 VuePress 搭建个人博客 有阅读障碍的同学,可以跳过第一至四节,下载我写好的工具包: git clone https://github.com/zhangyunchencc/vuepress-devkit.git 然后从第五节开始看. 一.为什么你需要一个博客? 优秀的程序员都在写博客,写博客有很多好处: 帮助自己梳理.总结.理解知识点(个人提升) 帮助别人理解知识点(好人一生平安) 简历更好看,更多面试机会(升职加薪) 二.什么是 VuePress,为什么要使用 VueP…

今天来玩一玩vuePress的使用,用markdown来编辑一个页面网站,这里谈论到了简单使用,细节可以去官网上去查看 开始安装 项目依赖 // package.json { "name": "jkl", "version": "1.0.0", "description": "", "main": "index.js", "scripts…

使用laravel快速构建vuepress管理器 介绍 刚刚学了下laravel感觉很方便,最近也在用vuepress做个人博客,但是感觉每次写文章管理文章不是特别方便,就使用laravel写了这个vuepress cms管理器,放在电脑本地,改个host使用很方便,编辑文章到创建文件,推送仓库,很方便. 独立文章和文件 ,就算不使用vuepress主题了,也可以当做普通的文章cms管理 有图床功能,默认阿里云oss 仓库地址 直达仓库 直达我的个人页面 开始界面 原生主题和reco主题都可选,…

前言 因为自己平时经常写博客,也有博客网站,所以 Leader 叫我做一个 CMS 的帮助中心的技术选型,CMS 的帮助中心的功能:是通过文章来教用户如何使用我们的项目. 所以笔者要做一个静态网站的技术选型,笔者把网上流行的 VuePress 和 GitBook 两种方式都尝试了一下,并做了对比,这里写篇文章总结一下,顺便把自己的博客网站重作一便,哈哈. 1. VuePress 1.1 简介 VuePress 是 Vue 驱动的静态网站生成器. 简洁至上 以 Markdown 为中心的项目结构,…

推荐在这里阅读效果更佳 背景 网上搜了很多教程,包括官网的教程,但是还是费了一番功夫, 如果你使用自动化部署脚本部署不成功的话,可以参考我的这个笨方法 这是部署后的效果 前提 我假设你本地运行OK, 已经准备好要部署了 第一步 你的 vuepress 项目是否已经在github上的仓库下 如果是,请跳到第二步 如果不是,想在GitHub新建一个仓库,如图所示: ## 小坑 仓库名字要和config.js 里 的 base 属性值一样 比如你的仓库名字叫myBlog base就是/myBlog/…

先来一下演示效果.和vue的官方文档几乎是一致的,页面内容都可自定义. 此教程部署后的效果预览. 在你跟着教程搭建好项目之后,你会收获: 快速搭建一个文档/博客,后期只需要修改markdown内容和导航参数,即可一键打包生成页面. 页面具有非常好的加载性能和搜索引擎优化(SEO),其他的页面则会只在用户浏览到的时候才按需加载. 自动生成全局搜索.记录上次修改时间等功能. 可嵌入vue组件或跳转至其他页面,可定制自己的样式模板便于扩展. 一键免费部署到 github.pages,无需服务器即可拥有…

前言 学 Rust 也有一段时间了,网上也有不少官方文档的中文翻译版,但是似乎只有 Rust中文网站 文档一直是最新的,奈何并没有 PDF 供直接下载,是在是不太方便,为了方便阅读以及方便后续文档更新,决定用 Python 写一个爬虫将网页下载下来保持为 PDF. 最后完成结果如下: 是的没错,将官网样式也保留下来成功转为 PDF,接下来分享一下整个爬虫的过程,最终的爬虫可以导出任意 VuePress 搭建的网站为 PDF. 爬虫 依赖库的选定 requests BeautifulSoup4 p…

VuePress可以帮你快速建站,使用MarkDown语法生成静态html yum install -y gcc-c++ make curl -sL https://rpm.nodesource.com/setup_10.x | sudo -E bash - sudo yum install -y nodejs #安装yarn包管理器 npm install yarn -g #安装vuepress yarn global add vuepress 或者 npm install -g vuepre…

概述 今天我想把博客什么的搬到 github 的 vuepress 上面.但是每次提交 md 文件需要手动打包然后再提交到 github 的 gh-pages,非常麻烦.所以我去研究了一下用 circleci 自动集成.总体来说还是比较简单的.我把新的记录下来,供以后开发时参考,相信对其他人也有用. 我的 vuepress 博客地址(目前还没什么内容) 集成步骤 1.把项目提交到 master 分支,然后在项目主目录下面创建 .circleci 文件夹,在文件夹里面创建 config.yml 文…

vuepress的官方文档:https://vuepress.vuejs.org/zh/guide/ 参考:https://segmentfault.com/a/1190000016333850 https://juejin.im/post/5d1f1136f265da1ba77cc3d3 https://juejin.im/post/5d1ab9c151882579dd60d5e0 视频教程:https://www.bilibili.com/video/av78052346?p=2 搭建一个v…

在 VuePress 中增加用户登录 VuePress 是 Vuejs 官方提供的一个快速建设文档站点的工具,在简单配置好功能后,需要做的事情就剩下写好一个个 Markdown 文档. 因为 VuePress 提供了可以在 Markdown 中使用 Vue 的能力,所以有时候,希望可以在它的文档功能基础上增加部分常规功能,比如用户登录:有团队希望公司建设的文档内容仅公司员工可查看,因为有可能会有涉及内容保密的部分 VuePress 本身的安装配置过程不再赘述,可参考官方文档,本文将介绍使用 v-…

目录 最终效果 思路 总体 过程 用到的东西 相关 创建Github仓库 创建Github仓库 SSH密钥链接Github 生成SSH密钥 Github添加SSH密钥 测试SSH密钥 配置VuePress 安装VuePress 安装yarn Debian / Ubuntu Windows 更换国内的源 安装VuePress VuePress目录结构 配置依赖和脚本 配置package.json 页面的设置 首页 文档属性 markdown扩展 默认主题设置 导航栏 侧边栏 Git仓库 其他 插件…

目录 快速入门 在现有vue项目中安装本地开发依赖vuepress 在现有vue项目根目录下创建docs目录 创建并配置文档首页内容 运行,查看效果 可能会出现vue和vue-server-renderer版本不匹配的报错 以下通过示例说明vuepress的基本使用方法 最终效果预览 示例目录结构说明 页面效果和文件对应关系说明 (Window OS)将项目文档部署到Gitee上 创建用于部署项目文档的仓库 配置script 在项目根目录创建build.bat和deploy.bat 在confi…

将VuePress建立的博客部署到GitHub或Gitee上 在上一篇中,我们详细介绍了如何利用VuePress搭建起个人博客系统,但这只是在本地debug启动的,接下来,我们把它部署到Github网站. 在config.js中配置base base: '/v-blog/', v-blog是我Github上的仓库名 编写自动化脚本 在根目录/v-blog/下我们需要编写两个脚本 因为写在一个脚本里话编译完会直接退出, 所以把编译的命令单独放在另外一个脚本文件里调就可以了 build.bat @e…

使用VuePress搭建个人博客 VuePress 是一个基于 Vue 的静态网站生成器.其中主要用到:Vue,VueRouter,Webpack. 类似的工具:hexo 基于 Markdown 语法生成网页 可以使用 Vue 开发的组件 使用 VuePress 搭建个人博客: 创建远程仓库 本地博客项目搭建 其它 创建远程仓库 来到Github,创建仓库 没有用户的话先注册.新建一个仓库: 点左边的New或右上角加号里面的New repository 填写仓库名,点Create reposit…

建了一个VuePress的个人博客 想着写个批处理,自动编译并上传到GitHub. 结果遇到两个问题, 一个是,vuepress build docs编译后,这个命令执行完就exit了 研究了下bat,发现只有分成多个批处理写,通过call <other-bat-file>的方式可以解决 一个就是上传失败 error: src refspec gh-pages does not match any. 排错过程颇为曲折 错误0 F:\fcn-working\Github\03.my-repos\…

vuepress博客主题-vuepress-theme-reco是一款简洁而优雅的 vuepress博客&文档主题.它既可以成为简洁而又不失美观的主题,又可以书写你的项目文档,看起来更有逼格. 主题官方介绍: 这是一个vuepress主题,旨在添加博客所需的分类.TAB墙.分页.评论等能: 主题追求极简,根据 vuepress 的默认主题修改而成,官方的主题配置仍然适用: 效果:午后南杂 文档:vuepress-theme-reco-doc 如果没有接触过VuePress,这里有一篇指北: 如何…

一.概述 VuePress是2018年由尤雨溪发布的一个全新的基于Vue的静态网站生成器,它是一个非常轻量级的静态网站生成器.VuePress主要用于生成技术文档,其类似于Gitbook,我们可以用于博客或文档说明,并且我们不仅可以直接访问网页,还可以将其快速的部署在GitHub上. 为什么我们要选取VuePress平台?很多的技术人员包括程序员和开发人员都会写博客或技术文档,以此用于梳理总结技术中出现的关键点等重要信息,同时经互联网公开发布的博客或技术文档也能为别人带来新的对所学技术新的理解.…

原文参考链接 手把手教你使用 VuePress 搭建个人博客 有阅读障碍的同学,可以跳过第一至四节,下载我写好的工具包: git clone https://github.com/zhangyunchencc/vuepress-devkit.git 然后从第五节开始看. 一.为什么你需要一个博客? 优秀的程序员都在写博客,写博客有很多好处: 帮助自己梳理.总结.理解知识点(个人提升) 帮助别人理解知识点(好人一生平安) 简历更好看,更多面试机会(升职加薪) 二.什么是 VuePress,为什么要…

vuepress官网 vuepress是尤大开发来写文档的静态页面.可以用Markdown 语法,并且也可以使用vue模块化的方式开发页面. vuepress-theme-reco 是另外的开发者开发的 vuepress主题.本文将介绍依赖这个主题,构建GitHub pages静态博客的详细过程 提前说明:本过程比较详细,相当于手把手的教,针对于不熟悉vuepress的人介绍的,大佬不喜勿喷. 第一步:新建一个GitHub仓库 1. 仓库名随便取,不用以 username.github.io 这…

内容目录 安装初始化核心配置导航栏配置侧边栏配置静态资源配置nginx部署typora编写 安装初始化 全局安装  npm install -g vuepress 创建目录 mkdir vurepress-blog 项目初始化,初始化完成生成package.json文件 cd vurepress-blog npm init -y 在当前目录中创建docs目录,存放博客书籍内容 mkdir docs 配置首页显示(以下为默认配置)docs下创建README.md ---home: truehero…

VuePress教程之深入理解插件API 本文目录 1 VuePress教程之深入理解插件API 2 插件 ??? 2.1 暖暖身 2.2 插件如何运作 3 准备 3.1 Markdown 3.2 Pages 3.3 Ready 4 自定义的指令 5 Dev 5.1 建立 webpack 配置 5.2 Dev server 6 Build 6.1 建立 webpack 配置 6.2 生成页面 7 总结 别名: 通过插件 API 来深入了解 VuePress VuePress教程-极客中心 插件…

前言 VuePress 由两部分组成:第一部分是一个极简静态网站生成器 (opens new window),它包含由 Vue 驱动的主题系统和插件 API,另一个部分是为书写技术文档而优化的默认主题,它的诞生初衷是为了支持 Vue 及其子项目的文档需求. 概要 基础命令 基础配置 总结 基础命令(粘贴复制就行了,我也是复制过来的) mkdir vuepress-starter && cd vuepress-starter yarn init # npm init yarn add -D…