VuePress是一个由Vue 驱动的静态网站生成器

• 简洁至上
  以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
• Vue 驱动
  享受 Vue + webpack 的开发体验，可以在 Markdown 中使用 Vue 组件，又可以使用 Vue 来开发自定义主题。
• 高性能
  VuePress 会为每个页面预渲染生成静态的 HTML，同时，每个页面被加载的时候，将作为 SPA 运行。

安装

全局安装

npm install -g vuepress

创建项目并初始化

mkdir project
cd project
npm init -y

设置package

在 package.json 中添加如下内容:

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

docs目录

创建docs目录作为根目录存放文章和配置文件

mkdir docs
cd docs
mkidr .vuepress

基础配置

//.vuepress/config.js
module.exports = {
  title: 'Hello VuePress',
  description: 'Just playing around'
}

目录结构

├── docs
│   ├── .vuepress (可选的)
│   │   ├── config.js (可选的)
│   ├── README.md
│   ├── page1
│   │   └── README.md
└── package.json

• docs/.vuepress/config.js：默认主题配置页面 配置文档
• page1：文章页面，每个文章页面为xx/README.md的结构
• docs/README.md：默认首页，添加home:true用以启用，一个默认的首页布局：

---
home: true
heroImage: /hero.png
actionText: 快速上手 →
actionLink: /page1/
features:
- title: 简洁至上
  details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
  details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
  details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---

启动项目

npm run docs:dev

打包

npm run docs:build

永久链接： https://blog.cosdk.com/archives/1542