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 里使用如下命令

shell 复制代码
# Windows下
md vuepress-learn 
cd vuepress-learn

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

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

shell 复制代码
npm init -y
或
yarn init

安装 VuePress 依赖:

shell 复制代码
npm install -D vuepress

开始写第一篇博客:

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

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

json 复制代码
{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

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

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

shell 复制代码
vuepress-learn
├── docs
│   └── README.md
├── package-lock.json
└── package.json

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

shell 复制代码
npm run docs:dev

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

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

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

​​

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

Git 初始化

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

shell 复制代码
git init

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

shell 复制代码
node_modules

获取源码

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

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

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

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

相关推荐
前端极客探险家5 小时前
打造一个 AI 面试助手:输入岗位 + 技术栈 → 自动生成面试问题 + 标准答案 + 技术考点图谱
前端·人工智能·面试·职场和发展·vue
末日的狂欢姐8 小时前
AXUI - 极致原生体验的零依赖的国产 Web UI 框架,欢迎体验和共建!
javascript·前端框架·vue·网站建设·ui设计
我爱布朗熊9 小时前
1.Vue3 - 创建Vue3工程
vue
凕雨14 小时前
Cesium学习笔记——dem/tif地形的分块与加载
前端·javascript·笔记·学习·arcgis·vue
Bl_a_ck5 天前
npm、nvm、nrm
前端·vue.js·npm·node.js·vue
小七de尾巴5 天前
利用pnpm patch给第三方库打补丁
vue·pnpm·patch·补丁
ILUUSION_S6 天前
Vue接口平台学习七——接口调试页面请求体
vue.js·vue
来自星星的坤6 天前
SpringBoot 与 Vue3 实现前后端互联全解析
后端·ajax·前端框架·vue·springboot
XDIGAS6 天前
Dockerfile项目实战-单阶段构建Vue2项目
docker·容器·centos·node.js·vue
风清云淡_A6 天前
【vue3】vue3+express实现图片/pdf等资源文件的下载
javascript·vue