VuePress 由两部分组成：第一部分是一个极简静态网站生成器 (opens new window)，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。
每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。
官网地址: https://www.vuepress.cn/guide/getting-started.html
node环境和npm支持VuePress 需要 Node.js 版本 >= 8.6
若已有node.js环境使用命令查看node.js 版本
node -v
安装node.js下载安装包
https://nodejs.org/dist/
本文选择v12.18.4版本
上传解压
tar -zxvf node-v12.18.4-linux-x64.tar.gz -C /usr/local/
重命名
cd /usr/local/
mv node-v12.18.4-linux-x64/ node-v12.18.4
配置环境变量
创建nodejs.sh文件并添加如下内容
vi /etc/profile.d/nodejs.sh
export PATH=http://www.likecs.com/usr/local/node-v12.18.4/bin:$PATH
刷新nodejs.sh文件
[root@localhost local]# source /etc/profile.d/nodejs.sh
查看版本
[root@localhost local]# node --version
v12.18.4
[root@localhost local]# npm --version
6.14.6
VuePress安装步骤 全局安装创建放项目的文件夹
项目文件夹可以选自任意目录,本文选自在根目录下,
[root@localhost local]# cd /
[root@localhost /]# mkdir vuepress
在项目文件夹中全局安装
[root@localhost /]# cd /vuepress/
[root@localhost vuepress]# npm install -g vuepress
安装过程较慢,请耐心等待,出现如下信息表示安装完成
+ vuepress@1.8.2
added 1221 packages from 547 contributors in 871.19s
项目初始化执行初始化命令: npm init –y
[root@localhost vuepress]# npm init -y
Wrote to /vuepress/package.json:
{
"name": "vuepress",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
初始化后会生成package.json文件
[root@localhost vuepress]# ll
total 4
-rw-r--r--. 1 root root 222 Jun 14 12:34 package.json
配置package.json编辑package.json文件,在scripts项中添加如下两行
{
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
}
文件完整内容,标红的为添加的内容
{
"name": "vuepress",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
创建主页创建存放博客文件的docs文件夹
mkdir docs
[root@localhost vuepress]# mkdir docs
[root@localhost vuepress]# ll
total 4
drwxr-xr-x. 2 root root 6 Jun 14 12:40 docs
-rw-r--r--. 1 root root 290 Jun 14 12:38 package.json
进入到docs文件夹中创建README.md文件，这个文件就是博客的首页，在里面添加官网上的例子,也可以自定义其他内容
[root@localhost vuepress]# cd docs
[root@localhost docs]# vi README.md
# 添加如下内容
---
home: true
heroImage: /logo.jpg #主页上显示的logo图片
heroText: 莲藕淹 #主页标题
tagline: 莲藕淹的博客 #主页副标题
actionText: 开始浏览 ->
actionLink: /guide/ #点击开始浏览跳转的路径
features:
- title: 简洁至上
details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以>使用 Vue 来开发自定义主题。
- title: 高性能