VuePress由两部分组成:第一部分是支持用Vue编写主题的极简静态网站生成器。第二部分是一个为编写技术文档而优化的默认主题。它的设计初衷是为了能够让开发者更加专注于写作。
下面,我们来看一下如何开始使用VuePress来构建一个静态网站。
安装
首先,你需要在你的项目中安装VuePress:
npm install -D vuepress
# 或者
yarn add -D vuepress
创建一个文档
在你的项目中创建一个 docs 目录,然后添加 README.md 文件:
# Hello VuePress
启动项目
在你的 package.json 添加一个启动脚本:
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
然后,运行以下命令来启动服务器:
npm run docs:dev
# 或者
yarn docs:dev
现在,你可以在浏览器中看到你创建的首个 VuePress 页面了。
VuePress为每一个以.md后缀 结尾的文件生成一个预渲染的HTML。在开发过程中,我们还提供了一个开发服务器,支持热重载。
构建静态网站
构建应用,只需要运行:
npm run docs:build
# 或者
yarn docs:build
运行成功后,你的 .vuepress/dist文件夹将变成可以部署到任何静态文件服务器的静态网站。
自定义主题
创建主题目录
首先,在你的 VuePress 项目中,你需要创建一个 .vuepress/theme
目录存放自定义主题相关的文件。
你的目录结构应该如下:
.
├── docs
│ ├── .vuepress
│ │ └── theme
│ │ ├── Layout.vue
│ │ └── styles
│ │ ├── index.styl
│ │ └── palette.styl
│ └── README.md
└── package.json
添加 Layout 组件
在 theme
文件夹中,创建一个 Layout.vue
文件。这就是你自定义主题的主布局文件:
<!-- theme/Layout.vue -->
<template>
<div class="layout">
<Content/>
</div>
</template>
添加样式
在 theme/styles
文件夹中,添加两个 .styl
文件:index.styl
和 palette.styl
,你可以在这里定义你的主题样式。
举例,你可以在 palette.styl
文件中重写默认的颜色变量,而在 index.styl
文件中添加你的自定义样式。
/* theme/styles/palette.styl */
$accentColor = #42b983
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34
/* theme/styles/index.styl */
.layout {
background: $accentColor;
color: $textColor;
border: 1px solid $borderColor;
}
使用你的自定义主题
最后,你需要在 .vuepress/config.js
文件中指定你的自定义主题:
module.exports = {
theme: 'my-theme',
}
现在,当你在本地运行你的VuePress站点时,你会发现它应用了你的自定义主题。
上述步骤只是创建并使用自定义主题的基础,你可以依据你的需求使用 Vue 和 VuePress 的 API 对其进行更多自定义。
VuePress为开发者提供了一种简单又灵活的方式构建静态站点。这只是个开始,VuePress还有很多有趣的功能等待你去挖掘。无论你是想搭建一个博客,还是为你的项目创建文档,VuePress都是一个优秀的选择。