快速上手 VuePress

摘要

VuePress支持使用Yarn和npm来安装，Node.js版本需要>=8才可以。当前 VuePress 版本 1.5.2，献上文档

安装 VuePress

# 新建一个 project 文件夹
mkdir project

# 初始化 project
npm init

# 安装
npm install vuepress -g

建立项目结构

project
├─── docs
│   ├── README.md
│   └── .vuepress
│       ├── public
│       └── config.js
└── package.json

• docs文件夹作为项目文档根目录，主要放置Markdown类型的文章和.vuepress文件夹。
• README.md 用来展示网站的首页
• .vuepress目录主要用于存放VuePress相关的文件。
• public文件夹，此文件夹主要放静态资源文件，例如favicons和 PWA的图标。
• config.js是VuePress必要的配置文件，它导出一个javascript对象。

基本配置

编写 README.md

# Hello VuePress

编写 config.js

module.exports={
  title:'Blog',
  description:"我的博客"
  head: [
    ['link', { rel: 'icon', href: 'hero.png' }],
  ],
}

• title：网站标题
• description：网站描述
• head：额外的需要被注入到当前页面的HTML"head"中的标签，其中路径的"/"就是public资源目录。

在 package.json 里添加一些脚本

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

如果不想安装到全局，可以选择安装到当前项目目录，然后使用 npx 来启动

启动项目

npm run dev