VuePress的使用

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.qianxiaoduan.com/archives/1542

发表评论

电子邮件地址不会被公开。 必填项已用*标注