VuePress 入门

2025-06-07

VuePress 入门

图片
VuePress是静态网站生成器领域的新秀。Vue 的创始人尤雨溪 (Evan You) 提出了这个很棒的工具，用于为基于 Vue 的项目编写文档，这也是 Vue 项目的灵感来源。不过，这个强大的工具也可以根据您的需求进行定制。

VuePress 网站实际上是一个由 Vue、Vue Router 和 webpack 驱动的单页应用 (SPA)。构建完成后，会创建一个服务端渲染版本。类似于 Nuxt 和 Gatsby 的做法。

每个 Markdown 文件都会使用 markdown-it 编译成 HTML，然后作为 Vue 组件的模板进行处理。这允许你在 Markdown 文件中直接使用 Vue，尤其适合需要嵌入动态内容的情况。

特征

  • 内置 Markdown 扩展
  • 默认主题
  • 自动服务工作者
  • Google Analytics 集成
  • 多语言支持

安装

// install globally
yarn global add vuepress
npm install -g vuepress

// create a markdown file
echo '# Hello VuePress' > docs/README.md

// start writing
vuepress dev

// build
vuepress build
Enter fullscreen mode Exit fullscreen mode

设置完成后，我们应该配置网站。VuePress 具有高度可定制性，它附带默认主题，可以在此处配置。这是配置 VuePress 网站所需的文件docs/.vuepress/config.js

module.exports = {
  title: "Welcome to Wakanda",
  description: "The cultured people of Wakanda welcome you"
}
Enter fullscreen mode Exit fullscreen mode 
---
home: true
actionText: Get Started →
actionLink: /guide/
features:
- title: Simplicity First
  details: Minimal setup with markdown-centered project structure helps you focus on writing.
- title: Vue-Powered
  details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.
- title: Performant
  details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
footer: MIT Licensed | Copyright © 2018-present Evan You
---
# Wakanda Heritage

## Alert Options

::: tip
This is a tip
:::

::: warning No
This is a warning
:::

::: danger
This is a dangerous warning
:::
Enter fullscreen mode Exit fullscreen mode

使用 Markdown 内容，我们可以利用 Vue 的内置语法以及 Vue 组件实现很多功能。所有 Markdown 文件都会被编译成 Vue 组件并由 Webpack 处理，因此您可以（也应该）优先使用相对 URL 来引用任何资源。

覆盖样式

如果您想覆盖样式，您可以通过创建来.vuepress/override.styl更改默认主题样式。


$accentColor = #3eaf7c
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34
Enter fullscreen mode Exit fullscreen mode

使用 Netlify 部署

以下指南假设您将文件放置在项目的 docs 目录中，并使用默认的构建输出位置。
您的package.json文件应包含用于构建文档的以下命令。


"scripts": {
  "dev": "vuepress dev:docs"
  "build": "vuepress build:docs"
}
Enter fullscreen mode Exit fullscreen mode

Netlify 是静态网站最好的 CDN 之一，我将在 Netlify 上部署这个 VuePress 项目，从 GitHub 使用以下设置建立一个新项目：


Build Command:npm run docs:build or yarn docs: build
Publish directory:docs/.vuepress/dist
Enter fullscreen mode Exit fullscreen mode

点击部署按钮！

瓦坎达

VuePress 速度惊人，易于上手。本教程将 VuePress 的所有功能分解成小节。它支持在 Markdown 文件中编写 Vue 代码、自定义主题，还能提供预渲染的 HTML 代码，并在加载后以单页应用 (SPA) 的形式运行。欢迎查看文档，了解更多关于 VuePress 的功能。我们的最终项目位于此处，代码仓库为。

如果您对 VuePress 有任何疑问或想法，欢迎随时留下评论。

最初发布于giftegwuenu.com

文章来源：https://dev.to/lauragift21/getting-started-with-vuepress-1o1l
Devto 翻译
PREV
我的工作流程和帮助我提高生产力的工具
NEXT
给职业生涯早期的开发人员的建议