三叶草 发表于 2022-9-15 19:33:33

使用VuePress快速搭建博客

# 使用VuePress快速搭建博客

最近我在3A平台购买了服务器,准备搭建一个博客。

## VuePress介绍



**`VuePress`** 是Vuejs官方提供的一个是Vue驱动的静态网站生成器,基于Markdown语法生成网页。简单的说它就是一个快速建设文档站点的工具,在简单配置好功能后,需要做的事情就剩下写好一个个 Markdown文档。

!(https://f.pz.al/pzal/2022/09/14/d6a016ee404a9.png)

## VuePress官网

(https://link.segmentfault.com/?enc=7ajD6Gdxfyl7tk%2F0NICk4A%3D%3D.Nu%2BWSczhXO4M9Wj%2BiRj3fY8VQ2rNUN4lJZweVZlUVhw%3D)

## VuePress指南

(https://link.segmentfault.com/?enc=Bx1YeQC2wXmKYUejx9QghQ%3D%3D.WxqdhnlQP7mayGFqvctgj7YhKhkfsB1bfYw1Lr%2FwSMe1AFQY9%2FaCS%2F70l25yE6sbX9IZOpIABhovYnKr5TOBFw%3D%3D)

## VuePress安装

安装前请安装 **`Node.js`**

**Node.js下载地址**

(https://link.segmentfault.com/?enc=zwhPzJG3QQPYX6VuQf%2Fg1Q%3D%3D.KaOF46E6AXYdeZJ%2F5cIa2JAtKWNZGltuZyMd2YEjBUc%3D)

你可以在一个硬盘创建一个目录,例如我再D盘的根目录下创建一个VuePress目录,然后双击进入这个目录,在这个目录的路径栏(将 **`D:\VuePress`** 替换为 **`cmd`** 然后按回车)输入CMD启动cmd来执行命令。

!(https://f.pz.al/pzal/2022/09/14/2bd5f2ac8e27f.png)

就会在这个目录下启动cmd命令行工具。

!(https://f.pz.al/pzal/2022/09/14/6dbec99c8b247.png)

**VuePress安装命令**

```cmake
npm install -D vuepress
```

国内请使用 **`cnpm`** 安装会更快,可执行以下命令安装 **`cnpm`**

```awk
npm install -g cnpm --registry=https://registry.npm.taobao.org
```

再执行以下命令安装 **`VuePress`**

```cmake
cnpm install -D vuepress
```

!(https://f.pz.al/pzal/2022/09/14/80a474504f6ba.png)

直接粘贴命令按回车就可以开始安装,只要命令还在跑,都还没完成安装,需要耐心等待。

> > 以上写得如此详细,就是为了照顾新手,大神请不要嫌弃。如果新手连以上的操作都不懂,建议还是要现学习一下Vue项目的创建、配置、运行、打包等基础知识。

## 创建VuePress文档

```bash
mkdir docs && echo '# Hello VuePress' > docs/README.md
```

## 配置VuePress

在你的VuePress项目目录下的 **`package.json`** 文件添加以下代码。

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

## 启动VuePress项目

```routeros
npm run docs:dev
```

!(https://f.pz.al/pzal/2022/09/14/56128b7d2fcf1.png)

启动后,将会在你的本地开启一个http服务

!(D:\img\bVc2h2n-1663145374461-6)

然后就可以通过 **`Markdown`** 语法来编写你的文档、博客、文章等内容了!

!(https://f.pz.al/pzal/2022/09/14/128a2c382f674.png)

## VuePress进一步配置

如果想要进一步完善你的 **`VuePress`** 文档,甚至是让 **`VuePress`** 像博客一样去使用,那么你可以根据 **`VuePress`** 官网提供的指南去进一步配置 **`VuePress`** 的导航栏、搜索、logo、侧边栏、代码高亮等,这样可以让你很快地学会使用 **`VuePress`** 来编写你的文章。                        

http://blog.itpub.net/70021605/viewspace-2914715/
页: [1]
查看完整版本: 使用VuePress快速搭建博客