Vuepress

间接看package.json的配置 { "devDependencies": { "vue-server-renderer": "^2.6.14", "vue-template-compiler": "^2.6.14", "vuepress": "^1.9.9" }, "dependencies": { "vue": "^2.6.14" }}vuepress指定vue版本的起因，我须要用vuepress来编写UI组件库文档，但我的vue版本是锁定在2.6.14,所以导致默认装置vueprees时候，vue-server-renderer与vue-server-renderer这2个包与vue不对立报错（vuepress@1.x默认装置最新版本应该是2.7）。所以须要指定装置这2个包的版本。 npm i -D vue-server-renderer vue-template-compiler

博客地址 前言两年前，我弃用了原来的hexo博客零碎，并用vuepress1.4.1版本疾速搭建了本人当初的专属动态博客零碎。并始终更新保护至今。博客内陆陆续续的定制了本人的共性首页和列表页，扩大了评论、footer、复制、图片预览等等博客常见性能，成果和UI实现还是让我比较满意的。然而自从vuepress降级到2.X后，就始终心动的想要将现有博客进行降级，奈何平时比较忙（懒癌早期），所以始终没有付诸行动，最近闲下来，所有打算动起来。 这次尽管是从新从零搭建，但其实很多逻辑和1.0是相通的，所以我的博客1.0还是能够用来参考的，如果你也是vuepress1.X版本，也能够参考官网的迁徙文档 VuePress2的亮点简介至上反对vue3.0，就是好用。反对typescript，学习、开发必备技能。vite打包，就是快。多语言反对 VuePress和其它博客零碎的比照能够参看官网给出的介绍 我的项目搭建我的项目创立&初始化 # 创立并进入博客文件mkdir vuepress-blogcd vuepress-blog# 初始化gityarn init# 装置vuepress本地依赖yarn add -D [email protected]# 增加ignore内容echo 'node_modules' >> .gitignoreecho '.temp' >> .gitignoreecho '.cache' >> .gitignore# 增加第一个md文档mkdir docsecho '# Hello VuePress' > docs/index.md在 package.json 中增加一些scripts { "scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" }}命令行内运行上面代码，就能够顺利的启动一个热重载的博客我的项目了 yarn docs:dev搭建首页vuepress容许咱们依赖Frontmatter->layout来自定义页面布局；上面说一下首页 docs/.vuepress/Layouts文件内新建Home.vue文件，因为自定义的页面说白了也是一个组件，所以咱们能够依照平时写vue3组件的形式去写首页内容 <template> <view>首页</view></template>在 docs/.vuepress/client.ts 文件中注册Home组件 import { defineClientConfig } from '@vuepress/client'import Home from './Layouts/Home.vue'export default defineClientConfig({ layouts: { Home, }})在一开始创立的docs/index.md文件内，讲自定义布局组件进行引入 ...

背景去年初，我写了一个开源我的项目electron-egg，须要搭建一个文档站点，而后开始折腾。 经验了一系列繁冗的操作后，我发现独立博客和文档类网站这个市场，正缓缓的产生着变动...... 那些走过的弯路wordpress最后打算应用 wordpress，一个出名的集体站点程序，寰球4000万个网站在应用； 既然用的人那么多，我也来尝试一下；一顿猛如虎的操作： 买域名买服务器搭建php、mysql数据库、nginx、git装置WordPress......一天过来了，早晨陷入深思...... 我 只是想搭个文档站点而已........ hexo第二天发现hexo，技能做文档，也能写博客，挺好。 hexo-装置、配置hexo-主题、布局、模板hexo-部署、git、公布hexo-标签、文章、布局.......一天又过来了，早晨又陷入了深思...... 我 只是想搭个文档站点而已........ vuepress第三天发现，原来不须要买域名和服务器也能够呀，而且应用人挺多，开搞。 vuepress-装置、增加菜单、目录vuepress-增加搜寻、链接、重定向vuepress-增加评论插件、https、站长工具vuepress-增加等等等......一天又过来了，早晨持续陷入深思...... 我 只是想搭个文档站点而已........ Notion or 语雀起初用体验了notion和语雀，因为网络起因，最终抉择语雀。 间接当笔记算了。 一年多过来了，发现语雀的应用体验超过了我的预期，次要有以下几点 提供web反对随写随用，主动公布公开或者公有文字、图片、视频、代码统计、评论、关注、珍藏等各种性能包罗万象成果如图 35w+浏览量一年多工夫，electron-egg我的项目通过一直迭代，也终于小有成就： gitee 1900+ star github 450+ star 文档曾经被浏览了35w次了，我也有了更多精力来保护这个框架。 如果当初应用WordPress或者vuepress，我要花费多少工夫在更新文档下面呢？ 本人建站 or 站点托管 or 应用数字化管理工具现在notion曾经有了2000w用户，语雀也在迅速成长，提高效率始终是用户的外围需要，还有多少人违心破费大量的精力去保护、治理集体站点呢？ 个人观点独立博客、文档类网站 将要 进入存量市场；尽管还会有增长，然而将有越来越多的用户投入到新一代数字化工作管理工具的怀抱中。 置信有不少人都经验过，单独建站 或 站点托管平台的折腾；然而它们的投入产出比又有多少呢？你还会持续保护那个站点多久呢？

VuePress介绍VuePress 是Vuejs官网提供的一个是Vue驱动的动态网站生成器，基于Markdown语法生成网页。简略的说它就是一个疾速建设文档站点的工具，在简略配置好性能后，须要做的事件就剩下写好一个个 Markdown文档。 VuePress官网https://www.vuepress.cn VuePress指南https://www.vuepress.cn/guide... VuePress装置装置前请装置 Node.js Node.js下载地址 http://www.nodejs.com.cn 你能够在一个硬盘创立一个目录，例如我再D盘的根目录下创立一个VuePress目录，而后双击进入这个目录，在这个目录的门路栏（将 D:\VuePress 替换为 cmd 而后按回车）输出CMD启动cmd来执行命令。 就会在这个目录下启动cmd命令行工具。 VuePress装置命令 npm install -D vuepress国内请应用 cnpm 装置会更快，可执行以下命令装置 cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org再执行以下命令装置 VuePress cnpm install -D vuepress 间接粘贴命令按回车就能够开始装置，只有命令还在跑，都还没实现装置，须要急躁期待。 以上写得如此具体，就是为了关照老手，大神请不要厌弃。如果老手连以上的操作都不懂，倡议还是要现学习一下Vue我的项目的创立、配置、运行、打包等基础知识。创立VuePress文档mkdir docs && echo '# Hello VuePress' > docs/README.md配置VuePress在你的VuePress我的项目目录下的 package.json 文件增加以下代码。 { "scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" }}启动VuePress我的项目npm run docs:dev 启动后，将会在你的本地开启一个http服务 而后就能够通过 Markdown 语法来编写你的文档、博客、文章等内容了！ VuePress进一步配置如果想要进一步欠缺你的 VuePress 文档，甚至是让 VuePress 像博客一样去应用，那么你能够依据 VuePress 官网提供的指南去进一步配置 VuePress 的导航栏、搜寻、logo、侧边栏、代码高亮等，这样能够让你很快地学会应用 VuePress 来编写你的文章。 ...

前言最近收到首席执行官的工作，说要搞一个团队文档，因为团队也从之前的4大金刚，开始变多了，所以须要一些文档来通知起初的小伙伴，百度发现vuepress还不错，就喜爱这种简略无脑的，能够cv的，搞起来 官网对于为啥选1.0版本的一些思考因为我在选型的时候，发现官网还是beta版本，so，我感觉抉择1.0 的靠谱点基本概念官网的目录介绍 具体目录性能 路由的跳转形式 具体步骤创立我的项目（间接依照官网的撸起来）创立我的项目第一步 创立我的项目第二步 我把打包命令改成公司对立的形式，具体改不改，看你的须要 以后vuepress信息 创立侧栏新建config.js 文件，增加侧栏文件 胜利生成侧栏 多层级目录如何创立？应用組件：官网新建vue文件 应用组件组件失效，, 如果你的写了html内容然而没有失效，请检查一下标签的闭合是否有问题，血的教训！！！ 应用组件胜利 引入elment-ui官网说了，要这么做npm install element-ui 批改 enhanceApp.js批改enhanceApp 文件,增加如下代码import Element from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';export default ({ Vue, options, router }) => { Vue.use(Element);}; element ui 失效图 重启我的项目，发现报错报错信息：Uncaught Error: Cannot find module 'core-js/library/fn/object/assign' 报错起因一看core.js报错，想想应该是版本不兼容的问题，之前被坑的太多了百度发现也是这个起因 解决办法yarn add async-validator@1.11.5 或者 npm install async-validator@1.11.5 搞定装置结束，重启搞定效果图 参考资料vuepress加载element-ui时报错

前言在 《一篇带你用 VuePress + Github Pages 搭建博客》中，咱们应用 VuePress 搭建了一个博客，最终的成果查看：TypeScript 中文文档。 在搭建这样一个博客后，其实还有很多的优化工作须要做，本篇咱们来盘点一下那些实现根底搭建后必做的 10 个优化。 1. 开启 HTTPS开启 HTTPS 有很多益处，比方能够实现数据加密传输等，SEO 也会更容易收录： Google 会优先选择 HTTPS 网页（而非等效的 HTTP 网页）作为标准网页开启 HTTPS，咱们的根本步骤是： 购买下载证书上传到服务器开启 Nginx 配置具体的操作步骤，能够参考 《VuePress 博客优化之开启 HTTPS》 2. Gzip 压缩开启 Gzip 压缩将会极大的进步网站加载速度，如果服务器用的是按流量付费，就更是必须要做的内容。 如果应用的是 Nginx，因为 Nginx 内置 Gzip 压缩模块，能够间接开启： server { # 这里是新增的 gzip 配置 gzip on; gzip_min_length 1k; gzip_comp_level 6; gzip_types application/atom+xml application/geo+json application/javascript application/x-javascript application/json application/ld+json application/manifest+json application/rdf+xml application/rss+xml application/xhtml+xml application/xml font/eot font/otf font/ttf image/svg+xml text/css text/javascript text/plain text/xml;}对于 Gzip 压缩更多内容能够参考 《VuePress 博客优化之开启 Gzip 压缩》 ...

前言在 《一篇带你用 VuePress + Github Pages 搭建博客》中，咱们应用 VuePress 搭建了一个博客，最终的成果查看：TypeScript 中文文档。 本篇接着讲讲 SEO 优化会用到的站长平台和工具等。 1. 百度统计地址：https://tongji.baidu.com/web/welcome/login 网站流量剖析工具，可能通知用户访客是如何找到并浏览用户的网站，在网站上做了些什么 2. 百度搜寻资源平台地址：https://ziyuan.baidu.com/site/index#/ 在增加站点后，能够看到本人站点在百度搜寻后果中的一些体现： 百度搜寻核心也提供了一些教程如： 《平台工具使用手册》：https://ziyuan.baidu.com/college/courseinfo?id=267&page=1《百度搜索引擎优化指南2.0》https://ziyuan.baidu.com/college/courseinfo?id=193&page=33. Google Analytics相似于百度统计，地址：https://analytics.google.com/analytics/web Google Analytics是驰名互联网公司Google为网站提供的数据统计服务。 能够对指标网站进行拜访数据统计和剖析，并提供多种参数供网站拥有者应用。4. Google Search Console相似于百度搜寻资源平台，地址：https://search.google.com/search-console Google Search Console 是一项由 Google 提供的收费服务，可帮忙您监控和保护您的网站在 Google 搜寻后果中的展现状况以及排查问题。5. Google Search CentralGoogle Search Central（前身为“Google 网站站长”）在此致力于帮忙感兴趣的用户发现及查看您的内容，并提供了一些可助您的网站被 Google 搜寻发现的资源。咱们能够在这里学习 SEO 的技巧：https://developers.google.com/search/docs/beginner/seo-starter-guide?hl=zh-cn 6. Google Trending地址：https://trends.google.com/trends 谷歌趋势是谷歌旗下一款基于搜寻数据推出的一款剖析工具。 它通过剖析谷歌搜索引擎每天数十亿的搜寻数据，通知用户某一关键词或者话题各个期间下在谷歌搜索引擎中展现的频率及其相干统计数据。 7. 站长工具如名所示的站长工具集，地址：https://tool.chinaz.com/ 如图中所示，能够进行 SEO 综合查问、权重查问、友链检测、关历史数据查问、关键词开掘、死链检测等性能 像 SEO 综合查问能够查到网站在各大搜索引擎的信息，比方网站权重、预估流量、收录、反链、关键词排名等。 8. ahrefs跟站长工具相似，只不是国外的，地址：https://app.ahrefs.com/dashboard 9. 5118开掘关键词，地址：https://www.5118.com 5118通过对排名各类大数据挖掘，提供关键词开掘，行业词库，站群权重监控，关键词排名监控，指数词，流量词开掘工具等排名工作人员必备百度站长工具平台博客搭建系列博客搭建系列，解说如何应用 VuePress 搭建、优化博客，并部署到 GitHub、Gitee、公有服务器等平台。系列预计 20 篇左右，本篇为第 32 篇，全系列文章地址：https://github.com/mqyqingfen... ...

前言在 《一篇带你用 VuePress + Github Pages 搭建博客》中，咱们应用 VuePress 搭建了一个博客，最终的成果查看：TypeScript 中文文档。 本篇讲 SEO 中的 JSON-LD。 JSON-LD如果咱们关上掘金任意一篇文章，比方这篇《VuePress 博客优化之减少 Vssue 评论性能》，查看 DOM 元素，咱们能够在 head 中找到这样一段 script 标签： 在思否等其余平台也是能够看到的： 那这个 type 为 application/ld+json 的 script，到底是什么意思呢? 又是什么作用呢？ 这就是咱们明天要介绍的 JSON-LD，英文全程：JavaScript Object Notation for Linked Data，官网地址：https://json-ld.org/，简略的来说，就是用来形容网页的类型和内容，不便搜索引擎做展示。 比方如果咱们在 Google 搜寻 「Chocolate in a mug」，咱们会看到这样的搜寻后果： 咱们关上页面，就能够看到搜寻展现的内容对应了 application/ld+json 中的内容： 增加 JSON-LD如果咱们也要实现这样的成果，不便搜索引擎展示，该怎么做呢？ 在页面退出结构化数据的办法很简略，只用在页面增加这样一段脚本就能够了： <script type="application/ld+json"> // ...</script>具体外面的内容须要参考比方 Google 搜寻核心提供的《结构化数据惯例指南》，因为我写的是具体的文章，所以参考 Article 章节后，我决定写入以下这些属性： <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "headline": "这里填写题目", "image": [ "https://ts.yayujs.com/icon-144x144.png" ], "datePublished": "2021-11-10T22:06:06.000Z", "dateModified": "2022-03-04T16:00:00.000Z", "author": [{ "@type": "Person", "name": "冴羽", "url": "https://github.com/mqyqingfeng/Blog" }] }</script>VuePress 实现通过搜寻，我并没有发现现成的插件，因为每个页面的题目、公布工夫、更新工夫都不同，那成吧，那就本人写个本地插件实现吧。 ...

前言在 《一篇带你用 VuePress + Github Pages 搭建博客》中，咱们应用 VuePress 搭建了一个博客，最终的成果查看：TypeScript 中文文档。 本篇讲讲 SEO 优化中的 Open Graph protocol。 meta 标签如果咱们关上思否任意一篇文章，比方这篇《VuePress 博客优化之减少 Vssue 评论性能》，查看 DOM 元素，咱们能够在 head 中找到这样一段 meta 标签： 咱们能够发现 name 都是以 og: 结尾，这是什么意思呢，又是什么作用呢？ 其实这是 Facebook 提出的 Open Graph Protocol，官网地址：https://ogp.me/，用来标注页面类型和形容页面内容，从而不便在社交媒体中进行流传。 简略的来说，依照这个协定形容页面信息，社交网站按就会依照页面上 og 标签的内容出现给用户，因为应用宽泛，目前也曾经被搜索引擎反对，参照这个十分老的帖子的内容： 参加到 Open Graph Protocol 的益处：　可能正确被蜘蛛抓取您的内容到百度网页搜寻帮忙您的内容更无效的在百度结构化展示利用了 OG 协定将会有更丰盛的内容展示标记示例参照网站管理员分享指南，以下就是一个应用 OG 协定标记文章、新闻动态或博文： <meta property="og:url" content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" /><meta property="og:type" content="article" /><meta property="og:title" content="When Great Minds Don’t Think Alike" /><meta property="og:description" content="How much does culture influence creative thinking?" /><meta property="og:image" content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />这些属性包含咱们在用户分享文章时具体想要出现的与文章无关的描述性元数据。 ...

体验地址：博客，github，npm 前言博客上的音乐播放器，大多都长一个样，小小的，塞在页面的一个角落里，在他人阅读文章的同时能够听音乐，减少某些体验的称心指数。而我，做了一件不太一样的事件： 博客不就是让人看文章的么？再播放音乐甚至有可能会升高浏览的品质，那听歌就好好听歌不好么？既然要体验，那就沉迷体验到爽不好么？ 某天，偶尔关上了豆瓣FM网页版，很合乎豆瓣的感觉，洁净简洁，当然网上相似的音乐播放有很多，这里为我前面做的事件埋下了伏笔。 我博客是用 [vuepress]() 搭建的，主题是 vuepress-reco，最开始想找一个播放音乐的插件，于是去找了 awesome-vuepress，搜到惟一和音乐相干的插件，只有一个叫：vuepress-plugin-music-bar 的插件.....还是个bar....有点失落。于是，没人做？那...我做个试试？最终的效果图就是下面看到的四张图了：亮/暗系歌词，亮暗系可视化解码。在看完 vuepress 官网的插件api，就开始搞了！ 开搞不管怎么画页面，初衷是沉迷式体验，找了很多播放器的大体构造，还是感觉网易云的播放界面算比拟难受的，本人也有尝试画过脑海里的播放界面，然而最终还是抉择用网易云的成果（拿来吧你）：左侧黑胶唱片滚动，右侧歌词滚动， 目前不须要上一曲下一曲，就有播放和分享按钮，也就是长这个样子： 一天半工夫，匆匆忙忙做完之后，npm link 调试胜利就发了一版npm包。好用？不好说。能不能用？能！ 优化做到这里之后，沉迷式有那么点感觉了，体验？照搬过去就是好的体验么？不，还是要加点货色，比方可视化。 这里特别感谢网易云大前端团队的一篇文章：Web Audio在音频可视化中的利用，基本上照着看下来，外面的文献也看一下，就能够做进去下面的成果。说实话，文献是真头大....波长，正余弦，频域时域，奈奎斯特定理，还有什么疾速傅里叶变换，头发在偷偷的掉...顺便附上一张某个文献的截图： 不过不看这些也能够做进去！ 基本上的思路就是： 创立 AudioContext，关联音频输出，进行解码、管制音频播放和暂停创立 analyser ，获取音频的频率数据（FrequencyData）和时域数据（TimeDomainData）设置疾速傅里叶变换值，信号样本的窗口大小，区间为32-32768，默认2048创立音频源，音频源关联到分析器，分析器关联到输出设备（耳机、扬声器等）获取频率数组，转格局，而后用 requestAnimationFrame 通过 canvas 画进去这些货色下面的文章里讲的很具体，我这种门外汉就不多说啥了。 遇到的问题npm link之前应用 npm link 的时候，依赖包没有三方/四方的依赖，所以没留神到，如果开发的npm包带有别的依赖，那么调试的时候要在主我的项目里的 package.json 先加上这些包，就不会报错说 resolve 失败什么的了，调试完结记得 npm unlink 断开。 接口原本想用的是 网易云音乐 NodeJS 版 API，然而有些货色不好找，比方我须要歌曲id，封面和歌词，然而文档里没有歌曲id反查专辑id的（封面在专辑id里），只有一个歌曲详情的，然而这个接口，还须要认证跳转....对于使用者来说，我没必要让使用者多这么一步操作，而且很容易出错。于是就换了一个api：保罗API，这个API能够解析的网易云歌曲不是那么的多，不过个别的够了，惟一的毛病就是，多频次刷新会始终 pending，应该是后端设置了ip频次。 既然都有问题，不应用接口行么？尝试找一种 mp3 文件解析进去歌词和封面呢？找到一个 jsmediatags 的仓库，能够解析ID3v2，MP4，FLAC等字段，然而.....这不就是给用户增加麻烦么？须要找专辑，歌词，歌曲，艺人信息全副合一的音源文件....如果我是用户，我不会用它。 翻来覆去，最终还是决定，歌曲用户传进来，而后再传一个歌曲id，封面和歌词走接口，歌曲就是传进来的音源链接，应用办法如下： <MusicPlayer musicId="xxx" musicSrc="xxx.mp3" style="margin:0 auto">音源我集体倡议要么放vuepress的动态资源，要么就搞成相似图床一样的音源仓库，这样也好保护。 前期想方法优化吧。 主题色亮系和暗系是适配 vuepress-reco 的主题切换做的适配。 结尾灵感来自 豆瓣FM，构造参考了昊神的 音乐播放器，可视化播放参考了 Web Audio在音频可视化中的利用，接口感激 保罗API，这么一说我如同也没做什么事..... ...

用vuepress写组件文档的困扰近期在用vuepress给组件写文档，在展现用例的时候，总想同时展现源码。 然而导入代码段的语法<<< @/filepath写起来会有点烦，因为个别你的示例代码都是放在docs/.vuepress/components门路上面，这就导致你想引入组件代码，就得写好长一段门路。 而且，如果你的示例代码比拟多，上百行，到时候又会显得你的页面很长，体验不是很好。 如果可能像一些组件库的官网那样，代码能够点击查看，再收起，体验就会很好了。 没有现成的插件吗？在写这个插件之前，有找过相干插件，但发现根本都有个毛病。就是都是把代码写在markdown文件里，这样就得不到代码提醒之类的货色。 于是写了一个vuepress的插件vuepress-plugin-code-example，用法也非常简略，只须要给到文件绝对于docs/.vuepress/components这个门路的地址即可。 ::: code-example path-to-file:::例如，你的组件门路是docs/.vuepress/components/demo.vue ::: code-example demo.vue:::成果预览 也可查看我的组件库文档erpack在线体验成果。 有个小亮点总会有示例代码很长很长，当你开展的时候，你再想收起来，就得往上翻好几下。于是我给了一个按键交互，当你在看某个示例的时候，按下键盘上的ESC键能够切换源码的展现与暗藏。（须要先点击一下这个示例块） 欢送吐槽款式太丑的问题。

前言想要分分钟搭建本人博客，能够间接跳到最初，教你如何分分钟搭建博客。 速览[x] 这是一款 Vuepress 主题，集成了博客所需的分类、TAG墙、分页、评论等性能。[x] 主题谋求极简，配置上手简略，适配挪动端。[x] 预览地址[x] 主题插件GitHub地址[x] 集体博客部署GitHub地址[x] 博客成果展现： 主题应用装置主题创立一个新的我的项目 my-blog： mkdir my-blogcd my-blog初始化 yarn 或 npm ： yarn init 或 npm init -y装置 vuepress 和 vuepress-theme-melodydl： yarn add vuepress vuepress-theme-melodydl或npm install vuepress vuepress-theme-melodydl创立 src/_posts 文件夹和 Vuepress 配置文件，我的项目构造大抵为： my-blog├── src # Blog 源文件目录│ ├── .vuepress # Vuepress 目录│ │ └── public # Vuepress 动态资源文件│ │ └── config.js # Vuepress 配置文件│ └── about # About 页面 文件夹│ │ ├── index.md # about 页面内容文件│ └── _posts # 博客文件夹│ ├── xxx.md│ ...└── package.json在 package.json 退出 script 字段： ...

你好，我悦创。 本来想用 gitbook 实现流沙团队文旦，奈何呈现一堆奇奇怪怪的 bug 后，我花了一天工夫写完文档，而后决定放弃它应用 VuePress。 1. 筹备条件（Prerequisites）Node.js v12+Yarn v1 classic (Optional)1.1 Node.js 装置大佬级别间接看上面这句话，就没啥问题： 这个装置很简略，只须要下载，而后一路 next 即可。下载链接：https://nodejs.org/en/ 小白持续看看下来： 用于所有支流平台的官网软件包，可拜访 http://nodejs.cn/download/ 装置 Node.js 的其中一种十分便捷的形式是通过软件包管理器。 对于这种状况，每种操作系统都有其本身的软件包管理器。 在 macOS 上，Homebrew 是业界的规范，在装置之后能够十分轻松地装置 Node.js（通过在 CLI 中运行以下命令）： brew install node其余实用于 Linux 和 Windows 的软件包管理器列出在 https://nodejs.org/en/download/package-manager/ 。 nvm 是一种风行的运行 Node.js 的形式。 例如，它能够轻松地切换 Node.js 版本，也能够装置新版本用以尝试并且当呈现问题时轻松地回滚。 这对于应用旧版本的 Node.js 来测试代码十分有用。 详见 https://github.com/creationix/nvm。 NVM 常用命令：https://www.aiyc.top/1946.html 倡议，如果刚入门并且还没有用过 Homebrew，则应用官网的安装程序，否则，Homebrew 是更好的解决方案。 无论如何，当装置 Node.js 之后，就能够在命令行中拜访 node 可执行程序。 1.2 装置 yarn（Optional）npm install --global yarnyarn --version2. 疾速上手本文会帮忙你从头搭建一个简略的 VuePress 文档。如果你想在一个现有我的项目中应用 VuePress 治理文档，从步骤 3 开始。2.1 创立并进入一个新目录我用的是 Windws 下应用 Linux 命令，Windows 间接界面创立文件夹，cmd 进入文件夹就能够了。 ...

背景最近在写博客的时候有这样一个需要：有些博客内容想要通过明码验证的形式来容许他人拜访。 试想一下这样的场景： 比方你的个人简历是保护在线上博客的，博客的其余内容所有人都能够拜访，然而像简历这种波及个人信息的内容，就须要通过一种验证机制来限度所有人拜访。如果你在寻找新的工作机会，通过链接 + 口令的形式提供给他人本人的简历，是不是也显得极（zhuang）客（bi）了许多。另一方面，以产品的角度来想，这其实也是变相为你的博客引流的一种形式。 实现上述性能的办法有很多种，如果你的博客刚好也是（或者也想）通过 vuepress + Github Pages 的形式搭建，那我倡议能够持续浏览上来。 我的博客就是应用这种形式构建和部署的，所以遇到这个问题之后，首先就尝试去找是不是 vuepress 有相干的插件能够间接拿来用，不过没有找到本人想要的，所以就只好本人入手撸了一个这样的插件。 vuepress-plugin-posts-encrypt预览及应用插件目前曾经开源，插件的具体装置以及应用形式能够在这里看到。想要看成果的话能够间接拜访这个地址，明码：1234。或者你也能够 clone 下来代码通过上面的形式在本地运行。clone 代码git clone https://github.com/alphawq/vuepress-plugin-posts-encrypt.git装置依赖cd vuepress-plugin-posts-encrypt && yarn启动服务yarn dev不出意外的话，应该就能够关上终端里的链接在本地看到成果了。出意外的话，欢送大家来提 issue。 代码仓库是应用 yarn workspaces+lerna 多包治理的形式进行保护，也就是常说的 monorepo。相干的应用教训，其实也能够总结成一篇文章来记录和分享，这个 日后 再说。 实现以上都是对插件应用上的介绍，如果只是想用这个插件的话，下面的内容曾经足够了。对于实现这一部分，其实次要是记录一下开发过程中遇到的一些问题，以及对应的解决方案，并不会聊太多代码实现相干的内容。 同时，如果你也想要开发一个 vuepress 插件的话，那接下来的内容可能会对你有所帮忙。 码农码码码字码砖都不容易，有帮忙的话，劳烦给个 Star！ 计划一看官网文档介绍：VuePress 由两局部组成：第一局部是一个极简动态网站生成器 (opens new window)，它蕴含由 Vue 驱动的主题零碎和插件 API，第二局部就不必看了。另外，每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因而具备十分好的加载性能和搜索引擎优化（SEO）。 看到这里我不得不打断一下，因为一开始这个加密插件的实现思路就是受到这句话的影响，让我误以为 因为 vuepress 构建进去的产物每个 md 页面都会生成一个 html，因而部署到 Github Pages 上之后，它应该是一个 MPA 利用，所以一开始的实现计划就很简略粗犷： 在构建产物生成之后，将须要加密的 html 页面内容加密，而后将密文注入到明码验证的模板里，并重写回文件系统当用户拜访到这个页面路由的时候，因为是 MPA，所以就会呈现出明码验证模板的内容待用户输出明码并校验通过之后，再解密出原始内容，通过 document.write 的形式写回去这个性能实践上就实现了。然而，实际上，文档中还有前面一句话： 同时，一旦页面被加载，Vue 将接管这些动态内容，并将其转换成一个残缺的单页利用（SPA），其余的页面则会只在用户浏览到的时候才按需加载。 ...

VuePress搭建组件库(一)最终成绩：利用vuepress写一个本人的组件库+文档配置

又名给vuepress写一个插件最终的成果如下 思路最近在看pwa时，在MDN上看见一段乏味的对于实现渐进式图片加载的snippet，粗心如下： <img src="thumbnail.png" data-src="origin.png"></img>var imgToLoad=document.qureySelectorAll('img[data-src]')imgToLoad.forEach(img=>{img.setAttribute('src',imgAttribute('data-src'));img.onload=()=>{ img.removeAttribute('data-src')}}) img[data-src] { filter: blur(0.2em); } img { filter: blur(0em); transition: filter 0.3s; }总得来说便是在加载渲染页面时，先加载和渲染页面的缩略图，作为一个placeholder，而后再去加载真正的原图，当原图加载结束后，再渲染原图。这缩短了页面加载渲染的工夫，让用户关上页面可能疾速取得反馈。 咱们可能在medium和gatsby.js网站上见到过这种图片加载形式，然而vuepress自身是不反对的，于是便想实现这种图片加载形式，顺便写一个vuepress插件。 实现的步骤如下： 1. 生成一张缩略图，而后插入进去依据需要，咱们想要这样一个markdown解析成果 解析后为： <img src="./thumbnial.jpg" data-src="./orign.jpg"></img>首先须要阐明一下一个vuepress页面是如何生成的 markdown-loader vue-loadermarkdown--------------->vue SFCs?------>vue spa上述并不精确，因为没有去深究两头产物到底是什么。回到主线上，官网上给出，vuepress应用markdonw-it作为markdown的解析器，即上述的markdown-loader其实就是一个包装后的markdown-it，同时vuepress暴露出了extendMarkdown这一api用来改写markdown解析规定。所以，咱们能够通过这一api，插入咱们自定义的对于图片的解析规定就可能实现咱们所须要的后果。于是咱们能够写一个mark-it的插件来实现这一性能。在这，我遇到了两个坑，别离是 markdown-it插件仅反对同步函数vue-loader默认不解析data-src这一attribute.因为vuepres应用了url-loader，所以会将图片之类的动态文件给寄存在assets/images文件夹下，而data-src中的图片地址却不会发生变化。第二个十分好办，咱们能够通过chainWebpack这一api该变vuepress的webpack config就能够实现，即在vueloader的transformAssetUrls上增加img:["data-src"]就好了。 对于第一个生成原图片的缩略图，我应用了imageThumbnail库，该库仅反对异步办法。所以咱们须要将该异步办法包装成真正的同步办法。这里应用到了一个deasync的库，它裸露了node底层的一个sleep()办法，来使main line 强制挂起，提前进行事件循环，直到事件循环完结，再执行主线程序来实现同步。 2. 加载原图片这一步能够应用clientRootMixin这一api，给globalLayout.vue混入一个全局的办法就能够了～ 具体代码能够看一下俺的github仓库，因为接触vuepress不深刻，有些局部的实现十分的naive，而且整个代码也不是很优雅，很多办法都十分生硬，欢送大家pr或者本人编写代码更好地实现。 另，我将该插件上传到了npm上，大家能够npm install玩一玩～ $ npm install vuepress-plugin-progressive-image-loader

介绍用官网的话来说 VuePress 是一款以 Vue 驱动的动态网站生成器,它的诞生初衷是为了反对 Vue 及其子项目的文档需要。因为vuepress反对自定义开发主题所以很多人拿它来写博客，上面我会用 VuePress 搭建一个极简的博客网站并应用GitHub Actions部署到GitHub Pages。 示例我的项目github源码 示例博客拜访地址 搭建博客前提条件 VuePress 须要 Node.js >= 8.6创立并进入一个新目录mkdir vuepress-starter && cd vuepress-starter应用你喜爱的包管理器进行初始化yarn init # npm init将 VuePress 装置为本地依赖yarn add -D vuepress # npm install -D vuepress装置依赖留神如果你的现有我的项目依赖了 webpack 3.x，VuePress官网举荐应用 Yarn 而不是 npm 来装置 VuePress。因为在这种情景下，npm 会生成谬误的依赖树。创立你的第一篇文档mkdir docs && echo '# Hello VuePress' > docs/README.md 在 package.json 中增加一些 scripts{ "scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" }}在本地启动服务器yarn docs:dev # npm run docs:devVuePress 会在 http://localhost:8080 启动一个热重载的开发服务器。如果呈现文章乱码能够参照这篇文章去解决。 ...

在vuepress中实现相似element-ui 的代码预览成果1. vuepress-plugin-demo-container介绍：是一个基于 Vuepress 的插件，它能够帮忙你在编写文档的时候减少 Vue 示例，它的诞生初衷是为了升高编写组件文档时减少一些相干示例的难度根本实现原理： Demo Container 应用 Vuepress 的 chainMarkdown、extendMarkdown API 拓展了其外部的 markdown 对象，以特定规定辨认代码块，扩大markdown.render办法已实现最终渲染。 其余相似选项：vuepress-plugin-demo-blockvuepress-plugin-demo-codevuepress-plugin-extract-code2. 引入：装置： npm install vuepress-plugin-demo-container --save-dev在.vuepress/config.js中配置：module.exports = { plugins: ['vuepress-plugin-demo-container'] ｝ 这里因为是以vuepress-plugin结尾，也能够写作 module.exports = { plugins: ['demo-container'] ｝ 3. 应用办法 在vuepress中，可在markdown文件中间接写vue语句 那么示例代码写为 ::: demo 测试文档编写 \``` vue <template> <test></test> </template> <script> export default { data () { return { } } }; </script> \``` ...

在已有我的项目中装置 // 装置： npm install -D vuepress // 创立一个docs 目录 mkdir docs // 创立一个 markdown 文件(相当于入口页) echo '# Hello VuePress' > docs/README.md // package.json添语句 "scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" }运行npm run docs:dev打包npm run docs:build运行后呈现乱码问题：解决形式：批改md文件编码为UTF-8, 即可失常显示 如何应用：目录构造.├── docs│ ├── .vuepress (可选的)│ │ ├── components (可选的)│ │ ├── theme (可选的)│ │ │ └── Layout.vue│ │ ├── public (可选的)│ │ ├── styles (可选的)│ │ │ ├── index.styl│ │ │ └── palette.styl│ │ ├── templates (可选的, 审慎配置)│ │ │ ├── dev.html│ │ │ └── ssr.html│ │ ├── config.js (可选的)│ │ └── enhanceApp.js (可选的)│ │ │ ├── README.md│ ├── guide│ │ └── README.md│ └── config.md│ └── package.jsondocs/.vuepress: 用于寄存全局的配置、组件、动态资源等。docs/.vuepress/components: 该目录中的 Vue 组件将会被主动注册为全局组件。docs/.vuepress/theme: 用于寄存本地主题。docs/.vuepress/styles: 用于寄存款式相干的文件。docs/.vuepress/styles/index.styl: 将会被主动利用的全局款式文件，会生成在最终的 CSS 文件结尾，具备比默认款式更高的优先级。docs/.vuepress/styles/palette.styl: 用于重写默认色彩常量，或者设置新的 stylus 色彩常量。docs/.vuepress/public: 动态资源目录。docs/.vuepress/templates: 存储 HTML 模板文件。docs/.vuepress/templates/dev.html: 用于开发环境的 HTML 模板文件。docs/.vuepress/templates/ssr.html: 构建时基于 Vue SSR 的 HTML 模板文件。docs/.vuepress/config.js: 配置文件的入口文件，也能够是 YML 或 toml。docs/.vuepress/enhanceApp.js: 客户端利用的加强。首页docs/README.md该页为我的项目的首页，反对配置： ...