VuePress介绍

从本文开始,动手搭建自己的博客!希望读者能跟着一起动手,这样才能真正掌握。

VuePress 是什么

VuePress 是由 Vue 作者带领团队开发的,非常火,使用的人很多;Vue 框架官网也是用了 VuePress 搭建的。即使是在移动端,阅读体验也很好。

根据 VuePress 官网 的描述,VuePress 是 Vue 驱动的静态网站生成器。简单来说,就是将 Markdown 文件自动转换 HTML,简洁容易使用,性能高,我们只需专注于 Markdown 内容。

官方文档

一般来说,学习什么技术,或者使用什么工具,官网文档是最好的……

但我仔细看了下,官网的文档更相当于一个手册,大而全;而我需要的是一个教程,逐步完善功能,而不是一上来就列出所有的功能,令人眼花缭乱,不知道从何下手。为此,我自己整理了不少关于 VuePress 的笔记,看了不少关于 VuePress 入门的博客,才略有所得,写出了本教程。

版本

本文使用的是 VuePress1.x,虽然 VuePress2.x (也叫 VuePress@next)已经出来一段时间了(2021 年左右),但是 VuePress1.x 的生态很完善,不少主题和插件都仅兼容 1.x,所以本文也是使用 1.x。

题外话:就好比 Java 中,Java8 是用的最广泛的,生态也非常完善,最新版的 Java 较少人使用。

读者如果想使用最新版本的 VuePress,也可参考官方的文档,在官网右上角可以选择。博主也简单看了下 v2.x 的文档,在使用方面基本上和 v1.x 差不多,想要迁移也是很方便的。

除此之外还有 vitepress,基于 vite 建立的,也是因为生态不完善,所以这里不过多介绍。

环境准备

我们首先在本地搭建博客,为此我们需要:

  1. 一台电脑
  2. VuePress1.x 需要 Node 版本 ≥ 8.6,建议用最新版的 Node。
  3. Chrome 或 FireFox 浏览器(尽量不要用 IE 浏览器)

第一个博客

我们来写第一个博客吧!首先,创建一个文件夹,例如 vuepress-learn(文件夹名最好不要带中文和空格),也可以在 cmd 里使用如下命令

# Windows下
md vuepress-learn 
cd vuepress-learn# Linux 和 mac 下
mkdir vuepress-learn && cd vuepress-learn

使用自己喜欢的包管理器初始化:

npm init -yyarn init

安装 VuePress 依赖:

npm install -D vuepress

开始写第一篇博客:

  1. 我们在当前目录下创建一个 docs 目录(以后博客都放这个文件夹里),
  2. 进入到该文件夹,创建一个 README.md ​文档,里面写上内容“Hello VuePress”。
  3. 如果是在 Linux 或 Mac 下,也可以使用如下命令一步到位:
mkdir docs && echo '# Hello VuePress' > docs/README.md

修改 package.json 文件,添加一些启动命令:

{"scripts": {"docs:dev": "vuepress dev docs","docs:build": "vuepress build docs"}
}

其中,docs:dev​ 命令用于在本地运行本博客;而 docs:build​ 用于编译打包博客,用于部署到服务器上。

当前文件夹目录结果如下(忽略 node_modules 文件夹):

vuepress-learn
├── docs
│   └── README.md
├── package-lock.json
└── package.json

启动博客:在项目根目录运行如下命令:

npm run docs:dev

运行后,正常情况下就能编译成功,并且在最后会有提示:

success [22:46:24] Build 185e1f finished in 167 ms! ( http://localhost:8080/ )

我们在浏览器打开这个网址 http://localhost:8080​,可以看到如下内容:

​​

至此,我们的第一篇博客就完成了!

Git 初始化

为了后续教程需要,我们将本项目用 Git 管理

git init

添加 .gitignore 文件,忽略 node_modules 文件夹:

node_modules

获取源码

为了写本系列的博客,博主特地新建了一个项目用于演示,相关代码已放到 Gitee 和 GitHub 上。

并且,不同功能创建了不同分支,想要获取本篇文章演示的源码只需切换分支即可!

例如,你想运行本篇文章所创建的博客,可以这样做:

  1. 打开命令行
  2. 拉取代码:git clone git@gitee.com:peterjxl/vuepress-learn.git​ (也可拉取 GitHub 的)
  3. 跳转目录:cd vuepress-learn
  4. 切换分支:git switch -c VuePressDemo1HelloWorld origin/VuePressDemo1HelloWorld
  5. 安装依赖:npm i
  6. 运行博客:npm run docs:dev

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/38846.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

000.二分查找算法题解目录

000.二分查找算法题解目录 69. x 的平方根(简单)

4PCS点云配准算法实现

4PCS点云配准算法的C实现如下&#xff1a; #include <iostream> #include <pcl/io/pcd_io.h> #include <pcl/point_types.h> #include <pcl/common/common.h> #include <pcl/common/distances.h> #include <pcl/common/transforms.h> #in…

唯一ID:UUID 介绍与 google/uuid 库生成 UUID

UUID 即通用唯一识别码&#xff0c;是一种用于计算机系统中以确保全局唯一性的标识符。其标准定义于 RFC 4122 文档中。标准形式包含 32 个 16 进制数字&#xff0c;以连字符切割为五组&#xff0c;格式为 8-4-4-4-12&#xff0c;总共 36 个字符。&#xff08;形如, d169aa7f-4…

php 通过vendor文件 生成还原最新的composer.json

起因&#xff1a;因为历史原因&#xff0c;在本项目中composer.json基本算废了&#xff0c;没法直接使用composer管理扩展&#xff0c;今天尝试修复一下composer.json。 历史文件&#xff0c;可以看出来已经很久没有维护了&#xff0c;我们主要是恢复require的信息 {"na…

K8s节点维护流程

用途 用于下线异常节点、集群缩容等 操作步骤 1. 查看节点名称 先确认节点的名称 kubectl get node -o wide2. 设置节点不可调度 设置节点不可调度状态&#xff0c;禁止新的pod调度到该节点上 kubectl cordon ${node_name}3. 剔除节点上运行的pod&#xff08;生产环境慎…

Spring Boot中集成Redis实现缓存功能

Spring Boot中集成Redis实现缓存功能 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将深入探讨如何在Spring Boot应用程序中集成Redis&#xff0c;实现…

AP无法上线原因分析及排障

一、AP未分配到IP地址 如果遇到AP无法上线问题&#xff0c;可以检查下AP是否分配到IP地址。AP获取IP地址有两种方式&#xff1a;静态方式&#xff1a;登录到AP设备&#xff0c;手工配置IP地址&#xff0c;该方式操作起来比较麻烦&#xff0c;不推荐使用&#xff1b;DHCP方式&am…

基于CNN的股票预测方法【卷积神经网络】

基于机器学习方法的股票预测系列文章目录 一、基于强化学习DQN的股票预测【股票交易】 二、基于CNN的股票预测方法【卷积神经网络】 文章目录 基于机器学习方法的股票预测系列文章目录一、CNN建模原理二、模型搭建三、模型参数的选择&#xff08;1&#xff09;探究window_size…

下代iPhone或回归可拆卸电池,苹果这操作把我看傻了

刚度过一个愉快的周末&#xff0c;苹果又双叒叕摊上事儿了。 iPhone13 系列被曝扎堆电池鼓包了。 早在去年&#xff0c;就有 iPhone13 和 iPhone14 用户反馈过类似的问题&#xff0c;表示在手机仅仅使用了一年多的时间就出现了电池鼓包的情况&#xff0c;而且还把屏幕给撑起来了…

舞会无领导:一种树形动态规划的视角

没有上司的舞会 Ural 大学有 &#x1d441; 名职员&#xff0c;编号为1∼&#x1d441;。 他们的关系就像一棵以校长为根的树&#xff0c;父节点就是子节点的直接上司。 每个职员有一个快乐指数&#xff0c;用整数 &#x1d43b;&#x1d456; 给出&#xff0c;其中1≤&…

校园卡手机卡怎么注销?

校园手机卡的注销流程可以根据不同的运营商和具体情况有所不同&#xff0c;但一般来说&#xff0c;以下是注销校园手机卡的几种常见方式&#xff0c;我将以分点的方式详细解释&#xff1a; 一、线上注销&#xff08;通过手机APP或官方网站&#xff09; 下载并打开对应运营商的…

C++ 指针介绍

指针是C编程语言中的一个强大且重要的特性。它允许程序员直接操作内存地址&#xff0c;从而提供了对低级别内存的访问和控制。虽然指针在使用时可能比较复杂且容易出错&#xff0c;但它们在提高程序效率和灵活性方面有着不可替代的作用。本文将介绍C指针的基本概念、用法及其应…

Docker 中 MySQL 迁移策略(单节点)

目录 一、 简介二、操作流程2.1 进入mysql容器2.2 导出 MySQL 数据2.3. 将导出的文件复制到宿主机2.4 创建 Docker Compose 配置2.5 启动新的 Docker 容器2.6 导入数据到新的容器2.7 验证数据2.8 删除旧的容器&#xff08;删除操作需慎重&#xff09; 三、推荐配置四、写在后面…

当年很多跑到美加澳写代码的人现在又移回香港?什么原因?

当年很多跑到美加澳写代码的人现在又移回香港&#xff1f;什么原因&#xff1f; 近年来&#xff0c;确实有部分曾经移民到美国、加拿大、澳大利亚等地的香港居民选择移回香港。这一现象与多种因素相关&#xff0c;主要可以归结为以下几点&#xff1a; 疫情后的环境变化&#…

【STM32】温湿度采集与OLED显示

一、任务要求 1. 学习I2C总线通信协议&#xff0c;使用STM32F103完成基于I2C协议的AHT20温湿度传感器的数据采集&#xff0c;并将采集的温度-湿度值通过串口输出。 任务要求&#xff1a; 1&#xff09;解释什么是“软件I2C”和“硬件I2C”&#xff1f;&#xff08;阅读野火配…

2025第13届常州国际工业装备博览会招商全面启动

常州智造 装备中国|2025第13届常州国际工业装备博览会招商全面启动 2025第13届常州国际工业装备博览会将于2025年4月11-13日在常州西太湖国际博览中心盛大举行&#xff01;目前&#xff0c;各项筹备工作正稳步推进。 60000平米的超大规模、800多家国内外工业装备制造名企将云集…

C++中的RAII(资源获取即初始化)原则

C中的RAII&#xff08;Resource Acquisition Is Initialization&#xff0c;资源获取即初始化&#xff09;原则是一种管理资源、避免资源泄漏的惯用法。RAII是C之父Bjarne Stroustrup提出的设计理念&#xff0c;其核心思想是将资源的获取&#xff08;如动态内存分配、文件句柄、…

最细最有条理解析:事件循环(消息循环)是什么?进程与线程的定义、关系与差异

目录 事件循环&#xff1a;引入 一、浏览器的进程模型 1.1、什么是进程&#xff08;Process&#xff09; 1.2、什么是线程&#xff08;Thread&#xff09; 1.3、进程与线程之间的关系联系与区别 二、浏览器有哪些进程和线程 2.1、浏览器的主要进程 ①浏览器进程 ②网络…

ctfshow sqli-libs web561--web568

web561 ?id-1 or 1--?id-1 union select 1,2,3--?id-1 union select 1,(select group_concat(column_name) from information_schema.columns where table_nameflags),3-- Your Username is : id,flag4s?id-1 union select 1,(select group_concat(flag4s) from ctfshow.f…

扩展学习|风险评估和风险管理:回顾其基础上的最新进展

文献来源&#xff1a;[1]Aven, T. (2016). Risk assessment and risk management: Review of recent advances on their foundation. European journal of operational research, 253(1), 1-13. 文章简介&#xff1a;大约30-40年前&#xff0c;风险评估和管理被确立为一个科学领…