使用VuePress搭建博客系统(一)

# 使用VuePress搭建博客系统(一)

最近利用空余时间，使用VuePress来书写了项目的使用文档和个人博客，体会到了VuePress的使用广泛、方便管理和学习成本低。结合实际，现对VuePress的使用做一个由浅入深的总结和分享，希望对大家有所帮助，也欢迎大家在评论区讨论相关内容。

系统使用文档 (opens new window)

个人博客 (opens new window)

PHP开发的写作平台，优点：有成熟多元的插件，总可以找到自己喜欢的模版来搭建博客；使用人数众多，搭建中遇到问题可以快速找到解决方案。确定：系统需要进行服务器去安装，为了搭建博客系统，需要去了解PHP的部署环境等，如果仅仅只为了搭建博客平台，学习成本较高。

node.js开发的博客系统，优点是写作使用了markdown语法，方便使用；安装管理也简单。缺点是使用者逐步减少，逐步被边缘化。

Vue驱动的博客系统，会Vue就会VuePress，学习成本低；Vue的流行直接带来了较大的使用量，遇到问题能快速找到解决方案。VuePress主题+插件的模式，让我们即能快速搭建出专业的博客网站，也可以根据自己的需求，自定义博客系统。使用markdown来写文章。

结合自己已有的知识体系，从学习成本、社区支持等多方面来考虑，最终选择了VuePress来搭建自己的博客平台。

Vue是主流的前端框架，能通过SPA的方式写管理后台，也能通过SSR的方式编写网站，还能写出桌面应用等。使用者人数众多，开发的应用场景广泛。

需要注意的是如果日常开发中使用的是Vue2为主，则对应的VuePress版本是1.x；如果日常中使用的Vue3多，则需要学习VuePress2.x。

VuePress使用markdown来书写文章，我们需要熟练markdown的语法与书写方式。一般的文章主要有标题、列表、超链接和图片等组成，markdown都能帮我们快速的呈现。

markdown的书写，可以使用专门的markdown编辑器，如typora、vnote等。也可以使用前端开发中通用的编辑器，如vscode和hBuilder等。

1.建立目录

mkdir blog && cd blog

2.初始化工程项目

npm init -y

3.安装vuepress

npm install vuepress@1.x

4.设置开发与编译脚本

在项目的package.json文件中配置如下内容：

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

1
2
3
4
5
6
7

5.项目下建立docs目录

mkdir docs

docs目录是vuepress默认的书写博客文章的目录，必须创建该目录

6.执行VuePress命令，根据提示的地址访问后出现如下图即表示启动VuePress成功

npm run dev